jQuery UI 对话框使用 dialog() 和 replaceWith()答案

【问题标题】：jQuery UI Dialog Box using dialog() together with replaceWith()jQuery UI 对话框使用 dialog() 和 replaceWith()
【发布时间】：2011-09-15 18:18:40
【问题描述】：

我想使用 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 中删除。

如何成功预填表单？

【问题讨论】：

标签： forms jquery-ui dom jquery

【解决方案1】：

将您的<form> 放入<div> 并将.dialog() 附加到div 而不是form。

在 AJAX 调用中，像现在一样替换 form，将其父 div 附加到对话框中。

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

【讨论】：

【解决方案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();

【讨论】：