jquery と ajax を使い始めてから、自分の django Web サイトに圧倒されています。私は ajax と JavaScript を初めて使用するので、返信する際はその点に注意してください。少し混乱していたら申し訳ありません。
基本的に、レシピを作成するためのフォームを持つテンプレートがあります。jquery .load を使用して、このテンプレートを別のページのポップアップ div にロードします。フォームは div に正常に読み込まれるようですが、フォームを送信しようとしても何も起こりません (検証チェックなどはありません。フィールドを空のままにしておくとエラーは返されません)。奇妙なことに、実際のページにアクセスすると、 jquery で読み込んでいますが、フォームは完全に機能します。これは私をかなり悩ませてきました。私は先に進みたいので、どんな助けも大歓迎です。
ロードスクリプトは次のとおりです。
<script type="text/javascript">
$(document).ready(function(){
$(".create").on("click", function(){
$("#popupContact").load("/cookbook/createrecipe #createform");
});
});
</script>
フォームをロードするページのテンプレート:
{% block content %}
{% autopaginate recipe_list 6 %}
<div id="recipe_cont">
{% for recipe in recipe_list %}
<div class="recipe">
<div class="button">
<a href="{% url cookbook.views.userrecipe recipe.id %}" style="display: none;"></a>
<h4>{{ recipe.name }}</h4>
<h5>{{ recipe.author }}</h5>
<h5>Prep Time: {{ recipe.prep_time }} minutes</h5>
</div>
</div>
{% endfor %}
</div>
<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>
{% endblock %}
作成レシピ テンプレート:
{% extends "cookbook/base.html" %}
{% block content %}
<div id="createform">
<h1>Create New Recipe</h1>
<form action="." method="POST">
<table>
{% csrf_token %}
{{ form.as_table }}
</table>
<p><input type="submit" value="Submit"></p>
</form>
</div>
{% endblock %}
作成レシピ ビュー:
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))
jquery-form の JavaScript コード:
<script>
// wait for the DOM to be loaded
$(document).ready(function() {
var options ={
target: '#popupContact',
url: '{% url createrecipe %}',
success: function() {
alert("Thank you for your comment!");
}
};
$('#createrecipe').ajaxForm(options);
});
</script>
ありがとう、スナックフィッシュ
edit1: マークは、私のフォーム アクションが間違っていると指摘したので、解決されました。