Ajax is failing

Question

I can't figure out why this Ajax script isnt working.

Heres the code:

$(document).on('submit', '.edit_user', function(){
    console.log('submit');
    $.post
    (
      $(this).attr('action'),
      $(this).serialize(),
      function(data){
        console.log("data");
        console.log(data);
        $('#edit_first_name').val(data['first_name']);
      },
      "json"
    );
    return false;
  });

I have the submit show up in the console so I know the .post is called. I also know it makes it to the return false because the form never submits and redirects.

However, it never console.log(data).

I'm pretty sure all this is because I'm forgetting something simple.

Probably the function returns `false` before receiving the response because `$.post` is asynchronous. Check this: http://stackoverflow.com/questions/5821380/how-to-make-a-jquery-post-request-synchronous — enenen, Aug 28 '13 at 07:36
if you work in Chrome console, check the "Network" tab. Is ajax request there? — lvil, Aug 28 '13 at 07:42
@enenen I tried this with `.ajax` (mind you I've actually never done it this way. So its probably wrong): `$.ajax({ type:'POST', url: $(this).attr('action'), data: $(this).serialize(), success: function(data){ console.log(data); }, dataType: 'json', async:false }) return false;` It still had the same results — JDillon522, Aug 28 '13 at 07:47
@lvil if by ajax request you mean the result of the function called by the form, then yes, its there. — JDillon522, Aug 28 '13 at 07:48
I bet $0.1 that your server doesn't set the `content-type` to **application/json**-. — OneOfOne, Aug 28 '13 at 07:50
@OneOfOne if it did I dont know how to check. Especially since I have a metric s#*t ton of ajax in the exact same format as above. So I know json is working at least in the rest of things — JDillon522, Aug 28 '13 at 07:53

score 1 · Accepted Answer · answered Aug 28 '13 at 07:48

1

Try using the .fail() callback and see if it returns, also make sure the server sends the json header properly or $.post will fail.

$(document).on('submit', '.edit_user', function(){
    console.log('submit');
    var jqXHR = $.post($(this).attr('action'), $(this).serialize(),
        function(data){
            console.log("data");
            console.log(data);
            $('#edit_first_name').val(data['first_name']);
        },
        "json"
    );
    jqXHR.fail(function(jqXHR, textStatus, errorThrown) {
        console.log('error', textStatus, errorThrown);
    });
    return false;
});

If you're using PHP, make sure you have the correct header printed before any other output.

<?php
    header('Content-type: application/json');
    ....code...
    echo json_encode(some_array);

answered Aug 28 '13 at 07:48

OneOfOne

95,033
20
184
185

Well, first off, I had forgotten about the `echo json_encode`. I needed that regardless of this problem but it didnt fix it. I tried your suggestion and it gave me this error: `error parsererror SyntaxError {}` However, it doesnt say where the error is. It just references the line where it was thrown. – JDillon522 Aug 28 '13 at 08:00
I guess there's something wrong with your json, edit your question and paste your json. – OneOfOne Aug 28 '13 at 08:01
Ok, so I'm not sure where the whole problem was. I think it was a combination of a lot of small things that I was overlooking. I had forgotten about the `header('Content-type: application/json');` and the `echo json_encode(some_array);`. I really appreciate your help – JDillon522 Aug 28 '13 at 08:18

score 0 · Answer 2 · answered Aug 28 '13 at 07:43

0

The function you have defined is for the success callback. Make sure your current post is returning a successful response from the server. Or convert the .post() call to a .ajax() call and define the failure calback

answered Aug 28 '13 at 07:43

DGS

6,015
1
21
37

score 0 · Answer 3 · answered Aug 28 '13 at 07:50

Use this,

$(document).on('submit', '.edit_user', function(e){
e.preventDefault();
console.log('submit');
$.post
(
  $(this).attr('action'),
  $(this).serialize(),
  function(data){
    console.log("data");
    console.log(data);
    $('#edit_first_name').val(data['first_name']);
  },
  "json"
);
return false;
});

Use preventDefault function to prevent default behaviour of submit. Also .edit_user should be the class of the form element

score -1 · Answer 4 · answered Aug 28 '13 at 07:41

-1

Does your javascript logger return you something ?

answered Aug 28 '13 at 07:41

Nox

236
1
9

Ajax is failing

4 Answers4