How To: Create dynamic Content Loading using Ajax and jQuery

Author: Zeeshan Rasool | Last updated on July 27th, 2010

AJAX, CSS, JQuery, PHP, Web Development

Create simple ajax base page loading using jQuery fadeIn effects. Put some awesome styles to your web pages using ajax base content loading. Demo and code available.

[ad#ad-4]

Table Structure:

CREATE TABLE `data` (
  `id` int(11) NOT NULL auto_increment,
  `full_text` text NOT NULL,
  `page_name` varchar(50) NOT NULL,
  `heading` varchar(50) NOT NULL,
  PRIMARY KEY  (`id`)
)

CREATE TABLE `data` (

`id` int(11) NOT NULL auto_increment,

`full_text` text NOT NULL,

`page_name` varchar(50) NOT NULL,

`heading` varchar(50) NOT NULL,

PRIMARY KEY (`id`)

)

jQuery Code

$(document).ready(function(){	
		$('.super').click(function(){
			$('#container').fadeOut();
			var a = $(this).attr('id');
			$.post("ajax_page.php?id="+a, {
			}, function(response){
				//$('#container').html(unescape(response));
				///$('#container').fadeIn();
				setTimeout("finishAjax('container', '"+escape(response)+"')", 400);
			});
		});	
	});	
	function finishAjax(id, response){
	  $('#'+id).html(unescape(response));
	  $('#'+id).fadeIn();
	}

$(document).ready(function(){

$('.super').click(function(){

$('#container').fadeOut();

var a = $(this).attr('id');

$.post("ajax_page.php?id="+a, {

}, function(response){

//$('#container').html(unescape(response));

///$('#container').fadeIn();

setTimeout("finishAjax('container', '"+escape(response)+"')", 400);

});

function finishAjax(id, response){

$('#'+id).html(unescape(response));

$('#'+id).fadeIn();

}

[ad#co-1]

HTML

<input type="button" name="test" class="super red button" id="1" value="Home" />
<br />
<input type="button" name="test" class="super buy button" id="2" value="About" />
<br />
<input type="button" name="test" class="super green button" id="3" value="Services" />

<div id="container"></div>

<br />

<br />

[ad#co-2]

Recommended WordPress Themes Store

If you enjoyed this post, please consider leaving a comment below or subscribing to the RSS feed to have future articles delivered to your feed reader. You can also follow us on Facebook or Twitter @99Points

This awesome post has been created by 99Points editor's team. You can follow our updates on Twitter and facebook, OR drop an email at 99points.info@gmail.com