How to repopulate Dojo DataGrid?

Question

I have a DataGrid displaying search info that is created and appended to my results pane div when I hit the search button. The problem is that when I hit search again the first one is still there so a new grid gets appended and it doesn't end up appearing since the first one is filling the div. Is there a way to get a reference to the original pane, reset the store, and refresh it? I loose a reference to the object since the search function ends and the variable goes out of scope. Does Dojo use global variables and if it does how do I set these or is there a different way of doing this?

Thanks

Code:

function loadAdvancedSearchResultsTable( ) {
            console.debug("inside loadAdvancedSearchResultsTable()");
            // See: http://dojo-toolkit.33424.n3.nabble.com/Dojo-dijit-form-Form-form-submit-on-keyboard-enter-td3359280.html
            var name = dijit.byId('search_name').get("value");
            var callingNumber = dijit.byId("search_callingnumber").get("value");
            var calledNumber = dijit.byId('search_callednumber').get("value");
            var durationBetweenStart = dijit.byId('search_durationbetween_start').get("value");
            var durationBetweenEnd = dijit.byId('search_durationbetween_end').get("value");
            var dateStart = dijit.byId('search_datebetween_start').get("value");
            var dateEnd = dijit.byId('search_datebetween_end').get("value");

            //var executeSearchPhpLink = "modules/content_panes/searchresults.php?";
            var executeSearchPhpLink = "modules/data_store/search_results_datastore.php?";
            var executeSearchPhpLinkHasElement = false;

            if(name != "") {
                executeSearchPhpLink += "name=" + name;
                executeSearchPhpLinkHasElement = true;
            }

            if(callingNumber != "") {
                if(executeSearchPhpLinkHasElement == true) {
                    executeSearchPhpLink += "&";
                }
                executeSearchPhpLink += "callingNumber=" + callingNumber;
                executeSearchPhpLinkHasElement = true;
            }

            if(calledNumber != "") {
                if(executeSearchPhpLinkHasElement == true) {
                    executeSearchPhpLink += "&";
                }
                executeSearchPhpLink += "calledNumber=" + calledNumber;
                executeSearchPhpLinkHasElement = true;
            }

            if(durationBetweenStart != "") {
                if(executeSearchPhpLinkHasElement == true) {
                    executeSearchPhpLink += "&";
                }
                executeSearchPhpLink += "durationBetweenStart=" + durationBetweenStart;
                executeSearchPhpLinkHasElement = true;
            }

            if(durationBetweenEnd != "") {
                if(executeSearchPhpLinkHasElement == true) {
                    executeSearchPhpLink += "&";
                }
                executeSearchPhpLink += "durationBetweenEnd=" + durationBetweenEnd;
                executeSearchPhpLinkHasElement = true;
            }

            if(dateStart != null) {
                if(executeSearchPhpLinkHasElement == true) {
                    executeSearchPhpLink += "&";
                }
                executeSearchPhpLink += "dateStart=" + dateStart;
                executeSearchPhpLinkHasElement = true;
            }

            if(dateEnd != null) {
                if(executeSearchPhpLinkHasElement == true) {
                    executeSearchPhpLink += "&";
                }
                executeSearchPhpLink += "dateEnd=" + dateEnd;
                executeSearchPhpLinkHasElement = true;
            } 

            console.debug("About to set the content pane href to " + executeSearchPhpLink);

            // Create the data store to be used
            var searchResultsStore = new dojo.data.ItemFileReadStore({url: executeSearchPhpLink});

            // Set the layout structure
            var gridStructure = [
                { field: 'user', name:'Name', width:'15%' },
                { field: 'dn', name:'Calling Number', width:'15%' },
                { field: 'origcalledparty', name:'Called Number', width:'15%' },
                { field: 'callstarttime', name:'Start Time', width:'10%' },
                { field: 'callendtime', name:'End Time', width:'10%' },
                { field: 'duration', name:'Duration', width:'10%' },
                { field: 'datetime', name:'Date', width:'25%' }
            ];

            // Construct the data grid
            var searchResultsDataGrid = new dojox.grid.DataGrid({
                store: searchResultsStore,
                clientSort: true,
                rowSelector: true,
                structure: gridStructure
            },document.createElement('div'));

            // Append the new grid to the search results content pane
            dojo.byId("searchResultsContentPane").appendChild(searchResultsDataGrid.domNode);

            // Call startup to render the grid
            searchResultsDataGrid.startup();

        }

Answer 1

Define searchResultsStore and searchResultsDataGrid vars outside the function with keyword var and use them globally in function without keyword:

var searchResultsDataGrid = null; 
function abc() {
   searchResultsDataGrid = new Abc(...); 
}

If that doesnt't help, you could explicitly empty the ResultDiv with dojo.empty() or destroyDescendants().

Hope I could help.