ajax - Ajax code not executing

Question

I am learning Ajax and I ran into a little problem.

I'm trying to submit a POST request to a django backend with ajax. EVEN the alert won't show up on the screen. And as I see in the test django server shell, it doesn't even submit the POST request.

The code:

<script type="text/javascript">
    $('#btnLike').on('click', function(event) {
     alert('ok');

      $.ajax({
       type: 'POST',
        url: 'http://127.0.0.1:8000/backend/website/like', /* for testig */
        data: {
         csrfmiddlewaretoken: {% csrf_token %},
         post_id = $('#post_id').val(),
         },
       });
      });
</script>

The HTML form:

<form onsubmit="return false">
 {% csrf_token %}
 <input type="text" name="post_id" value= {{post.pk}} hidden="hidden">
 <button type="submit" name="btnLike" class="btn btn-info">Like</button>
</form>

I know i'm doing something horribly wrong but I don't know what.

Now that you mention it, yes. There is a "Uncaught SyntaxError: Unexpected token <". Could there be a problem with django's {% csrf_token %}? — david20002062, Dec 29 '16 at 20:27
Not sure if this is the problem, but either way you should be surrounding it with quotes like `'{% csrf_token %}'` — yts, Dec 29 '16 at 20:29
Scratch that. The django csrf token is meant to be in the html, not in javascript. In your javascript you should just be serializing the form (this will also include the hidden token input) and posting it. See http://stackoverflow.com/a/6960586/1825352 on how to submit a form with ajax — yts, Dec 29 '16 at 20:31
I removed it and now im not getting that error but it's still not working. — david20002062, Dec 29 '16 at 20:43
Scratch that, i tried out what you've linked and it works. :D Thank You! — david20002062, Dec 29 '16 at 20:48

Vitalii Strimbanu · Answer 1 · 2016-12-29T20:28:08.330

1

Your selector $('#btnLike')is not correct, it is looking for a button with id="btnLike".

Try this:

<button type="submit" id="btnLike" class="btn btn-info">Like</button>

Please make sure you load jQuery library in your HTML and wrap all your jQuery code into

$(document).ready(function(){ 
    //your code goes here
 });

edited Dec 29 '16 at 20:28

answered Dec 29 '16 at 20:13

Vitalii Strimbanu

477
3
7

Thank you for your answer but unfortunately it still not working. Still, even the alert won't show. – david20002062 Dec 29 '16 at 20:18
Then I have to ask if you load the jQuery properly? – Vitalii Strimbanu Dec 29 '16 at 20:20
I think so, I mean I placed the script tag with the google cdn for it at the nd of the html file. – david20002062 Dec 29 '16 at 20:29

score 0 · Answer 2 · answered Dec 29 '16 at 20:28

the problem is with your value for url. remove the ip address. use relative addressing. also put id to your button.

$('#btnLike').on('click', function(event) {
 alert('ok');

  $.ajax({
   type: 'POST',
    url: 'backend/website/like', /* for testig */
    data: {
     csrfmiddlewaretoken: {% csrf_token %},
     post_id = $('#post_id').val(),
     },
   });
  });

Button HTML

<form onsubmit="return false">
 {% csrf_token %}
 <input type="text" name="post_id" value= {{post.pk}} hidden="hidden">
 <button type="submit" id="btnLike" class="btn btn-info">Like</button>
</form>

Thank you for your answer, but unfortunately it's still not working. — david20002062, Dec 29 '16 at 20:44

birophilo · Answer 3 · 2016-12-30T07:48:17.693

For reference: If you're serializing the form (as per yts's comment) then you won't need to explicitly include the csrf_token in your AJAX code. But if you were using just AJAX, then pass in the token like:

csrfmiddlewaretoken: '{{ csrf_token }}',

not

csrfmiddlewaretoken: '{% csrf_token %}',

The template variable {{ csrf_token }} outputs the token string, eg.

'mytoken123456789'

whereas the tag {% csrf_token %} outputs a hidden HTML input element:

<input type="hidden" name='csrfmiddlewaretoken' value='mytoken123456789' />

The syntax error you mention in the comment above is because it's trying to parse this input element rather than the token string.

ajax - Ajax code not executing

3 Answers3