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`)
)

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

[ad#co-1]

HTML

[ad#co-2]