AJAXifying content and pagination problems

Question

I am using the Ajax links API module that allows to load a node inside a <div> tag by using <a class="ajax-link" href="node/add/page" rel="#content">Add page</a>.

However, I have a problem: If I use a pager, and I click on the link to see another page, I will be redirected to that page, instead of loading it inside the <div> tag.

I solved partially by using the Views Infinite Scroll module, but if I have several <div> tags, the module doesn't load the correct view in the correct <div>.

It seems I cannot use the pagination because the URL is not re-written to accommodate to the container, and it is not scrolling because this limitation.

Is there some way of creating simple AJAX calls loading content in different <div> tags on the same page, and with pagination (or load more button, infinite scrolling, etc.)?

Answer 1

Try this below solution with views pager ajax enable.

jQuery 1.7+ Version

function runthiscode() {
  $(".pager a").each(function(){
    $(".pager a").addClass("ajax-link");
    $(".pager a").attr('rel', '#content')
  });
}

$(document ).ready(function() {
  runthiscode();
});

$(document ).ajaxComplete(function() {
  runthiscode();
});

Answer 2

It seems your problem is similar to Ajax pager does not work as expected for nested views, I had this problem before and patch #15 help me to resolve.

take a look and try that if it not work tell me I suggest you another solution

Answer 3

Try this with below jquery solution.

jQuery 1.7+ Version

function runthiscode() {
  $(".pager a").each(function(){
    var a_href = $(this).find('a').attr('href');
    $('.pager a').on('click', function(event){
      $("#content").load(a_href+" #content");
    });
  });
}

$(document ).ready(function() {
  runthiscode();
});

$(document ).ajaxComplete(function() {
  runthiscode();
});