jquery.load()関数を使用してポップアップdivにフォームを読み込んでいますが、これまでのところうまく機能しています。私が追加したいのは、フォームがエラーで送信されると、現在実行している実際のフォームページにリダイレクトするのではなく、エラーマークアップフォームをポップアップdivにロードして戻すことです。
誰かが私が完全に機能すると思うjquery-formを使用することを勧めました。どうやって実装したらいいのかわからない。
.load()関数は次のとおりです。
$(document).ready(function(){
$(".create").on("click", function(){
$("#popupContact").load("/cookbook/createrecipe #createform");
});
});
フォームを読み込むページは次のとおりです。
<div id="popupContact" class="popup">
<a id="popupContactClose" style="cursor:pointer;float:right;">x</a>
<p id="contactArea">
</p>
</div>
<div id="backgroundPopup">
</div>
<div id="col2-footer">
{% paginate %}
</div>
これが私のフォームテンプレートです:
<div id="createform">
<h1>Create New Recipe</h1>
<form id="createrecipe" action="{% url createrecipe %}" method="POST">
<table>
{% csrf_token %}
{{ form.as_table }}
</table>
<p><input type="submit" value="Submit"></p>
</form>
</div>
これがjquery-formを使用する私の試みです:
<script>
// wait for the DOM to be loaded
$(document).ready(function() {
var options ={
target: '.popup',
};
$('#createrecipe').submit(function() {
$(this).ajaxSubmit(options);
return false;
});
});
</script>
createrecipeビュー:
def createrecipe(request):
if not request.user.is_authenticated():
return HttpResponseRedirect('/index/')
else:
if request.method == 'POST':
print 1
form = RecipeForm(request.POST)
if form.is_valid():
print 2
recipe = form.save(commit=False)
recipe.original_cookbook = request.user.cookbooks.all()[0]
recipe.pub_date = datetime.datetime.now()
recipe.save()
user = request.user
cookbooks = user.cookbooks
cookbook = cookbooks.all()[0]
cookbook.recipes.add(recipe)
return HttpResponseRedirect('/account')
else:
form = RecipeForm()
return render_to_response('cookbook/createrecipe.html',
{'form':form},
context_instance=RequestContext(request))
ありがとうsnackerfish