When reusing a dialog, how do you go about clearing the contents before it is called again?

When reusing a dialog, how do you go about clearing the contents before it is called again?

Hello,

This has probably been asked before, but I'm not having much luck finding an example of how to go about the following scenario.

I have around a page that has hundreds of possible inputs that all reuse the dialog, but with different contents provided via AJAX.

When you call the dialog and it gets populated, the contents are still there when you call it again until they are overwritten via the AJAX call.

I was hoping that I could call something like .clear()  that would clear the contents of the dialog, but there doesn't seem to be that functionality.

What is the best way to go about this?  Is there a way to just set the content of the dialog to be empty as you call it or when you close it?

I looked at the .destroy() method, but wasn't sure if that was what I want or not.

Below is the code I am using for the dialog including the use of .load() to dynamically populate the dialog with contents.

Any help you can provide will be greatly appreciated.


  1.     $(function() {
            $( "#dialog-message" ).dialog({
                autoOpen: false,
                modal: true,
                buttons: {
                    Close: function() {  // this is the button in the lower right of the modal window
                        $( this ).dialog( "close" );
                    }
                }
            });
            $( "#dialog-message" ).dialog( "option", "width", 500 );
            $('#message').click(function(){ 
                    $('#dialog-message').dialog('open'); 
                    return true;
                });
        });
       
        $(document).ready(function(){
           var peID = '';
           //define config object
           var dialogOpts = {
                modal: true,
                bgiframe: true,
                autoOpen: false,
                height: 600,
                width: 800,
                draggable: true,
                resizeable: true,
                open: function() {




























  2.             // use .load to get the contents to display in the modal
                    $("#dialog-message").load("dspProcessElements.cfm?modalWin=1&peID="+peID)}
            };
          
            $("#dialog-message").dialog(dialogOpts);
               
            $("a .RoleCall ui-corner-all").click(function (e) { 

                // e == our event data 
                e.preventDefault();
            });












  3.       // when someone clicks on an element with and ID that starts with peID- we use split to grab the number after it so we can pass it on to the dspProcessElements.cfm page  via the .load() method
            $("a[id^=peID-]").click(function() {
                   
                if (document.className != 'role')
                    {   
                        peID = $(this).attr('id').split('-')[1];
                        $("#dialog-message").dialog("open");
                        return false;
                    }
                });