Load External Content - Exercise

Contact Us or call 1-877-932-8228
Load External Content - Exercise

Load External Content

Duration: 20 to 30 minutes.

Open ClassFiles\jqy-ajax\Exercises\index.html in your browser. Edit the file js\load.js. Your task is to load the content of a blog item when a user clicks on the title of the item. The current behavior is that clicking the link takes you from this page to the blog page, but we would prefer to stay on this page and use Ajax to retrieve that content.

  1. Create a target div after the headline for each blog post and store a reference to it on the headline element. You can either use $.fn.data, or create a closure on a local variable when you define the click handler in the next step. (It will be easiest to use the $.fn.each function to do this step.)
  2. Bind a click event to the headline that will use the $.fn.load method to load the appropriate content from exercises/data/blog.html into the target div. Don't forget to prevent the default action of the click event.

Note that each blog headline in the page 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 that you can use as a selector in $.fn.load:

var href = 'data/blog.html#post1';
var url = href.replace('#', ' #');

As a challenge, try to:

  1. use event delegating so that there is only one click handler
  2. merge this with the sliding code from the effects chapter (slide the Ajax content up and down, as opposed to the excerpts).


$(document).ready(function() {
	$('#blog>ul>li>h3:first-child').each(function() {
		// create the div
		var $target = $("<div/>")
		// now that the $target div exists, we can write the click handler
		// that will load it - the $target variable is the closure
		$(this).click(function(e) {
				$target.load(e.target.href.replace('#', ' #'));


For each headline in the blog, we create an empty target, insert it after the headline, and then establish a click handler.

The click handler finds the hyperlink within the headline, modifies the url to insert a space before the # (our page was set up specifically for this purpose -- the original version would take the user to that page, scrolled to that anchor. The anchor is inside a div with the same value as its id, so jQuery can use the same # to pull out just that div's content.

Because of the hyperlink in the original code, we prevent the default behavior to avoid actually going to the blog page now that we can retrieve it via Ajax. (Note that even though we caught the event in the hyperlink's container tag, the entire bubbling process takes place before the default behavior, and it doesn't matter which element we actually use to invoke preventDefault).

Challenge Solution:

$(document).ready(function() {
	var $blogTitles = $('#blog>ul>li>h3:first-child');
	$blogTitles.each(function() {
		$.data(this, 'content',  $('<div class="ajaxContent" style="display:none" />').insertAfter(this));
	 $('#blog>ul').delegate('li>h3:first-child', 'click', function(e) {
			var $content = $.data(this, 'content');
				$(e.target).attr('href').replace('#', ' #'),
				function() {
					$content.slideDown(500, 'linear');
					$content.parent().siblings().find('div.ajaxContent:visible').slideUp(500, 'linear');

We set up a delegating on the a click handler on the unordered list within the blog section. The subquery then finds the first h3 child of each list item. Essentially, we split the previous query into two sections.

To handle the sliding, we provided a callback function to $.fn.load, which slides down the content and slides up sibling content.