jQuery Load – Making it Work


I still remember when I first came across jQuery’s “load” function. It blew my mind. Loading the information dynamically without refreshing the page ?!? AWESOME!

But with great power comes … great annoyances. Here are a few common problems that happen when you’re working with jQuery’s load function:

Page Doesn’t Load


So this is the equivalent to you not plugging in the computer. If the page just isn’t loading, make sure the path to the page is accurate. Despite the obviousness of this step, when you’re working with multiple pages in multiple folders, it’s easy to forget to add the appropriate folder before the page name.

So you’ve confirmed that the page URL is accurate. Now check the syntax for jQuery. Did you remember the dollar sign, the pound or period sign, and ‘.load’ portion? Double-check.

Third, confirm that the page you’re loading dynamically is actually uploaded to the server. Yep. Simple, I know, but easy to forget.

Finally, make sure you’re loading a page within your own website. I usually have problems using absolute paths on the jQuery load function because you can’t load dynamically from another website using jQuery.

Div Doesn’t Load

$('#holder').load('pagename.php #divName');

If you’re trying to load just part of the page dynamically, you’ll need to add the Div ID inside the quotes.

First, check that the Div ID that you’re adding is the same as the one of the page.¬†Capitalization¬†matters!

Second, there should be only one space in-between the page name and the Div ID. Additionally, the Div ID needs to come before you close the quotes.

Third, make sure you are adding the appropriate pound or period before the Div Name. I would ALWAYS use Div ID’s in jQuery loading, but regardless of which one you use, make sure you add the right symbol.

jQuery Doesn’t Work on the Newly Loaded Page

$('#holder').load('pagename.php #divName',
            function(){  // add stuff here

This is the trickiest one. If you’re loading a new page and that new page has, say, a button on it with a jQuery effect, you must bind the effect to the button AFTER the page is loaded.

For example, you have a button CLICK HERE on a page named ‘pagename.php’. The CLICK HERE button is supposed to do a javascript alert. You load ‘pagename.php’ into your current page using jQuery.

Your coding looks like this:

$('#holder').load('pagename.php #divName');
$('#clickhereButton').click({ alert ('Hello!!!'); });

The problem is that when the page was loaded, there was no ‘clickhereButton’ to bind the ‘click’ function to. So the coding is lost in outerspace. It doesn’t do anything.

Here’s how to make it work:

$('#holder').load('pagename.php #divName', function(){
$('#clickhereButton').click({ alert ('Hello!!!'); });

Notice we load the new page (pagename.php) and then we have a function occur that binds the ‘click’ function to the newly loaded button. Now the click function can find its button and connect – and now it will work.

Bottom Line: ANY jQuery that you want to work on the newly loaded page must be applied AFTER that page is loaded.