Jtable and EasyUi issue loading Jtable

[Jblc3]

I have a button in an easyui styled panel whos click event fires off the ajax request to load the Jtable. In the event handler i hide the panel, then show divs allotted for my jtable. What seems to be happening is the createnew, edit, and delete prepared Jdialogs for the Jtable are being prepared, then rendered over the Jtable busy layer while the jtable loads behind it. I then need to close out all those dialogs, the busy layer closes, and jtable appears normally loaded but the events dont work correctly. If I remove easyui.jquery.min.js Jtable loads normally, but of course all my easyui functionality is lost. I did a little digging and it looks like the jtable busytimer is being toggled by easyui for some reason and the jdialogs end up being rendered in front of the busy layer. Anyone spot something i am missing here?

Script loading in head section :

    <link href="/Content/Site.css" rel="stylesheet" type="text/css" />
    <link href="/Content/themes/redmond/jquery-ui-1-11.4.custom.css" rel="stylesheet" type="text/css" />
    <link href="Scripts/jtable/themes/metro/blue/jtable.min.css" rel="stylesheet" type="text/css" />
    <link rel="stylesheet" type="text/css" href="easyui/themes/metro-gray/easyui.css"/>
    <link rel="stylesheet" type="text/css" href="easyui/themes/icon.css"/>

   <!-- <script type="text/javascript" src="easyui/jquery.min.js"></script>-->
 <script src="Scripts/jquery-2.1.4.min.js" type="text/javascript"></script>
 <script src="Scripts/jquery-ui-1.11.4.min.js" type="text/javascript"></script>
 <script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>

    <!-- Include jTable script file. -->
<script src="Scripts/jtable/external/json2.js" type="text/javascript"></script>
<script src="Scripts/jtable/jquery.jtable.js" type="text/javascript"></script>
  <!-- ASP.NET Web Forms extension for jTable -->
 <script type="text/javascript" src="/Scripts/jtable/extensions/jquery.jtable.aspnetpagemethods.js"></script>

This is my content HTML contained in body section:

<div id="maincontainer">
    <div id="topsection">
        <div class="innertube" style="padding-right: 30px;">
             <a href="/Default.aspx"><img src="easyui/themes/RdmsLogo_800x50.jpg" alt="logo" /></a>    
        </div>
        <div style="width: 950px;background-color: black;height: 2px;"></div>
    </div> 

    <div id="contentwrapper">
        <div id="contentcolumn">
            <div id="transformDiv" class="abc" style="display: block;width: 420px;  position: fixed;top: 50%;left: 50%;transform: translate(-50%, -50%);">
                <div class="panel-header" id="" style="width: 400px;">
                    <div class="panel-title">Welcome</div> 
                        <div style="padding:10px 60px 20px 60px">
                            <div style="text-align: center;padding: 5px">
                                <a href="#" id="btnCreateNewOrder" class="btn-link l-btn"><span class="l-btn-left"><span class="l-btn-text">Create New Order</span></span></a>
                                <a href="#" id="btnViewExistingOrder" class="btn-link l-btn"><span class="l-btn-left"><span class="l-btn-text">View Existing Orders</span></span></a>
                             </div>
                        </div>
               </div> 
          </div>

          <div id="site-container">
                <div id="jtableButtonContainerTop" style="display:none;padding:20px;">
                     <a href="#" id="btnLogOutTop" class="btn-link l-btn"><span class="l-btn-left"><span class="l-btn-text">Log Out</span></span></a>
                </div>

                         <div id="InboundOrderTableContainer" class="centerTable"></div>

                <div id="jtableButtonContainerBottom" style="display:none;padding:20px;">
                        <a href="#" id="btnLogOutBottom" class="btn-link l-btn"><span class="l-btn-left"><span class="l-btn-text">Log Out</span></span></a>
                 </div>
         </div>
            <div id="createNewOrderControlDiv" class="centerNewOrder" style="display: block" ></div>
        </div>
    </div>

This is my Jquery/Ajax code:

   $(document).ready(function () {

            $("#btnViewExistingOrder").click(function (e) {

                e.preventDefault();
               $("#transformDiv").hide();
                $("#site-container").show();
                $("#jtableButtonContainerTop").show();
                $("#jtableButtonContainerBottom").show();
                LoadJtable();

        });

            function LoadJtable() {
                //Prepare jtable plugin
                $('#InboundOrderTableContainer').jtable({
                    title: 'The Inbound Order List',
                    dataType: 'json',
                    contentType: 'application/json',
                    paging: true,
                    pageSize: 10,
                    //   startIndex:1,
                    sorting: true,
                    processData: false,
                    animationsEnabled: true,
                    defaultSorting: 'InboundOrderId ASC',
                    actions: {
                        //   listAction: '/TestingIt.aspx/HelloWorld',
                        listAction: 'WebServices/TestingItService.asmx/HelloWorld',
                        // createAction: '/TestingIt.aspx/CreateInboundOrder',
                        createAction: 'WebServices/TestingItService.asmx/CreateInboundOrder',
                        // updateAction: '/TestingIt.aspx/UpdateInboundOrder',
                        updateAction: 'WebServices/TestingItService.asmx/UpdateInboundOrder',
                        //  deleteAction: '/TestingIt.aspx/DeleteInboundOrder'
                        deleteAction: 'WebServices/TestingItService.asmx/DeleteInboundOrder'
                    },
                    fields: {
                        InboundOrderId: {
                            key: true,
                            create: false,
                            edit: false,
                            title: 'Order Id',
                            width: '15%'

                        },
                        DateOrdered: {
                            title: 'Date Ordered',
                            width: '10%',
                            type: 'date',
                            displayFormat: 'yy-mm-dd'
                            //      inputClass: 'validate[required,custom[date]]'
                        },
                        QuantityOrdered: {
                            width: '5%',
                            title: 'Quantity'
                            //    inputClass: 'validate[required]'

                        },
                        ProductName: {
                            width: '10%',
                            title: 'Product',
                            type: 'text',
                            //    width : '25%'
                            //  inputClass: 'validate[required]'

                        },
                        OrderNumber: {
                            width: '10%',
                            title: 'Order Number',
                            type: 'text',

                        },
                        Store: {
                            width: '10%',
                            title: 'Store'
                            //  width: '25%',
                            // options: '/PagingAndSorting.aspx/GetCityOptions'
                        },
                        UnitCost: {
                            width: '15%',
                            title: 'Unit Cost',

                            type: 'decimal'
                            //  displayFormat: 'yy-mm-dd'
                        },
                        Bundled: {
                            width: '10%',
                            title: 'Bundled',

                            type: 'radiobutton',
                            options: { 'True': 'Yes', 'False': 'No' }
                            //    width: '10%'
                            // inputClass: 'validate[required]'
                            //     defaultvalue: { 'false' : 'No' }
                        },
                        Notes: {
                            width: '10%',
                            title: 'Notes',
                            type: 'textarea',
                            sorting: false,

                        }

                    }
                });

                $('#InboundOrderTableContainer').jtable('load');

            }
        });
    </script>

This is a screen capture of the issue:

![jtableeasyui_issue](https://cloud.githubusercontent.com/assets/14891975/10172583/18824966-66ae-11e5-90c4-a8d84473d939.jpg)

[Jblc3]

This issue with this I believe is that the error, create new, and delete dialogs, do not have classes assigned to the div they are created in, and i believe because of this the creation forks off to easyui to create the dialogs, and as somewhat orphaned from the jtable, they are plopped on the main window. Not sure if the Jtable dialogs when created are supposed to be assigned classes to their containing div or not. But the rest of the containers are such as div.mainContainer, div.jtable ect. The created dialogs are just being sent out as div.

My solution is to use easyuiloader, and selectively load only the modules i want easyui applied to such as:

     easyloader.load('panel', function() {
               $("#newOrderTableHolder").panel();
           });

           easyloader.load('datebox', function () {
               $("#orderDate").datebox();
           });

changing the jquery.easyui.min.js reference to easyuiloader.js