Jquery DOM events called after events following it are executed

Question

I am facing a very weird issue in chrome.

My code is

$('#import').text("Importing...");
$('#import img').removeClass("hidden");

Server.postService("tests", row_datas, function(data) {
    // some stuff here
});

The text and the hidden class are being removed after the post action has been executed. The code is working fine in firefox.

Providing a demo at a place like http://jsfiddle.net really helps to hone in on the problem. Am I right in guessing that `Server.postService()` is a server-side method? What does the browser actually get in the source? — Jared Farrish, Dec 12 '12 at 04:40

score 1 · Accepted Answer · answered Apr 23 '13 at 06:53

1

The only thing needed was

Server.async = true

before the server call.

answered Apr 23 '13 at 06:53

vipulsharma

1,242
1
8
16

score 0 · Answer 2 · edited May 23 '17 at 10:34

Asynchronous functions fire in order of appearance but return in order of when they finish. It would be odd for those simple text and removeClass methods to return more slowly than whatever you're doing with your Server object, but I suppose it's possible. If you need the first two lines to happen before the postService, you might try jQuery's deferred.promise. Here's a fiddle demonstrating the potential, and some code to inspect:

function firstThing (){
    var dfd = new jQuery.Deferred();
    $('#import').text("Importing...");    
    $('#import img').removeClass("hidden");
    dfd.resolve();
}

$.when( firstThing() ).then(
    function() {
        Server.postService("tests", row_datas, function(data) {
            // some stuff here
        });
    }
)

As a side note, the logic of your code is problematic in that by setting the text of #import, whatever img had the hidden class won't be there anymore, but that might be beside the point.

Update

Noticing your response to my comment asking about your use of ajax, I would suggest you read about the async option and see how what you're doing might or might not be blocking events.

I would also recommend reading about jQuery ajax callbacks, particularly error, success, and complete (now, with jQuery 1.8+, fail, done, and always).

Thanks for the reply crowjonah. Thanks for the sidenote but its only sample and i have not done anything like this in actual code. — vipulsharma, Dec 12 '12 at 07:52

Jquery DOM events called after events following it are executed

2 Answers2