jQuery Grid Plugin - jqGrid

Hello,

I'm trying to use a modal dialog from the jQuery-UI project to display a jqGrid.  When I first coded it I was associating the jqGrid to the #homeLocationSearchGrid element of the #homeLocationSearchDialog in the ready function.  It displayed correctly, but the jqGrid was getting populated when the page first loaded which I didn't want.  I wanted it to load the jqGrid whenever the button was pushed that pops up the dialog box.  The jqGrid didn't seem to have a way to tell it not to populate when it is initially instantiated.  Is there a way to do that?  Since I couldn't find out how to do that, I modified my code (see below) to attach the jqGrid to the #homeLocationSearchGrid element every time the button is pushed.  However, I don't see the XHR request going through after the first display of the dialog box.  So then I wanted to disassociate the jqGrid everytime the dialog was closed, but I didn't really know how to do that.  I puta call to GridDestroy in the "close" method of the dialog box.  However, after I close the dialog the first time, all subsequent displays of it don't have the jqGrid inside.  Can anyone help me on this?  Thanks!

Sean

    $(document).ready(function() {
        // Create date picker for effective date input field.
        $('#effectiveDate').datepicker();

        // Setup the home location search popup window.
        var searchDialog = $('<div id="homeLocationSearchDialog"></div>')
           .html('<div><table id="homeLocationSearchGrid"></table></div><div id="homeLocationSearchPager"></div>')
           .dialog({
               altRows: true,
               autoOpen: false,
               close: function(event, ui) {

                },
               modal: true,
               title: 'Find Home Location',
               width: 1100
           });

        // Attach the home location popup to the home location search button.
        $('#homeLocationSearchButton').click(function() {

               $('#homeLocationSearchGrid').jqGrid({
                    url: '<c:out value="${homeLocationSeasrchUrl}" />',
                    datatype: 'xml',
                    mtype: 'GET',
                    colNames: ['Location ID', 'Location Name', 'Address 1', 'Address 2', 'City', 'State', 'Zip Code'],
                    colModel: [
                               {name: 'locationId', index: 'locationId'},
                               {name: 'locationName', index: 'locationName'},
                               {name: 'address1', index: 'address1'},
                               {name: 'address2', index: 'address2'},
                               {name: 'city', index: 'city'},
                               {name: 'state', index: 'state'},
                               {name: 'zipCode', index: 'zipCode'}
                             ],
                    rowNum: 10,
                    rowList: [10, 25, 50],
                    pager: '#homeLocationSearchPager',
                    sortname: 'locationId',
                    viewrecords: true
              });
           
            searchDialog.dialog('open');
        });
    });