Question

I have made a dialog and a UI Tab in that dialog. In that tab i am showing some contents as a table. When i close the dialog by remove() method it closes the dialog but when i reopen it the contents are still showing in the tab, is there any method that contents will also reomve when dialog closes. below is my code.

this.formOrderList = null;
this.orderListDialogObject = $('<div id="mainDiv"></div>');
this.orderListTable = $('<div>'
        + '<table class="ui-widget" width="100%" border="0"  cellspacing="1" cellpadding="2">'
        + '<thead class="ui-widget-header" id="orderListHead">' + '<tr>'
        + '<th><strong> Order# </strong></th>'      
        + '<th><strong> Ref # </strong></th>' + '</tr>' + '</thead>'
        + '<tbody id="orderListBody">' + '</tbody>' + '</table>' + '</div>');
this.orderListTabs = $('<div>' + '<ul>'
        + '<li><a href="#pendingOrderList">Pending</a></li>' + '</ul>'
        + '<div id="pendingOrderList">' + '</div>' + '</div>');

this.show = function() {
    this.orderListDialogObject.dialog({
        title : 'Order List',
        width : 1000,
        height : 150,
        close : function(ev, ui) {              
    $(this).remove();               
            return false;
        }
    });
this.orderListTabs.tabs();
    this.orderListTabs.appendTo(this.orderListDialogObject);        
    $("#pendingOrderList", this.orderListTabs).append(this.orderListTable);

Answer 1

You’re creating your divs once, and then reusing those same instances repeatedly. Your remove call just removes that div (along with all of its contents) from the DOM tree — you’re not doing anything that will clear the div’s contents.

You should probably either:

1. Create a new set of divs each time you show the dialog — i.e., re-run all of the above code each time you want to show the dialog, rather than doing some of it once up-front. That way, you’re starting with a clean slate each time. Or,
2. Clear the contents of one or more of the divs before you start adding new stuff to it, by calling empty().

Option #1 would probably be cleaner and easier to maintain in most cases.