我的用例是：
a) 在引导模式中显示通过 ajax 加载的表单，花哨的覆盖效果的东西...... 我按照这些说明进行操作。
这工作正常。（见下面的代码）
b) 将此表单提交回我的 Django 应用程序，尝试验证它，如果它没有验证，请在精美的引导模式中重新显示带有错误的表单。
我可以通过 ajax 重新加载表单，但我无法在模态中再次表示它。
注意：我没有包含视图，因为它没有什么特别之处。仅实例化和验证表单。
下面有很多要阅读的内容，所以如果您认为用例听起来很有趣，请继续...
我的 taskList.html 看起来像这样：
<table id="listItemTable" class="table table-bordered">
<thead>
<tr>
<th>Name</th>
<th>Edit</th>
</tr>
</thead>
<tbody>
<tr>
<td>Task 1</td>
<td><a class="editItem" href="/update/item/1/">edit</a></td>
</tr>
</tbody>
</table>
<div class="modal hide" id="itemFormModal"></div>
<div id="modalExtraJsPlaceholder"></div>
.js 用于加载表单 + 显示引导模式 + 绑定表单到 .jquery 提交调用：
$(document).ready(function() {
modalConnect();
});
<script type="text/javascript">
//connects the modal load for each <a> with class editItem
//Functionality 1
//loads an item edit form from the server and replaces the itemFormModal with the form
//presents the modal with $("#itemFormModal").modal('show');
//Functionality 2
//loads some extra js "modalExtraJsHtml"
//calls the function "submitItemModalFormBind" which has been loaded via "modalExtraJsHtml"
function modalConnect(){
$(".editItem").click(function(ev) { // for each edit item <a>
ev.preventDefault(); // prevent navigation
url = ($(this)[0].href); //get the href from <a>
$.get(url, function(results){
var itemForm = $("#ajax_form_modal_result", results);
var modalExtraJs = $("#modalExtraJs", results);
//get the html content
var modalExtraJsHtml = modalExtraJs.html();
//update the dom with the received results
$('#itemFormModal').html(itemForm);
$('#modalExtraJsPlaceholder').html(modalExtraJsHtml);
$("#itemFormModal").modal('show');
submitItemModalFormBind(); //bind loaded form to ajax call
}, "html");
return false; // prevent the click propagation
})
}
</script>
从视图返回的 itemForm 如下所示：
<form id="#ajax_form_modal_result" class="well" method="post" action="/update/item/{{ item.id }}">
<div id="ajax_form_modal_result_div">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h3>Edit Item</h3>
</div>
<div class="modal-body">
{% csrf_token %}
{{form.as_p}}
</div>
<div class="modal-footer">
<input class="btn btn-primary" type="submit" value="Save" />
<input name="cancel" class="btn" type="submit" value="Cancel"/>
</div>
</div>
</form>
加载和显示模式工作正常。但现在是第二部分，它没有按预期工作。问题如下。如果表单未通过验证，视图将返回表单。返回的表单应在引导模式中再次显示。但结果是只有表单出现在浏览器中，其他一切都丢失了。没有css，没有表格，只有表格。相当难看..因此我没有实现更新ajax_form_modal_result_div。谁能帮我解决我做错了什么..！？
该视图还返回 js 函数“submitItemModalFormBind”，它防止表单默认行为并通过 ajax 发送表单。
<div id="modalExtraJs">
//ajax bind for update item form visualized via modal
function submitItemModalFormBind(){
var url = "{% url updateItem item.pk %}";
$('#ajax_form_modal_result').submit(function(){
$.ajax({
type: "POST",
url: "{% url updateTask item.pk %}",
data: $(this).serialize(),
success:function(response){
var div = $("ajax_form_modal_result_div", response);
$('#ajax_form_modal_result_div').html(div);
},
error: function (request, status, error) {
console.log("failure");
console.log(request.responseText);
}
});
});
return false;
}
</div>