EasyUI Forum

General Category => EasyUI for jQuery => Topic started by: alozano on June 15, 2015, 01:50:29 AM


Title: Datagrid inside an AJAX window
Post by: alozano on June 15, 2015, 01:50:29 AM
Hello,

    I'm trying to open an AJAX windows that have a datagrid that loads data from a URL.
    In the window's openning it launch the exception: Uncaught TypeError: Cannot read property 'panel' of undefined jquery.easyui.min.js:9805
    On the child window I put a button that reload datagrid URL data and it works correctly when I click it.
    But I need to auto load the data when the user opens the child window.

Thanks in advance,

Code of the main window(main.html):

Code:
<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta charset="UTF-8" />
        <link rel="stylesheet" type="text/css" href="js/themes/default/easyui.css" />
        <script type="text/javascript" src="js/jquery.min.js"></script>
        <script type="text/javascript" src="js/jquery.easyui.min.js"></script>
    </head>
<body>
    <a href="#" class="easyui-linkbutton" onclick="OpenChildWindow();">Open child window</a>
    <div id="wchild" class="easyui-window" title="Child window" closed="true" collapsible="false">
    </div>
    <script type="text/javascript">

        function OpenChildWindow() {

            $('#wchild').panel('resize', { height: $(window).height() * 0.9 });
            $('#wchild').panel('resize', { width: $(window).width() * 0.9 });
            $('#wchild').window('refresh', 'child.html').window('center').window('open');
            
        };

    </script>
</body>
</html>


Child window code(child.html):

Code:
<a href="#" class="easyui-linkbutton" onclick="ReloadData();">Reload data</a>
<table id="grddata" class="easyui-datagrid"
       idfield="IdField"
       url="handler.ashx?mode=test">
    <thead>
        <tr>
            <th data-options="field:'IdField',align:'left'">IdField</th>
            <th data-options="field:'Field1',align:'left'">Field1</th>
            <th data-options="field:'Field2',align:'left'">Field2</th>
            <th data-options="field:'Field3',align:'left'">Field3</th>
        </tr>
    </thead>
</table>
<script>
    function ReloadData() {
        $('#grddata').datagrid({ url: 'handler.ashx?mode=test' });
    }
</script>



Sample data returned from handler.ashx:

"[{"IdField":36,"Field1":"2015-06-15T10:47:34","Field2":"Puig","Field3":"Joan"},{"IdField":40,"Field1":"2015-06-15T10:47:34","Field2":"Costa","Field3":"Maria"},{"IdField":41,"Field1":"2015-06-15T10:47:34","Field2":"Pozo","Field3":"Julia"}]"

Title: Re: Datagrid inside an AJAX window
Post by: jarry on June 15, 2015, 08:32:11 AM
Please rewrite your 'OpenChildWindow' function as:
 
Code:
function OpenChildWindow() {
    $('#wchild').window('resize', {
        width: $(window).width()*0.9,
        height: $(window).height()*0.9
    }).window('open').window('center').window('refresh','child.html');
};

Title: Re: Datagrid inside an AJAX window
Post by: alozano on June 16, 2015, 01:52:17 AM
Thank you jarry for your response, but it says the same error.

Then I try to simplify the OpenChildWindow function to this code below and I got the same error.

Code:
        
function OpenChildWindow() {

            $('#wchild').window('refresh', 'child.html').window('open');

        };

Any ideas?
Thank's,


Title: Re: Datagrid inside an AJAX window
Post by: jarry on June 16, 2015, 04:43:39 AM
Please try the code below instead.
Code:
$('#wchild').window('open').window('refresh', 'child.html');

Title: Re: Datagrid inside an AJAX window
Post by: alozano on June 16, 2015, 06:13:27 AM
Thank you jarry now it works like a charm!!!   :)


Powered by SMF 1.1.18 | SMF © 2013, Simple Machines