Calling function after .load (Jquery)

Question

Having a little difficulty getting a function to call after a .load:

$(function(){
    $(\'a.pageFetcher\').click(function(){
        $(\'#main\').load($(thi         


        

Answer 1

Your first point of reference should always be the jQuery API, here's what the API page on .load() tells you about the parameters the load function takes:

.load( handler(eventObject) )

.load( [eventData], handler(eventObject) )

In this case, you're passing $(this).attr('rel') as the eventData, so you add your event handler after that:

$('#main').load($(this).attr('rel'), onNewMainContent);

In your second block of code, you're telling jQuery to execute it when your body loads, not when you load more into your site. You need to execute it specifically, so change the start of that function to:

function onNewMainContent {  // new
  var $container = $('#container');
  $container.imagesLoaded(function(){
    $container.masonry({
      itemSelector: '.box',
  // ...

Answer 2

To run some code after a .load() finishes, you will need to put the code in a completion function for the .load(). The load operation is asynchronous so the load function starts the loading of the content and then immediately returns and your JS execution continues (before the load has completed). So, if you're trying to operate on the newly loaded content, it won't be there yet.

As your code is written now, you have two blocks of code that both run when the original HTML document is ready. The first block starts a .load() operation. The second operation expects the .load() to be done already, but it has not yet completed so the content from the .load() operation is not yet available.

That's why .load() takes a completion function as an argument. That's a function that will be called when the load has completed. See the relevant jQuery .load() doc for more info. Here's what your code would look like with a completion function.

$(function(){
    $('a.pageFetcher').click(function(){
        $('#main').load($(this).attr('rel'), function() {
            // put the code here that you want to run when the .load() 
            // has completed and the content is available
            // Or, you can call a function from here
        });
        // the .load() operation has not completed here yet
        // it has just been started
    });
});

Answer 3

you can also use bootstrap loading button to trigger the .load() and the function after .load()

HTML

<button type="button" class="btn btn-primary btn-lg" id="refresh" data-loading-text="<i class='fa fa-spinner fa-spin '></i>Processing">Reload Emails</button>

JQUERY

 $("#refresh").click(function() {

    var $this = $(this);
    $this.button('loading');

    $("#container").load("/showemails.aspx?page=1 #container", function() {
         $("#refresh").button('reset');
      });

     return false;
  });