jQuery UI Dialog Box using dialog() together with replaceWith()

I want to use jQuery UI dialog box to open a form dialog where one can edit information about an employee.

The form looks like this

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

I want to load the form elements prefilled with the employees data. eg

<label for="employee_lastname">Lastname</label&开发者_如何学运维gt; <input type="text" name="employee[lastname]" value="Miller" id="employee_lastname" />

So my idea was to ajax a complete form that fits the selected employee and replace it with the one above.

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

I try doing that by

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

               });

This works, but it stops working when I do:

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

There is no error message or warning. The form just gets eliminated from the DOM together with its parent node that was inserted by dialog().

How do I prefill the form succesfully?

---

Put your <form> into a <div> and attach the .dialog() to the div instead of to the form.

In the AJAX call replace the form as you are now, leaving its parent div attached to the dialog box.

This is necessary because jQuery UI internally maintains references to the element contained in the dialog box, and if you replace that element those references don't get updated. Replacing a child of that element will eliminate that problem.

---

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

Wrap the form in a div like above then call

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