Question

I have become very swamped by my django website since I have started using jquery and ajax.
I am new to ajax and javascript so please keep that in mind when responding and sorry if I am a bit confused.

Basically I have a template that has a form to create a recipe. I use jquery .load to load this template to a popup div on another page. The form seems to load into the div fine but when I try and submit the form, nothing happens (no validation check or anything – if i leave fields empty it returns no error.) The strange thing is that when i visit the actual page I am loading with jquery, the form works perfectly. This has been bogging me down quite a bit and I would love to move on so any help is much appreciated.

here is the load script:

<script type="text/javascript">
$(document).ready(function(){
    $(".create").on("click", function(){
        $("#popupContact").load("/cookbook/createrecipe #createform");
    });
});
</script>

template for page loading the form:

{% 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 %}

create-recipe template:

{% 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 %}

create-recipe view:

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))

javascript code for jquery-form:

<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> 

thanks,
snackerfish

edit1: mark has pointed out that my form action was wrong and so that was resolved.

Answer 1

The form action for the create form is the current page '.'. If you load this on the create page url that will work fine as you noted. However if you load this on the listing page with a popup then it will submit the form to the list view which is not correct. Setting the action="{% url 'create-view' %}" will correct this issue. 'create-view' would be replaced with the name for the create view pattern.