Geek Answers Handbook

Django Ajax Jquery Call

This may be basic, but I spent two days reading countless tutorials, and I still can't get it to work. To simplify, I tried to complete the main task just to see how it works. I want to send an ajax request for my donated look. I see that it succeeds, but I expected that my template will also be updated to "TRUE", but it will remain "FALSE". Any help or suggestions I appreciate.

my jquery ...

$.ajax({ type: "POST", url:"/donate/", data: { 'test': 'success', }, success: function(){ alert('test') }, error: function(){ alert("Error"); });

it's my opinion...

 def donate(request): if request.is_ajax(): test = "TRUE" if request.method == 'POST': form = DonateForm(request.POST) if form.is_valid(): form.save() else: form = DonateForm() test = "FALSE" return render_to_response('donate_form.html', {'form':form,'test':test}, context_instance=RequestContext(request))

My template includes this ...

 <h1>{{ test }}</h1>

Update / Solution

As mentioned in the comments on this, I did nothing with the returned data. I updated my success request to the next and it worked

  $.ajax({ type: "POST", url:"/donate/", data: { 'zip': zip, }, success: function(data){ results = $(data).find('#results').html() $("#id_date").replaceWith("<span>" + results + "</span >"); }, error: function(){ alert("Error"); },
+7
source share
3 answers

I think the problem is where you are transferring the data. Do you use Firebug ? A great tool for checking if you are posting anything to POST , it's a great tool for web development in general.

Here's a working example for sending an Ajax call from a form

 $("#form").submit(function(event) { var $form = $(this), $inputs = $form.find("input, select, button, textarea"), serializedData = $form.serialize(); $.ajax({ url: "/donate/", type: "post", data: serializeData, success: function(response) { alert(response) } }) event.preventDefault(); });

and then your idea may look something like this.

 if request.is_ajax() or request.method == 'POST': form = DonateForm(data=request.POST) if form.is_valid(): return HttpResponse("Success") else: return HttpResponse("Fail")

Btw, if you really don't need all the extra functions from $.ajax() , I suggest you use $.post() instead, as this seems more direct to use.

+12
source

I think there are a few things that don't match your code ...

  • You send a POST request to django without csrf_token => django will not return success for this request. You need to send csrf_token with a POST request. Check with firebug.

  • Even if django does not give any error, you do not change the contents of your page (in the browser) anywhere ... djang will send back this line → "success" ... that's all.

You need to change your code as follows:

add 'django.core.context_processors.csrf' to TEMPLATE_CONTEXT_PROCESSORS in settings.py to access csrf tokens in all templates.

your current template:

 <html> <script type="text/javascript"> $("#form").submit(function(e) { e.preventDefault(); serializedData = $("#form").serialize(); $.ajax({ url: "/donate/", type: "post", data: serializeData, cache: 'false', dataType: "json", async: 'true', success: function(data) { alert(data) }, error:function(data) { alert("error in getting from server") }, }); }); </script> <body> <form id="form"> {% csrf_token %} {% for field in form %} {{ field }} {% endfor %} </form> <body> </html>

Donate Opinion:

 def donate(request): if request.method == 'POST': form = DonateForm(data=request.POST) if form.is_valid(): form.save() return HttpResponse("SuccessFully Saved") else: return HttpResponse("Error in saving")

Now you will see:

  • SuccessFully Saved → if the data was saved successfully.
  • Error while saving → If the data is not saved for any reason.
  • error when receiving from the server → if the server responded with some error.
+2
source

The request.is_ajax() test checks if the HTTP_X_REQUESTED_WITH header exists, which must be set by jQuery before sending your request. (If you use XMLHttpRequest manually, you also need to add this header manually.) I personally like to go on a different route because it is easier to test and does not rely on HTTP headers: adding a request parameter to the URL, for example '? type = Ajax. "

Then you changed request.is_ajax() to request.GET.get('type', null) == 'ajax' and in your JavaScript change url:"/donate/" to url:"/donate/?type=ajax" .

The best part about this approach is that you can test these calls without using AJAX by simply adding the line ?type=ajax to any request.

0
source

More articles:


All Articles