Ajax jquery synchronous callback success

Question

I have this function that makes an ajax call. I'm describing the problem in the last chunk of code comments.

    function doop(){
            var that = this;
            var theold = "theold";
            var thenew = "thenew";

            $.ajax({
                    url: 'doop.php',
                    type: 'POST',
                    data: 'before=' + theold + '&after=' + thenew,
                    success: function(resp) {
                            if(resp == 1) {
                                    $(that).siblings('.theold').html(thenew);
                            }
                    }
            });

            // I have some code here (out of the ajax) that **further** changes 
            // the .theold's html beyond what it was changed inside ajax success
            // but the change depends on whether the resp (inside the success 
            // function) returned 1 or not, so this code out here depends on the ajax
            // so it looks like I have to turn this ajax call into a sync ajax

            return false;
    }

Based on the problem as described in the code comments, what changes are best for this situation?

score 15 · Accepted Answer · answered Oct 15 '09 at 14:14

15

You need to set async: false for synchronous requests like this:

function doop(){
        var that = this;
        var theold = $(this).siblings('.theold').html();
        var thenew = $(this).siblings('.thenew').val();

        $.ajax({
                async: false,
                url: 'doop.php',
                type: 'POST',
                data: 'before=' + theold + '&after=' + thenew,
                success: function(resp) {
                        if(resp == 1) {
                                $(that).siblings('.theold').html(thenew);
                        }
                }
        });

        // some other code

        return false;
}

see here for details

answered Oct 15 '09 at 14:14

stefita

1,785
2
20
35

I keep reading that setting `async: false` is bad, and that a `callback` is better. But I doubt it's as simple as that. Which do you recommend based on my updated question? – Chris Oct 15 '09 at 14:21
3

hmm, actually the function you declare for the success property is the callback function. By the way I just saw that you are comparing your result to an integer, but I pretty sure you are getting text by default, so it should be `resp == "1"`. – stefita Oct 15 '09 at 14:40
2

btw. you could define your callback function somewhere outside the ajax request. May be what you saw was exactly that - a function called callback or so. – stefita Oct 15 '09 at 14:42
Actually, you're right, I am getting text, 1 is just an example. I try to simplify my code when I post it here to make it friendlier for people to go through ;) – Chris Oct 15 '09 at 14:43
@stefita: I see, so instead of `success: function(resp)` he might have had: `success: callback` and defined callback somewhere outside the ajax. Sounds good, I think I should be on the right track with those answers then. Thanks for the help. – Chris Oct 15 '09 at 14:46

score 1 · Answer 2 · answered Oct 15 '09 at 14:17

1

Either set the Ajax call to synchronous as stefita pointed out, or just move your code into the success callback. Why can't you do this? Even if it's another Ajax call it still can be done - you can nest them. With the information given by you so far (I can't see the problematic code, nor I have enough domain knowledge about your project) I don't see a problem, really.

answered Oct 15 '09 at 14:17

Pawel Krakowiak

9,940
3
37
55

I see, so $(.ajax) calls can be nested. Sounds good, I'll try that and see how it works out. – Chris Oct 15 '09 at 14:24

score 0 · Answer 3 · answered Apr 18 '13 at 02:55

I prefer to use callback to do the job because it achieves exactly the same result without actually making it synchronous. I use success:callback and then pass in the callback as a parameter.

 function getData(callback) {
      $.ajax({
          url: 'register/getData',
          data: "",
          dataType: 'json',
          success: callback
      });
  }

I then call this function like this:

  getData(function(data){
    console.log(data); //do something 
  });

Ajax jquery synchronous callback success

3 Answers3

Linked