Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

AJAX and DJANGO form

I'm a newbie to both Ajax and Django. To simplify the question assume I have one hidden form and two objects, and I ask the users to click some of the position of the objects. Each clicks fills out a part of the form. I want the form to be filled out once for each object. so twice overall. When the form is filled for the first subject I want to send the form via Ajax to the server, without refreshing the page, and allow the form to be refilled for the second object. However, for some reason I can't get the form to be send via ajax.

here is my code: index.html:

<html>
<body>
<script src="{{ STATIC_URL }}prototype.js"></script>
<script src="{{ STATIC_URL }}jquery.js"></script>
<script>

  objectID= 1;
  num_obj = {{num_obj}}

  function ajax_post(){
    $('#inputform').submit(function() {  
        $.ajax({ 
            type: 'POST',
            url: '/index/',
            data: $(this).serialize(),
            success: function(data){alert(data)}

         }); // end new Ajax.Request
    });
  }


 function onDocumentMouseDown( event ) {
        ....do stuff
        if (objectID < num_obj){
           ajax_post()
           }
        if (objectID == num_obj){ 
            $("form").submit();}
        objectID ++;
        $("form").clearForm();
        document.forms[0].ObjectID.value = objectID;
        }
  </script>
  <form action="" method="post" id="inputform">
      <div id="ajaxwrapper">
       {% csrf_token %}
       <table>
        {{ form.as_table }}
       </table>
     </div>
  </form>
</body>
</html>

my view.py:

from django.http import HttpResponse, HttpResponseRedirect
from django.shortcuts import *
from firstapp.forms import PracForm3

num_obj=2

def index(request):
   Obj.objects.all().delete()
   if request.method == 'POST':
    form = PracForm3(request.POST)
    print "\n\n\n\n\n"
    if request.is_ajax():
      print "yaaaaay AJAX"
      print request.POST
    else:
      print "noooooo"
    print "\n\n\n\n\n"
    if form.is_valid():
      cd = form.cleaned_data
      .....
      if cd['ObjectID'] == num_obj:
        return HttpResponseRedirect('/submit')
   else:
     form = PracForm3()
     dic = {'form': form, 'num_obj': num_obj, ...}
   return render_to_response('index.html', dic, context_instance=RequestContext(request))  

my urls.py:

from django.conf.urls import patterns, include, url
from firstapp.views import index, submit
from django.conf import settings

urlpatterns = patterns('',
('^index$', index),
('^submit$', submit),
)

for some reason, my Ajax does not work anyone knows what I'm doing wrong?

like image 784
user1871528 Avatar asked Dec 03 '12 04:12

user1871528


1 Answers

This is probably related CSRF for AJAX posts, you have to remember to pass the CSRF token in as POST data with every POST request. You may need to add this code here, which are the Django docs that talk about Django+CSRF+AJAX.

I notice in your Django view that you are redirecting to "submit" Typically with ajax I would not redirect to a different url, I would use a HttpResponse and return some string value, such as JSON. I also don't know why you have print statements in your view, unless you are steeping into that view in a debugger. For testing/debugging you should have a variable that you assign some string to, and then pass that back to your ajax. Then in your ajax you can read the message from the view, something like this.

def index(request):
    ...
    if request.is_ajax():
        msg = 'it worked'
    else:
        msg = 'i am sad'
    return HttpResponse(msg)
    ...

Also you javascript should have a success and error function in the ajax call, you only have success so you are not catching errors, given the view tad bit your javascript would look like this:

...
success: function(data){alert(data)}, 

error: function(data){alert(data)}
...         

It looks like you may have several issues going on. If you have not done the CSRF stuff that I gave you the link to that is an issue too, for testing use the csrf_exempt if you don't want to address doing it the preferred way. Try the code bits above and see if that makes progress for you.

like image 187
esse Avatar answered Sep 24 '22 10:09

esse