How To: Create dynamic Content Loading using Ajax and jQuery

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.

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();

}

HTML

<input id="1" class="super red button" name="test" type="button" value="Home" />

<input id="2" class="super buy button" name="test" type="button" value="About" />

<input id="3" class="super green button" name="test" type="button" value="Services" />

Table Structure:

jQuery Code

HTML

Few More Brilliant Posts !