Load External Content
Prev Chapter 9. Exercises Next

Load External Content

Open the file /exercises/index.html in your browser. Use the file /exercises/js/load.js. Your task is to load the content of a blog item when a user clicks on the title of the item.

  1. Create a target div after the headline for each blog post.

  2. Use the $.fn.load method to load /exercises/data/blog.html; use a selector to indicate which elements you need from the file for the given post, and load them into the target div.

Note that each blog headline in index.html includes a link to the post. You'll need to leverage the href of that link to get the proper content from blog.html. Once you have the href, here's one way to process it into an ID:

var href = 'blog.html#post1';
var tempArray = href.split('#');
var id = tempArray[1];

Remember to make liberal use of console.log to make sure you're on the right path!


Prev Up Next
Create a Slideshow Home Load Content Using JSON