Question

因为我已经开始使用jquery和ajax，所以我的django网站已经变得非常淹没了。我是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>

感谢， snackerfish

edit1：mark指出我的表单操作错误，因此解决了。

Answer 1

创建表单的表单操作是当前页面'.'。如果您在创建页面网址上加载此网址，那将按照您的说明正常工作。但是，如果您使用弹出窗口在列表页面上加载它，那么它会将表单提交到列表视图，这是不正确的。设置action="{% url 'create-view' %}"将解决此问题。 'create-view'将替换为创建视图模式的名称。

使用jquery加载带表单的django模板

1 个答案: