Возврат диалогового окна jQuery обратно в исходное состояние при закрытии / сохранении и т. Д.

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 и т. д. и попытка открыть другое диалоговое окно после закрытия другого, изменения все еще присутствуют.

Я думал об использовании функции уничтожения, но затем я получаю ошибки jQuery относительноневозможность инициализации.

Как вернуть диалог обратно в исходное состояние при закрытии или сохранении диалога?

Answer 1

Вы можете сделать это с помощью шаблона 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');
}

Answer 2

просто установите вашу переменную html равной нулю в начале метода

всякий раз, когда вы вызываете этот метод, он будет новым ... без каких-либо значений.

var html= '' ;