Append DIV content using AJAX - Previous/Next

Question

So what I'm trying to do is append content from an HTML document to a DIV that I've already loaded content into (from the same file) using AJAX.

I'm trying to have it so when you click the "previous" and "next" buttons it loads the previous or next project.

Here's what I have for code.

HTML (I'm loading content into #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 to the "Work" section — it works to load each project individually if you open a project and then close it, but when I use the same code above on the "prev" and "next" triggers inside the project popup, it doesn't do anything)

Any help is greatly appreciated!

score 1 · Accepted Answer · answered Dec 06 '14 at 05:37

1

Bind click events on PREV and NEXT button links. Make sure you do it On page load as well as Ajax complete call. It does work, i tested from 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');
    });
  });
});

answered Dec 06 '14 at 05:37

Dave

4,376
3
24
37

I think I know what you mean by "on page load", but can you explain "ajax complete call?" I'm a super noob with AJAX – Kevin Haag Dec 07 '14 at 18:23
ok.. i see a EXPLORE PROJECT button. when i inject this code from firebug console and click on next button, it shows loading image and then showed div with project details. That was ajax call to location GET http://the.gs/testlink/kevin/includes/projects.html. Find that ajax call and on its complete. Rebind above event to make prev and next button work. Here is answer for how to find ajax success call http://stackoverflow.com/questions/21648356/jquery-ajax-beforesend-and-success-error-complete – Dave Dec 07 '14 at 18:31
Okay, this pointed me in the right direction. I ended up using .ajaxComplete() [link](http://api.jquery.com/ajaxcomplete/) and using the code you suggested above in that call. `$( document ).ajaxComplete(function() { //Dave's code here )};` – Kevin Haag Dec 08 '14 at 06:12

score 0 · Answer 2 · answered Dec 06 '14 at 05:34

try something like this

$('document').on('click','.p-load' function(e) {
 // your code goes here.

});

Reason : .p-load element is loaded dynamically which are not present on on DOM load. so use jquery delegate

Reference : http://api.jquery.com/delegate/

I would prefer to use parent elment of modal which is present on DOM load. so I think in your case it would be .p-modal

 $('.p-modal').on('click','.p-load' function(e)

Append DIV content using AJAX - Previous/Next

2 Answers2