AJAX Example – Loading Content Dynamically

My sister has a project on creating a simple website, and thus she needs my help. Their website was about Philippine actors and actresses. One of the features they have is to display biographies of actors / actresses.

Me being lazy, thought that I could make a page that contains actors / actresses, then when they click on a link, it will load the biography together with the picture on the same page, so that I would not have to design another page. All I need is to create a content, then load it on that page.

So I immediately created the links. Below the links, I created a div with class “bio”. The links class is “act-menu”.

Using jQuery, we can bind the click event on the links and load the content via AJAX. However, the link must be a natural link so that when javascript is disabled, it will just go to the said link. Here is the structure of html.

	<div class="entry">

		<div class="act-menu" >
			<a href="bio-angel.html" >Angel Locsin</a>
			<a href="bio-kim.html" >Kim Chiu</a>
			<a href="bio-nadine.html" >Nadine Samonte</a>
			<a href="bio-sarah.html" >Sarah Geronimo</a>
			<a href="bio-anne.html" >Anne Curtis</a>

		</div>
		<div class="bio" >
			<span>Loading bio....</span>
		</div>
		<div class="clear" ></div>
	</div>

As you can see, it is just a simple link, however, we can turn it into a cool page using AJAX. I also put span “Loading bio…” so that it appear will while waiting for the content to appear. Now here is the script.

$(function() {
	$(".act-menu a").bind("click", function(e) {
		$(".bio").html("<span>Loading bio....</span>");
		e.preventDefault();
		$.get(this.href, function(data) {
			$(".bio").html(data);
		});
	});
});

Here is the explanation: I bind the click event of the links to a function that does the following.

(1) Put the text “Loading bio….” to the bio div so that it will appear while waiting for the content to load.

(2) Prevent the default event (which is to follow the link) so that the page will not go to the link, and

(3) Call get function of jQuery passing the href of the link, then a function that will load the returned data to the innerHTML of bio div.

However, when the page is first visited, it will just display the text “Loading bio…” and will display the content only when you click the link. What if we will load the first content from the first link?

In jQuery, you can get the first matched element’s attribute by using the attr() directly even if there are other elements that matches. You can use this: $(“.the-class”).attr(“href”) to get the attribute of the first matched element. So here is our final code.

$(function() {
	$.get($(".act-menu a").attr("href"), function(data) {
		$(".bio").html(data);
	});


	$(".act-menu a").bind("click", function(e) {
		$(".bio").html("<span>Loading bio....</span>");
		e.preventDefault();
		$.get(this.href, function(data) {
			$(".bio").html(data);
		});
	});
});

So, when the page is ready, we will load the first content of the first link.