1

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: マークは、私のフォーム アクションが間違っていると指摘したので、解決されました。

4

1 に答える 1

1

フォームを作成するためのフォーム アクションは、現在のページ'.'です。これを作成ページの URL にロードすると、指摘したように正常に機能します。ただし、これをリストページにポップアップでロードすると、フォームがリストビューに送信されますが、これは正しくありません。を設定するaction="{% url 'create-view' %}"と、この問題が修正されます。'create-view'作成ビュー パターンの名前に置き換えられます。

于 2012-04-23T17:06:54.490 に答える