Dynamically Load Content Using jQuery

One thing that we have started to use a lot, especially with bigger database driven sites is the jQuery load() selector. This handy little function makes it really easy to dynamically load content when a user performs an action. Meaning that the content will not be visible/present when the page loads and jQuery will load it from an external URL, this can reduce server load and increase page loading time.

In this example we are going to use a simple static list as the content to be loaded at the click of a button. First is the jQuery:

$(document).ready(function() {
	// On the click of the submit button, start the function
	$("#loadBtn").click(function() {
		// Append the loading image to the div that the content is being loaded within
		$("#content").append('<div class="loading" style="display:block;"></div>');
		// Load the file within the content div
		$(this).load("data.html", function(){
			// Hide the loading image once the content has been loaded
			$(".loading", this).hide();

And this is our html:

<input type="submit" id="loadBtn" value="Click Me!" />
<div id="content"></div>

It is a very simple and affective method… Even for beginners!

» Demo Here

» Download Here

Free Graphics, Icons, Tutorials
Free Graphics Free Christmas Vector Icon Graphics Pack 2017Free Fitness Vector Icons Graphics PackFree Camping Vector Graphics PackFree Summer Graphics PackFree File Icon PackFree Fast Food Vector Graphics
Sharing is caring...
Like & Follow
Share the love, share this page! Facebook Twitter Digg Reddit LinkedIn Pinterest Email
Close [X]
The Web Taylor
1000 Lakeside North Harbour Portsmouth, Hampshire PO6 3EN
02392 123358