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:
|
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(); } |
HTML
|
1 2 3 4 5 |
<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" /> |
|
1 |
Recommended WordPress Themes Store
