Executing code after jquery call back

Question

Lets say I have the following js code

$(function() {
   $('#some_id').load('myfile.html', function() {
      alert('Call back called');
   });

  alert('You should alert second');
  // more javascript code .........

});

For some reason, alert('Call back called'); is the last thing that gets alerted to me. I thought that js code executes in the order of the file. Is there a way to make alert('Call back called'); go first before all my other functions.

Looking at my simple code snippet one would suggest why not put alert('You should alert second'); in the function call back, unfortunately I am inheriting a code base that is really big and jamming all those function calls in my callback wont be feasible

Welcome to the wonderful world of async! You can't do that. — SLaks
– SLaks, Commented Aug 27, 2013 at 14:58
alert('You should alert second'); is called immediately when the js is initialized, where the alert('Call back called') will be called only after the .load is called (look into callbacks). — matth
– matth, Commented Aug 27, 2013 at 14:59
the callback function of the load() function is thought exactly for this purpose, you should put the code there, there aren't reasons to don't do that. — Fez Vrasta
– Fez Vrasta, Commented Aug 27, 2013 at 15:00
You could use .ajax() instead of .load() and set async: false like explained here: stackoverflow.com/questions/133310/… — Ron van der Heijden
– Ron van der Heijden, Commented Aug 27, 2013 at 15:03

Brad M · Accepted Answer · 2013-08-27 14:58:37Z

2

.load() is an asynchronous method, and the anonymous function you passed to it as a parameter is executed ONLY when the asynchronous method finishes executing.

answered Aug 27, 2013 at 14:58

Brad M

7,9101 gold badge25 silver badges40 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Mark Erasmus · Accepted Answer · 2013-08-27 15:04:01Z

1

"I thought that js code executes in the order of the file." It does, and that's what's happening here. But because the .load() callback function is, well, a callback (i.e. only fires once the asynchronous operations is complete) alert('Call back called'); will only fire when it's invoke at some point in the future.

answered Aug 27, 2013 at 15:04

Mark Erasmus

2,4257 gold badges26 silver badges37 bronze badges

1 Comment

user400654 Over a year ago

Here's a basic demo of the concept you're explaining pastebin.com/1zSt0vH2

Sunny R Gupta · Accepted Answer · 2013-08-27 15:07:35Z

1

As pointed by others, load is an async method, hence you need to use something like a synchronous AJAX call. Use it this way:

$.ajax({
     url:    'myfile.html',
     async:   false
     success: function(result) {
                  alert('Call back called');
              }
});

alert('You should alert second');

answered Aug 27, 2013 at 15:07

Sunny R Gupta

5,1461 gold badge33 silver badges41 bronze badges

2 Comments

supertopi Over a year ago

I agree. If you downvote something please leave a comment. This seems like a good way to replace the asynchronic method, worth a try.

tawheed Over a year ago

I guess the down vote because it did not work. I tried but had no luck with your solution.

frhd · Accepted Answer · 2013-08-27 16:58:00Z

1

Using pure javascript, just add a function with a callback argument for the stuff coming in the second alert() area:

$(function() {

   function someCode (callback) {
     $('#some_id').load('myfile.html', function() {
       alert('Call back called');
       // add parameters, if you like
       callback();
     });
   }

   function someMoreCode() {
     alert('You should alert second');
     // more javascript code .........
   }

   // And Finally...
   someCode(someMoreCode);

});

edited Aug 27, 2013 at 16:58

answered Aug 27, 2013 at 15:49

frhd

10.4k5 gold badges27 silver badges43 bronze badges

3 Comments

user1636522 Over a year ago

Nice, but you should call callback inside load's callback. Moreover, you don't have to wrap the load call inside a function, just declare callback somewhere and use it.

frhd Over a year ago

1. Why? 2. Example? It would be helpful if you explained your points beyond stating what should be done and what not. I actually liked your solution, but wanted to give one which works without jQuery. So why vote down?

user1636522 Over a year ago

Your code produces exactly the same result than his code. That's it.

score 1 · Accepted Answer · 2013-08-29 08:00:11Z

1

You could use the Deferred Object which deals with asynchronous calls for you. Doing so your code will be executed in the reading order, no matter when the response is sent back :

$(function() {
    var jqxhr = $.get('myfile.html', function(data) {
        $('#some_id').html(data);
        alert('Call back called');
    });
    jqxhr.done(function() { 
        alert('You will alert second');
    });
});

edited Aug 29, 2013 at 8:00

answered Aug 27, 2013 at 15:24

user1636522

Comments

Maess · Accepted Answer · 2013-08-27 15:00:13Z

0

If you want alert('You should alert second'); to happen second you need to call it from within your callback function:

$(function() {
   $('#some_id').load('myfile.html', function() {
      alert('Call back called');
      alert('You should alert second');
   });

});

answered Aug 27, 2013 at 15:00

Maess

4,16623 silver badges29 bronze badges

Collectives™ on Stack Overflow

Executing code after jquery call back

6 Answers 6

Comments

1 Comment

2 Comments

3 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

Comments

1 Comment

2 Comments

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related