Grabbing Content from Other Pages with Ajax and jQuery
Sometimes it is useful to grab content from one of your other pages and use it on another. This tutorial will go over how to pull in the other content, and use selectors to get what you want.
What we’re building
Essentially we will be building two pages. One with static HTML. The other with jQuery to steal the content from there and display it on it’s own page. Pretty cool stuff. It is just standard Ajax, but with one cool feature, it allows you to select what you pull from the site using selectors. If you haven’t used Ajax with jQuery before I recommend you checking out the Beginners Guide to Using Ajax with jQuery.
The HTML page
First we’ll create a simple HTML page. I’m just going to use a header and an unordered list, just to show you can pick and choose what you want.
Here is the HTML:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> <meta http-equiv="Content-type" content="text/html; charset=utf-8" /> <title>Content Page</title> </head> <body> <h1 id="title">This is a title</h1> <ul> <li>Web</li> <li>jQuery</li> <li>Ajax</li> <li>HTML</li> </ul> </body> </html> |
Not much too it huh. This isn’t going to be the page that displays, so really you just have to make sure it has the content you want in here.
The jQuery / Ajax Page
This page is pretty bare as well. We’re just going to have a div that will be are holder, and the jQuery to pull the content from the other page.
Here is the page:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> <meta http-equiv="Content-type" content="text/html; charset=utf-8" /> <title>Ajax and Jquery: Remote Pages</title> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript" charset="utf-8"> $(document).ready(function(){ $('#list').load("Content.html ul"); }); </script> </head> <body> <h2>Here is the list from the other page:</h2> <div id="list"></div> </body> </html> |
Basically the load() function does all the work. You pass in the url of the page, and the selector you want to get and it gets the HTML and puts it in the selector that is calling the load function. Just a note, you might run into some caching issues if you have dynamic content, so it might be a good idea to add some unique id at the end of the url; perhaps a random number that you generate. e.g. (htmlPage.html?cacheBuster=1231321)
Server Side Pages
This also handles server side pages. e.g.(PHP, ASP, etc) The beauty of the load function is it has extra arguments you can pass in. It has 3 in total
- The page URL / selector
- Any Post Data you want to pass to the URL
- A Callback function.
So if you pass an object into the second parameter it will send a post variable with those values.
1 2 3 4 5 | $('#selector').load("content.html #selector", {data:value}, function(){ alert("Callback Function"); }); |
For example, say we want to get the navigation from a certain page, and index.php loads the navigation based on what a certain post variable might be. This would be a prime example of when you might use the load function over other Ajax functions in jQuery. The ability to use a selector would help a great deal if you needed to pull a needle from a haystack of content.
Conclusion
More than likely this function isn’t going to be used everyday, but it’s good to keep in mind for those special occasions.