views:

1316

answers:

2

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?

+3  A: 

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

stefita
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
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
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
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
@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
+1  A: 

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.

Pawel Krakowiak
I see, so $(.ajax) calls can be nested. Sounds good, I'll try that and see how it works out.
Chris