jQuery.load() doesn't work with a defined function as a callback?

Question

Can someone explain to me why I was running across a race condition with this block of code:

$("#someid").load( "home.php", callback_function );
function callback_function()
{
    //some jQuery.get() goes here
}

and not this block of code:

$("#someid").load( "home.php", function(){ callback_function(); } );
function callback_function()
{
    //some jQuery.get() goes here
}

The race condition in the first block of code was that processing in callback_function() would not execute after the load was done, but seemed to run asynchronously and would screw up some UI stuff (this UI stuff was dependent on the jQuery.get() returning). I'm new to jQuery/JavaScript and was wondering why I need the explicit "function(){ callback_function(); }". Thanks!

Beware that code samples you provided is wrong. I assume this is only case in code you posted here and you not using it as is. Better to add `function` in front of `callback_function` otherwise it's a call not a definition. — Juicy Scripter, Jan 18 '12 at 04:31
Have you tried to define a `callback_function` before call to `load`? — Juicy Scripter, Jan 18 '12 at 04:33

adrian · Answer 1 · 2012-01-18T05:28:09.163

UPDATE

It looks like your question is about making the call async versus sync. I would typically refactor my code if I needed an ajax call to be async but you should be able to get around this by using the base jQuery ajax.

$.ajax({
  // will not work for jsonp or cross domain requests, will force success to run before
  // other code
  async: false,
  url: "load.php",
  dataType: "html",
  success: function(response) {
    $("#some_id").html(response);
  }
});

It looks like your callback function isn't declared as a function before it's being used.

Give this a shot:

$("#someid").load( "home.php", callback_function );
function callback_function()
{
    //some jQuery.get() goes here
}

I would recommend using JSLint (JSLint.com) as it will check your syntax and look for these errors.

Sorry about that, I actually do define them. Post is edited. Thanks. — norway-firemen, Jan 18 '12 at 04:32

score 0 · Accepted Answer · edited May 23 '17 at 10:24

0

check out send a jquery callback function inside a variable

declare the function like

function callback_function(){
  //some jQuery.get() goes here
}

or

var callback_function = function(){
  //some jQuery.get() goes here
}

then try this

$("#someid").load( "home.php",null, callback_function );

pass the callback parameter as 3rd argument to avoid confusion to the jquery load API(sorry not getting exact word :)).

see load documentation,

edited May 23 '17 at 10:24

Community

1
1

answered Jan 18 '12 at 04:39

dku.rajkumar

18,414
7
41
58

What exactly do you mean by "compiler" – Andrew Whitaker Jan 18 '12 at 04:41
I am not getting the exact word to express it :) – dku.rajkumar Jan 18 '12 at 04:43

score 0 · Answer 3 · answered Jan 18 '12 at 04:45

Javascript or any scripting language works by executing code lexically. By that I mean it does not have a main method of sort.

So, in the first code snippet, the load function is being called and is assigned a function that hasn't been declared yet. In the second code snippet the function is being in-lined to the method load, therefore it doesn't fail.

If you first define the function and then call load, your first snippet should work as well.

function callback_function(){

}

$("#someid).load("home.php", callback_function);

jQuery.load() doesn't work with a defined function as a callback?

3 Answers3

Linked