Forms 使用Dialog()和replaceWith()的jQuery UI对话框
我想使用jQuery UI对话框打开一个表单对话框,可以在其中编辑有关员工的信息。Forms 使用Dialog()和replaceWith()的jQuery UI对话框,forms,jquery-ui,dom,jquery,Forms,Jquery Ui,Dom,Jquery,我想使用jQuery UI对话框打开一个表单对话框,可以在其中编辑有关员工的信息。 表格是这样的 <form id="formAddNewRow" action="/frontend_dev.php/test/create" method="post" > <table> <tbody> <ul> <li> <label for="employee_firstname">F
表格是这样的
<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>
这是可行的,但如果我这样做,它就会停止工作:
$( "#formAddNewRow" ).dialog({});
没有错误消息或警告。该表单与dialog()插入的父节点一起从DOM中删除
如何成功地预先填充表单?将您的
放入
中,并将.dialog()
附加到div
而不是表单
在AJAX调用中,按现在的方式替换表单
,将其父div
附加到对话框中
这是必要的,因为jqueryui在内部维护对对话框中包含的元素的引用,如果替换该元素,这些引用将不会得到更新。替换该元素的子元素将消除该问题
<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>
$( ".editButton" )
.button()
.click(function() {
var replace = $.ajax({
url: 'employee/edit?id=1', success: function() {
$( "#formAddNewRow" ).replaceWith(replace.responseText);
}
});
});
$( "#formAddNewRow" ).dialog({});
<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>
$( "#formAddNewRowDialog" ).dialog();