私のユースケースは次のとおりです。
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>
モーダルの読み込みと表示は正常に機能します。しかし、今度は期待どおりに機能しない 2 番目の部分が来ます。問題は以下です。フォームが検証されない場合、ビューはフォームを返します。返されたフォームは、ブートストラップ モーダルに再度表示されます。しかし、その結果、ブラウザにはフォームのみが表示され、それ以外はすべて失われます。CSSもテーブルもフォームもありません。かなり醜い..したがって、ajax_form_modal_result_divを更新できませんでした。ここで私が間違っていることを誰か助けてもらえますか..!?
ビューは、フォームのデフォルトの動作を防ぎ、ajax 経由でフォームを送信する js 関数 'submitItemModalFormBind' も返します。
<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>