Calling function after .load (Jquery)

by

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
    });
});

More Related Contents:

  1. Load content of a div on another page
  2. jQuery load first 3 elements, click “load more” to display next 5 elements
  3. Fade in each element – one after another
  4. Can I load external stylesheets on request?
  5. jQuery load external site page
  6. jQuery: Check if image exists
  7. jQuery Plugin: Adding Callback functionality
  8. How do I load an url in iframe with Jquery
  9. Load website into DIV
  10. Extending an existing jQuery function
  11. jquery load() strips script tags – workaround?
  12. jquery callback after all images in dom are loaded?
  13. Cannot load an external page with jQuery.load into a div in my page
  14. $(this) doesn’t work in a function
  15. jquery trigger function when element is in viewport
  16. Execute jQuery function after another function completes
  17. jquery – is not a function error
  18. jquery how to use multiple ajax calls one after the end of the other
  19. jquery – difference between $.functionName and $.fn.FunctionName
  20. Jquery Multiple load in a DIV
  21. How to load external html into a div?
  22. JQuery .load() callback function
  23. How to add click event to a iframe with JQuery
  24. is there an api in jqgrid to add advanced filters to post data?
  25. Modify HTTP Headers for a JSONP request
  26. How do I get the entire page’s HTML with jQuery?
  27. jQuery :contains selector to search for multiple strings
  28. Twitter Bootstrap Collapse plugin Direction—Horizontal instead of Vertical
  29. How can I hide divs if they are empty?
  30. Jquery validation not working with ckeditor

Leave a Comment