.load() with success function

Question

I know this has been asked many times before...

I have a simple ('#Div').load(file.php?id='+id+'&page='+page)

The on click event acts as follows

function recp(id) {  
  var user = $('#page').attr('page'); 
  $("#button").hide()
  $("#loading").html('<img src="images/loader.gif">');
  $('#div').load('file.php?id='+id+'&page='+page); 
  $("#loading").empty();
  $("#button1").show()
}

I have a similar process on my site with ajax post, works very nicely, but I can't seem to get this to work with .load().

Would need a bit of advice. Cheers.

Answer 1

The problem is that load is asynchronous. The function call returns before the AJAX request is complete. If you have code that needs to be executed after the request is complete, you need to use the complete callback specified in the API:

$('#div').load('file.php?id='+id+'&page='+page, function(){
    $("#loading").empty();
    $("#button1").show();
});