使用dialog() 和replaceWith() 的jQuery UI 对话框
我想使用 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中被删除。
如何成功预填表格？
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> <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?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
将
在 AJAX 调用中，将
form替换为现在的样子，将其父级div附加到对话框。这是必要的，因为 jQuery UI 在内部维护对对话框中包含的元素的引用，并且如果替换该元素，这些引用不会更新。替换该元素的子将消除该问题。
Put your
<form>into a<div>and attach the.dialog()to thedivinstead of to theform.In the AJAX call replace the
formas you are now, leaving its parentdivattached 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 中，然后调用
Wrap the form in a div like above then call