jqGrid GridUnload - unable to reference <table> element after unload

Question

I have searched long and hard to try and figure out why the GridUnload is not working for me with no joy. So please excuse me if you find this is a duplicate.

I am displaying a jqGrid inside a jQuery.dialog. The first time it display with no issues. When I close the dialog and it gets triggered again, the jqGrid does not display. The dialog is triggered based on an AJAX response of a login action. If the dialog is closed I want to unload the grid so that if the login action is attempted again it will display the dialog and grid again. The second time the grid is blank.

I understand that the GridUnload creates a new element and then removes the old one, so I've made sure that I'm not using variables that could be referencing the old element.

My dialog and jqGrid code looks like this.

function changeAccountSelection(isLogon) {
    acctDialog = $("#accountSelectionDialog").dialog({
        autoOpen: false, draggable: true, closeOnEscape: false, resizable: true, position: "center",
        height: 505,
        width: 700,
        title: 'Select An Account',
        modal: true,
        open: function () {
            $("#accountSelectionGrid").jqGrid('GridUnload');
            //alert($("#accountSelectionGrid").get());
            $("#accountSelectionGrid").jqGrid({
                url: "AccountSelectionData?catalogId=10051&langId=-1&storeId=10751",
                datatype: "json",
                mtype: "GET",
                colNames: ["","Customer No.", "Customer Name", "DBA", "Address"],
                colModel: [
                    { name: "login", width: 110, align: "center", search:false, formatter: loginFormatter },
                    { name: "customerNumber", width: 110 },
                    { name: "customerName", width: 180 },
                    { name: "dba", width: 150 },
                    { name: "address", width: 200 }
                ],
                pager: "#accountSelectionNav",
                autowidth: true,
                rowNum: 10,
                rowTotal: 2000,
                rowList: [10, 20, 30],
                loadonce: true,
                sortname: "customerNumber",
                sortorder: "asc",
                viewrecords: true,
                height: 350
            });
            $("#accountSelectionGrid").jqGrid("navGrid","#accountSelectionNav",{edit:false,add:false,del:false});
            $("#accountSelectionGrid").jqGrid('filterToolbar',{stringResult: true,searchOnEnter : false});

        },
        close: function (e) {
            $(this).empty();
            $(this).dialog('destroy');
            if (isLogon) {
                // change this to an AJAX logoff call
                LogonFormJS.LogoffAjax();

            }
        }
    });
    acctDialog.dialog("open");    
}

My html looks like this...

<link rel="stylesheet" type="text/css" media="screen" href="${jspStoreImgDir}css/jquery-ui-1.10.3.redmond.css" />
<link rel="stylesheet" type="text/css" media="screen" href="${jspStoreImgDir}css/ui.jqgrid.css" />
<script type="text/javascript" src="<c:out value="${jsAssetsDir}javascript/jqGrid/i18n/grid.locale-en.js"/>"></script>
<script type="text/javascript" src="<c:out value="${jsAssetsDir}javascript/jqGrid/jquery.jqGrid.min.js"/>"></script>
....
<div id="accountSelectionDialog">
    <table id="accountSelectionGrid"><tr><td></td></tr></table>
    <div id="accountSelectionNav"></div>
</div>

A sample of my JSON data is...

{"page": 1,
    "total": 1,
    "records": 4,
    "rows":[
        {"id":"765126369","cell":["126369","Company ABC #102","","1234 TEST DR<br/>HOMETOWN, MI 49087"]},
        {"id":"765140373","cell":["140373","Company ABC #110","","1234 TEST DR<br/>HOMETOWN, MI 49087"]},
        {"id":"765140366","cell":["140366","Company XYZ #225","","1234 TEST DR<br/>HOMETOWN, IN 46637"]},
        {"id":"765140367","cell":["140367","Company XYZ #053","","1234 TEST DR<br/>HOMETOWN, IN 46530"]},
    ]}

I have tried moving my GridUnload to different action points, but it still doesn't work. I've inserted an 'alert' after the GridUnload with the following results... The first time the dialog is displayed and the grid has not been initilized yet the alert displays '[object HTMLTableElement]'. The second time the dialog is displayed the results of the alert is blank (not even undifined... just blank). The jQuery search for the #accountSelectionGrid does return an object but no HTML element associated with it.

I know I'm probably missing something simple, so I'm hoping someone can help me.

Thanks

Answer 1

In dialog close function you mentioned like ....

$(this).dialog('destroy');

=>...... It behaves like

It will remove the element (the specific dialog) from the DOM itself, When you are trying to close the dialog.

Next time if we are trying to open the dialog...It will check the specific dialog element is available in the DOM or not

The result is No...Because it wont be available, we already removed that element from the DOM by using .dialog('destroy');

Best Practice to use.. $(this).dialog('close');

The dialog will be closed but the element still available into the DOM....While opening the dialog box will be available.... when user attempts to open dialog again and again

Answer 2

I knew it was something stupid that I was missing. I discovered that my issue was being caused by my $(this).empty() and $(this).dialog('destroy') calls on my dialog. These two calls, primarily the empty() call were blowing away my grid table. Thus, when I tried to initialize the jqGrid it was not show anything since the element was gone (at least thats my guess). Changing the call to dialog('close') and leaving my dialog intact solved the problem.

close: function (e) {
    $(this).dialog('close');
    if (isLogon) {
        LogonFormJS.LogoffAjax();

    }
}