How To: Create dynamic Content Loading using Ajax and jQuery

Author: Zeeshan Rasool | May 18, 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]

Zeeshan Rasool is the founder and editor of this blog. Beside this, he is an experienced PHP web developer and freelancer. He loves to create best and interactive web apps. You can follow him at twitter @99_Points and facebook OR drop an email at 99points.info@gmail.com

How To: Create dynamic Content Loading using Ajax and jQuery

Table Structure:

jQuery Code

HTML

Categories

Popular post

Friends

How To: Create dynamic Content Loading using Ajax and jQuery

Table Structure:

jQuery Code

HTML

Few More Brilliant Posts !

Categories

Popular post

Friends