Returning jQuery dialog back to original state on close/save etc

I'm currently working on a jQuery Dialog feature where the open method is called through a inline Javascript onclick function e.g.

<a href="#" onclick="showDialog(this); return false;">Click Me</a>

function showDialog(entity) {

 //Set up some variables
 var id = $(entity).attr('id);

 //Create some Html form elements to go in the Dialog window
 var html = "<input type='text' name='name' id='' />" +
     "<input type='hidden' name='id' id='id' value=' + id + ' />";

 //Set the dialog HTML and trigger the dialog open method

}

This works fine, when I make changes to the content of the dialog, for example, hiding fields, changing content through Ajax calls etc and attem开发者_高级运维pt to open another dialog after closing the other one, the changes are still present.

I thought of using the destroy functionality but I then get jQuery errors regarding the inability to initilise.

How can I return the Dialog back to its original state on close or save of the dialog?

---

You can do it by using a template div like this :-

Put the html you want the dialogue to appear everytime with (when clicked fresh or after a save or close) inside a template div like this:-

<a href="#" onclick="showDialog(this); return false;">Click Me</a>
<div id="dialogueTemplate">
  <input type='text' name='name' id='' />"
  <input type='hidden' name='id' id='id' />
</div>

In the javascript part -

function showDialog(entity) {

     //Set up some variables
     var id = $(entity).attr('id');

     //Then while displaying the dialogue, get the template
     var html = $("div#dialogueTemplate").attr('innerHTML');

    //fill into the dialogue's body
$("div#dialogue p").attr('innerHTML',html);

    //Apply runtime changes
    $("div#dialogue p input[name='id']").attr('id',id);

   //Finally display the dialogue
   $( "#dialogue" ).dialog('open');
}

---

simply set your html variable to null in the start of the method

whenever you call this method ,it will be fresh...without any values.

var html= '' ;