Thanks for your work ! & sorry to hve been that late to answer. I was pretty busy those days.
I tested it. It is working for tables. But now I would like to use it for the search api page pager.
On such pages it doesn't work. To be honest I didn't even try to debug yet.
But maybe you might have already an idea why I doesn't work. Is it suppose to work ?
Ex: http://pilet.alwaysdata.net
Sorry It worked for table, but I was not able to make it work for search ... it just because I didn't understand the logic behing your module.
I succedded that way :
For the example here : taken from http://drupal.org/node/1473558
(function($){
//
Drupal.behaviors.viewsInfiniteScroll = {
attach: function (context, settings) {
$(function(){
if (this.processed) return;
this.processed=true;
if ($('.search-results').length==0) return;
var $container = $('.search-results');
$container.imagesLoaded( function(){
$container.infinitescroll({
navSelector : 'ul.pager', // selector for the paged navigation
nextSelector : '.pager-next a', // selector for the NEXT link (to page 2)
itemSelector : '.search-results', // selector for all items you'll retrieve
animate : true,
msgText : Drupal.t("Loading new results..."),
img: '/sites/default/themes/pilet_renaud/img/ajax-loader.gif',
donetext:Drupal.t('No more results to load.'),
},function(arrayOfNewElems,state){
//YOUR CALLBACK STUFF .. To re-attach behaviour if needed
})
})
});
}
};
You need to hack the js lib downloaded (https://github.com/paulirish/infinite-scroll) to support druapl syntax by replacing :
the \/ to & in
"match(/^(.*?page=)2(\/.*|$)/" => "match(/^(.*?page=)2(&.*|$)"
++
Marc
i'm trying to make the infinity scroll script works with a more link button but without success may anyone help me please..this is my script:
(function ($) {
Drupal.behaviors.viewsInfiniteScroll = {
attach: function (context, settings) {
$(function(){
var container = $(".view-content");
container.infinitescroll({
navSelector : "ul.pager",
// selector for the paged navigation (it will be hidden)
nextSelector : "a#next",
// selector for the NEXT link (to page 2)
itemSelector : ".views-row .node-page",
// selector for all items you'll retrieve
Hi Mohit,
To set it up, you will need a couple of steps:
REM: This method don't use the "Infinite Scroll Module", it's a rewrite of the stuff. In this method I choosed to integrate it in the theme, you could also create your own module (wish would be probably better .... )
1) download https://github.com/desandro/imagesloaded (jquery.imagesloaded.min.js) place it in your theme folder YOURTHEME/js
This will make sure all images are loaded before activate the infinite scroll
2) download https://github.com/paulirish/infinite-scroll (jquery.infinitescroll.min.js) place it in your theme folder YOURTHEME/js
In order to make it work with Drupal search modify it as follow: Search match(/^(.*?page=)2(\/.*|$)/ replace it by match(/^(.*?page=)2(&.*|$)
3) Create a new js (ex:infinitescroll.js) with the content of the #5 post & place it in your theme folder YOURTHEME/js
Rem: You will probably have to change the img path
4) modify YOUR_THEME.info and add
scripts[] = js/jquery.imagesloaded.min.js
scripts[] = js/jquery.infinitescroll.min.js
scripts[] = js/infinitescroll.js
5) flush the cache
6) cross finger & try .... it should work if not ... it's time to debug with firebug ...
Hi Marc,
I have implemented as per your suggestion.
For now i am using bartik theme and new drupal installation to test the feature.
After performing all the steps, still i am not getting infinite scroll and even i don't get any error in firebug also.
All javascripts are seamlessly integrated but it is not working yet.
There is no error in firebug too.
Hi Marc and Fernando,
If you don't mind can we discuss the roadmap for the new module ?
Or is it better to change existing version of infinitescroll 7-x.1-x-dev version.
Lets port it to drupal 8 also..
Comments
Comment #1
magico commentedNext week I'll have an initial working version.
Comment #2
magico commentedDevelopment release is available now.
Comment #3
magico commentedComment #4
mkalbere commentedThanks for your work ! & sorry to hve been that late to answer. I was pretty busy those days.
I tested it. It is working for tables. But now I would like to use it for the search api page pager.
On such pages it doesn't work. To be honest I didn't even try to debug yet.
But maybe you might have already an idea why I doesn't work. Is it suppose to work ?
Ex: http://pilet.alwaysdata.net
Comment #5
mkalbere commentedSorry It worked for table, but I was not able to make it work for search ... it just because I didn't understand the logic behing your module.
I succedded that way :
For the example here : taken from http://drupal.org/node/1473558
You need to hack the js lib downloaded (https://github.com/paulirish/infinite-scroll) to support druapl syntax by replacing :
the \/ to & in
"match(/^(.*?page=)2(\/.*|$)/" => "match(/^(.*?page=)2(&.*|$)"
++
Marc
Comment #6
ahanchi commentedi'm trying to make the infinity scroll script works with a more link button but without success may anyone help me please..this is my script:
(function ($) {
Drupal.behaviors.viewsInfiniteScroll = {
attach: function (context, settings) {
$(function(){
var container = $(".view-content");
container.infinitescroll({
navSelector : "ul.pager",
// selector for the paged navigation (it will be hidden)
nextSelector : "a#next",
// selector for the NEXT link (to page 2)
itemSelector : ".views-row .node-page",
// selector for all items you'll retrieve
});
// kill scroll binding
$(window).unbind('.infscr');
// hook up the manual click guy.
$('a#next').click(function(){
//alert("eeee");
$(document).trigger('retrieve.infscr');
return false;
});
// remove the paginator when we're done.
$(document).ajaxError(function(e,xhr,opt){
if (xhr.status == 404) $('a#next').remove();
});
});
}
};
})(jQuery);
Comment #7
mohit_aghera commentedHi Marc,
Can you please describe me how you achieved infinite scroll on the search page ?
Where should i use the code which you gave in your comment.
Comment #8
mohit_aghera commentedComment #9
mkalbere commentedHi Mohit,
To set it up, you will need a couple of steps:
REM: This method don't use the "Infinite Scroll Module", it's a rewrite of the stuff. In this method I choosed to integrate it in the theme, you could also create your own module (wish would be probably better .... )
1) download https://github.com/desandro/imagesloaded (jquery.imagesloaded.min.js) place it in your theme folder YOURTHEME/js
This will make sure all images are loaded before activate the infinite scroll
2) download https://github.com/paulirish/infinite-scroll (jquery.infinitescroll.min.js) place it in your theme folder YOURTHEME/js
In order to make it work with Drupal search modify it as follow: Search match(/^(.*?page=)2(\/.*|$)/ replace it by match(/^(.*?page=)2(&.*|$)
3) Create a new js (ex:infinitescroll.js) with the content of the #5 post & place it in your theme folder YOURTHEME/js
Rem: You will probably have to change the img path
4) modify YOUR_THEME.info and add
scripts[] = js/jquery.imagesloaded.min.js
scripts[] = js/jquery.infinitescroll.min.js
scripts[] = js/infinitescroll.js
5) flush the cache
6) cross finger & try .... it should work if not ... it's time to debug with firebug ...
Comment #10
mohit_aghera commentedHi Marc,
I have implemented as per your suggestion.
For now i am using bartik theme and new drupal installation to test the feature.
After performing all the steps, still i am not getting infinite scroll and even i don't get any error in firebug also.
All javascripts are seamlessly integrated but it is not working yet.
There is no error in firebug too.
Comment #11
mohit_aghera commentedWorked it..
I forgot to write (jQuery) at the end of snippet.
Thanks for your help.
Comment #12
mohit_aghera commentedHi Marc and Fernando,
If you don't mind can we discuss the roadmap for the new module ?
Or is it better to change existing version of infinitescroll 7-x.1-x-dev version.
Lets port it to drupal 8 also..
Comment #13
seanmrafferty commentedPlease note there is a slash missing in the replacement text in #5. There should be forward slash at the end of the string.
It should be match(/^(.*?page=)2(\/.*|$)/