jQuery UI对话框使用对话框（）与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({}); 

没有错误消息或警告。该表单与其通过dialog（）插入的父节点一起从DOM中被删除。

如何成功预填表格？

Answer 1

把你<form>成<div>并附加.dialog()到div而不是向form。

在AJAX调用中，按照现在的方法替换form，将其父div附加到对话框。

这是必要的，因为jQuery UI在内部维护对对话框中包含的元素的引用，并且如果替换该元素，那些引用不会更新。更换该元素的孩子将消除该问题。

Answer 2

<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();