Диалоговое окно jQuery UI с использованием dialog () вместе с replaceWith ()

Question

Я хочу использовать диалоговое окно jQuery UI, чтобы открыть диалоговое окно формы, в котором можно редактировать информацию о сотруднике.
Форма выглядит так

<form id="formAddNewRow" action="/frontend_dev.php/test/create" method="post" >
  <table>
    <tbody>
     <ul>
      <li>
         <label for="employee_firstname">Firstname</label>
         <input type="text" name="employee[firstname]" id="employee_firstname" />
      </li>
      <li>
         <label for="employee_lastname">Lastname</label>
         <input type="text" name="employee[lastname]" id="employee_lastname" />
      </li>
     <ul>
    </tbody>
  </table>
</form>

Я хочу загрузить элементы формы, предварительно заполненные данными сотрудников. например,

<label for="employee_lastname">Lastname</label> <input type="text" name="employee[lastname]" value="Miller" id="employee_lastname" />

Таким образом, моя идея состояла в том, чтобы ajax заполнить форму, которая подходит выбранному сотруднику, и заменить ее на приведенную выше.

<form id="formAddNewRow" action="/frontend_dev.php/test/create" method="post" >
  <table>
    <tbody>
     <ul>
      <li>
         <label for="employee_firstname">Firstname</label>
         <input type="text" name="employee[firstname]" value="Miller" id="employee_firstname" />
      </li>
      <li>
         <label for="employee_lastname">Lastname</label>
         <input type="text" name="employee[lastname]" value="Tom" id="employee_lastname" />
      </li>
     <ul>
    </tbody>
  </table>
</form>

Я пытаюсь сделать это

$( ".editButton" )
    .button()
    .click(function() {
           var replace = $.ajax({
                     url: 'employee/edit?id=1', success: function() { 
                          $( "#formAddNewRow" ).replaceWith(replace.responseText); 
                                                                     }
                                });

               });

Это работает, но перестает работать, когда я делаю:

$( "#formAddNewRow" ).dialog({});

Нет сообщения об ошибке или предупреждения. Форма просто удаляется из DOM вместе с ее родительским узлом, который был вставлен функцией dialog ().

Как мне успешно заполнить форму?

Answer 1

<div id="formAddNewRowDialog">
  <form id="formAddNewRow" action="/frontend_dev.php/test/create" method="post" >
    <table>
      <tbody>
       <ul>
        <li>
           <label for="employee_firstname">Firstname</label>
           <input type="text" name="employee[firstname]" value="Miller" id="employee_firstname" />
        </li>
        <li>
           <label for="employee_lastname">Lastname</label>
           <input type="text" name="employee[lastname]" value="Tom" id="employee_lastname" />
        </li>
       <ul>
      </tbody>
    </table>
  </form>
</div>

Оберните форму в div, как указано выше, затем позвоните

$( "#formAddNewRowDialog" ).dialog();

Answer 2

Поместите <form> в <div> и прикрепите .dialog() к div вместо form.

В вызове AJAX замените form, как сейчас, оставив его родительский div прикрепленным к диалоговому окну.

Это необходимо, поскольку пользовательский интерфейс jQuery внутренне поддерживает ссылки на элемент, содержащийся в диалоговом окне, и если вы замените этот элемент, эти ссылки не будут обновлены. Замена child этого элемента устранит эту проблему.