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.
[ad#ad-4]
Table Structure:
|
1 2 3 4 5 6 7 |
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
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
$(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
|
1 2 3 4 5 6 7 |
<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> |
[ad#co-2]
Author of 99Points
Zeeshan Rasool is an experienced PHP Web Developer and founder at 99Points.
Expert in Codeigniter (MVC), WordPress, JSON, jQuery & HTML5
