Winnipeg Photographer


How to use jQuery to embed external content into a page

Have you ever wanted to load some content from another website or internal page into your page on the fly? Well thanks to the magic of jQuery this is actually easier than it seems. This article will go over displaying a part of a separate page in your current page. Now at first you might think “why would I want to do this?”. Well if you like most programmers you hate to write the same code over and over. If you can re-use something wouldn’t you want to?

This project will require two HMTL files and a file dedicated to the jQuery. Let’s look at the HTML pages to start with.

xhtml (main page)

image

As you can see this page really doesn’t have a whole lot going on it. It has a container and a hyperlink. When the person clicks the hyperlink I want the names to be displayed.

xhtml (2nd page)

image

This is a small page but it has everything I need! There is an un-ordered list of names. I don’t want to import any other content other then the element call “friends”.

Now that we looked at the xhtml stuff let’s look at the jQuery. It’s amazing how little programming it takes to get something this powerful!

image

Let’s go over the code line by line:

  1. Line 1 – Load jQuery and wait for page to be ready.
  2. Line 2 – If a Hyperlink is clicked run some code.
  3. Line 3 – Insert a div with an id into the page. Go to the page “jquery10_load.html and load the content in the “#friends” element. We need to create a “Callback Function” so we can apply some effects once the data has been loaded.
  4. Take “#info” and hide it. We then want to append the information to “#container” in xhtml main page.

So once the javascript has done it’s thing the main page should look something similar to this:

*NOTE* – The inserted HTML will only show if you use a tool like Firebug. I used Firebug in the last screenshot.

End Result

image


Leave a Reply