Question

Building a site so users can add topics onto a site and ask then Q&A. Using AJAX, the “Add Media” button on the home page loads my Add Media Form (text and an image) to the site. The box is rendering fine with the correct forms, but after hitting Submit the form doesn’t save in the database. When just rendering the form onto a new HTML page without jquery, the model works just fine and the input is saved. How do I get the information submitted in a jquery lightbox to be saved in the database too?

So this is the html page

#home.html
<a href="#login-box" class="btn btn-success">Add Media</a>  
        <div id="login-box" class="addmovie-popup">

This is the jquery that goes with it

#home.js
$(document).ready(function() {
    $('.block3 a').click(function(ev) {
        ev.preventDefault();
        var url = $(this).attr('href');
        $('#login-box').load('http://127.0.0.1:8000/home/add_movie/');
    });
}); 

The URL conf

#urls.py
url(r'^add_media/$', 'add_media'),

The view for adding media

#views.py
def add_media(request):
    if request.method == "POST":
        form = MediaForm(request.POST, request.FILES)   
        if form.is_valid():
            form.save(user = request.user)
            return HttpResponseRedirect("/home//")
    else:
        form = MediaForm()
        return render_to_response("qanda/add_media.html", {'form': form}, context_instance = RequestContext(request))

And the HTML form that it is rendering

#add_media.html
<h1> Add Media:</h1>
<form enctype = "multipart/form-data" action = "" method = "post">{% csrf_token %}
    {{ form.as_p }}
    <input type = "submit" value = "Add" />
    <input type = "hidden" name = "next" value = "{{ next|escape }}" />
</form>

Answer 1

If you’re loading HTML into your page dynamically action = "" would point to the current page, which clearly doesn’t handle your POST requests.

Set the action to the correct URL.