2

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.)?

5
  • You are trying to do this using Views Module...right? Sep 2, 2016 at 17:40
  • Right, with module Views.
    – Cesar
    Sep 5, 2016 at 5:17
  • Please check if you have Ajax: Yes in your View. Sep 5, 2016 at 10:30
  • Yes, I have Ajax: Yes checked, and the URL link displays the &ajax=1 parameter. However, as the class "ajax-link" is not used not rewritten in the pager, when clicking on Next page, it directs the browser to another page, instead of loading the content with Ajax.
    – Cesar
    Sep 5, 2016 at 10:47
  • 1
    Looks like you are not the only with "Ajax not working on Ajax Loaded Content". Found below link which could be helpful for you. drupal.org/node/1877446 To be honest i haven't tried to replicate your problem, but i think you should find solution in patch #15, as stated in comments by quite a few people. Sep 5, 2016 at 16:54

3 Answers 3

2
+50

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();
});
1
  • While I solved the problem by uninstalling modules, deleting cache, and low-level database entries, this solution will work in other general instances, mainly on Nested Views and the like, so IMHO it deservs the 50 points bounty.
    – Cesar
    Sep 12, 2016 at 5:14
1

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

9
  • I have never used pathcing nor Drush. I am not sure why this problem is not solved in the main code.
    – Cesar
    Sep 8, 2016 at 8:03
  • @Cesar what is your operation system? mac? windows? linux? what is your IDE ?
    – Yuseferi
    Sep 8, 2016 at 10:10
  • Windows XP, Aptana and FTP, with XAMPP for testing.
    – Cesar
    Sep 8, 2016 at 10:37
  • @Cesar I Suggest learn how to patch, really it's good for you . very easy way to apply patch( this is traditional and not recommend method ) is manually patching : " open views/js/ajax_view.js file, and also open www.drupal.org/files/issues/1877446-15-views-ajax-pager-closest-parent_1.patch , remove each line in ajax_view.js when you see has - in patch and also add lines to ajax_view.js that has + mark." Also read this about "patch" for Windows XP www.drupal.org/node/23844 Read this one too stackoverflow.com/questions/517257/how-do-i-apply-a-diff-patch-on-windows
    – Yuseferi
    Sep 8, 2016 at 11:56
  • 1
    Applying a patch is literally one command... learn it. Some patches are so large you are bound to miss a change by manually copy pasting over things.
    – Kevin
    Sep 8, 2016 at 15:59
0

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();
});

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.