javascript - Append DIV content using AJAX - Previous/Next -


so i'm trying append content html document div i've loaded content (from same file) using ajax.

i'm trying have when click "previous" , "next" buttons loads previous or next project.

here's have code.

html (i'm loading content #ajax)

<div class="p-modal">     <div id="p-controls">         <a id="p-close" href="javascript:;">close</a>     </div>     <div id="ajax"></div> </div> 

jquery

$(document).ready(function() {   $('.p-load').on('click', function(e) {     e.preventdefault();     var href = $(this).attr('href');     if ($('#ajax').is(':visible')) {       $('#ajax').css({ display:'block' }).animate({ height:'auto' }).empty();     }     $('#ajax').css({ display:'block' }).animate({ height:'auto' },function() {       $('#ajax').html('<img id="loader" src="images/loading.gif" width="48" height="48">');       $('#loader').css({ border:'none', position:'absolute', top:'50%', left:'50%', margin:'-24px 0 0 -24px', boxshadow:'none' });       $('#ajax').load('includes/projects.html ' + href, function() {         $('#ajax').hide().fadein('slow');       });     });   }); }); 

demo (scroll down "work" section — works load each project individually if open project , close it, when use same code above on "prev" , "next" triggers inside project popup, doesn't anything)

any appreciated!

bind click events on prev , next button links. make sure on page load ajax complete call. work, tested firebug.

$('a.next,a.prev').on('click', function(e) {   e.preventdefault();   var href = $(this).attr('href');   if ($('#ajax').is(':visible')) {     $('#ajax').css({ display:'block' }).animate({ height:'auto' }).empty();   }   $('#ajax').css({ display:'block' }).animate({ height:'auto' },function() {     $('#ajax').html('<img id="loader" src="images/loading.gif" width="48" height="48">');     $('#loader').css({ border:'none', position:'absolute', top:'50%', left:'50%', margin:'-24px 0 0 -24px', boxshadow:'none' });     $('#ajax').load('includes/projects.html ' + href, function() {       $('#ajax').hide().fadein('slow');     });   }); }); 

Comments

Popular posts from this blog

python - mat is not a numerical tuple : openCV error -

c# - MSAA finds controls UI Automation doesn't -

wordpress - .htaccess: RewriteRule: bad flag delimiters -