2011-09-15 99 views
0

一起使用我想使用jQuery UI對話框來打開表單對話框,其中可以編輯關於員工的信息。
形式看起來像這樣jQuery UI對話框使用對話框()與replaceWith()

<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中被刪除。

如何成功預填表格?

回答

1

把你<form><div>並附加.dialog()div而不是向form

在AJAX調用中,按照現在的方法替換form,將其父div附加到對話框。

這是必要的,因爲jQuery UI在內部維護對對話框中包含的元素的引用,並且如果替換該元素,那些引用不會更新。更換該元素的孩子將消除該問題。

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