Ajax post with Django and jquery

Question

I'm new to all django, ajax things .. I read some tutorials on the net and I'm trying to make a simple form which posts some information via ajax.

Here is jquery part of my template :

<script type="text/javascript">

 $(document).ready(function () {

  $('#iEventAjax').submit( function()
  {
   var name = $('input[name=event_name]');
   var data = name.val();
   $.ajax({
                                type:"POST",
                                url:"/mediaplanner/edit/",
                                data:data,
                                success: function(msg){
                                        alert(msg);
                                }
                        });
  });

And the view code :

def iEventAjax(request):
        if request.is_ajax():
                return HttpResponse("ok")
        else:
                return render_to_response("iEventSave.html",{})

Well, when i post something, it returns iEventSave.html instead of giving the "ok" message. Any suggestions, which part do I fail ?

Answer 1

What is happening with this code:

1. You bind a handler to the form on submit
2. You then submit an ajax response which returns "ok"
3. The form continues to submit as a regular HTML form
4. The second submission returns the template because it is a GET request, not AJAX

In jQuery you need to either return false from the submit function, or call preventDefault on the event jQuery Submit Docs

So:

$(document).ready(function () {

$('#iEventAjax').submit( function()
{
 var name = $('input[name=event_name]');
 var data = name.val();
 $.ajax({
                            type:"POST",
                            url:"/mediaplanner/edit/",
                            data:{my_data:data},
                            success: function(msg){
                                    alert(msg);
                            }
                    });
return false;
});

Answer 2

You want to do var data = name.serialize(); to create a query-string parameter.