Question

我目前正在开发一个jQuery Dialog功能，其中open方法是通过内联Javascript onclick函数调用的，例如

<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

}

这很好用，当我更改对话框的内容时，例如隐藏字段，通过Ajax调用更改内容等，并在关闭另一个对话框后尝试打开另一个对话框时，更改仍然存在。

我想过使用destroy功能但是我得到了关于无法初始化的jQuery错误。

如何在关闭或保存对话框时将Dialog恢复回原始状态？

Answer 1

只需在方法的开头

将html变量设置为null

每当你调用这个方法时，它都会很新鲜......没有任何值。

var html= '' ;

Answer 2

你可以使用这样的模板div来实现： -

把你想要对话的html每次出现（当点击新的时候或保存或关闭后）在这样的模板div中： -

<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>

在javascript部分 -

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');
}

在关闭/保存等方面将jQuery对话框返回到原始状态

2 个答案: