content.offset() is undefined

Please use Views 3 alpha-3 and latest Views Infinite Scroll dev snapshot and tell me if you still face this problem.

Hey,

I'm using Views 6.x-3.0-alpha3 and Views Infinite Scroll 6.x-1.x-dev and still get this error:

jquery.autopager-1.0.0.js:136 - Uncaught TypeError: Cannot read property 'top' of undefined

Any idea why?

os? browser? browser-version? please.

OS: Mac OS X Leopard - Snow Leopard
Browers: Chrome 12.0.742.112, Safari 5.0.5 and Firefox 3.6.13

If i do a content.toSource() before the if i get
({length:0, prevObject:{length:0, prevObject:{0:({}), length:1}}})

If i do a JSON.stringify(content, null, 4) before the if i get

{ 
	"length":0,
	"prevObject":{
		"length":0,
		"prevObject":{
			"0":{ 
				"location":{
					"href":"http://ilab.fremtidslaboratoriet/opgaver",
					"protocol":"http:",
					"hostname":"ilab.fremtidslaboratoriet",
					"hash":"",
					"search":"",
					"host":"ilab.fremtidslaboratoriet",
					"pathname":"/opgaver",
					"port":""
				}
			},
			"length":1
		}
	}
}

Hope it helps!

you probably rewrite default style output, ie views-view-table--[you view's name].tpl.php for table format.

going through views_plugin_pager_infinite_scroll.inc reveals must have tags for every style output:
switch ($this->view->plugin_name) {
case 'default':
$content_selector = 'div.view-content';
$items_selector = '.views-row';
break;
case 'grid':
$content_selector = 'div.view-content tbody';
$items_selector = 'tr';
break;
case 'list':
$content_selector = 'div.view-content .item-list > *';
$items_selector = '.views-row';
break;
case 'table':
$content_selector = 'div.view-content tbody';
$items_selector = 'tr';
break;
}

long story short: jquery cant find your content, delete *.tpl.php files in your theme template directory and let me know if everything is back to normal

same issue on chrome

i've have the same issue in the 7 version using with views_fluid_grid.

Then i add a new case for the switch:

case 'views_fluidgrid':
$content_selector = 'div.views_fluidgrid_listado_general_page';
$items_selector = '.views-fluidgrid-item';
break;

But i doesn't work, a new javascript error appears:

last.offset() is null
content.offset() is null
http://nedukame.local.pc/sites/all/libraries/autopager/jquery.autopager-...
Line 134

It seems that views_fluid_grid doesn't ouput the last class to the last item...

Upppss, i've put the css selector wrong.

This works but the masonry isn't applied

case 'views_fluidgrid':
        $content_selector = 'div.view-content > div.views-fluidgrid-wrapper';
        $items_selector = '.views-fluidgrid-item';
        break;

A not elegant method.

Put after the 47 line of views_infinite_scroll.js

      $(content_selector).masonry( 'reload' );

Before

load: function() {
                $('div#views_infinite_scroll-ajax-loader').remove();
                Drupal.attachBehaviors(this);
              }

After

load: function() {
           $('div#views_infinite_scroll-ajax-loader').remove();
                Drupal.attachBehaviors(this);
                $(content_selector).masonry( 'reload' );
              }

I'm sure this is dirty code, i think it must be a Drupal behaviours job and only when the masonry is active, maybe someone can improve it?

@Carlitus, i have the overlap issue with your code, do you have any idea what cause that and if there is a solution. and it is suggested to use the appended method to work with infinite scroll together, http://masonry.desandro.com/demos/infinite-scroll.html. is there any solution to implement the appended method?

It's curious because i hacked my views infinite scroll to work with jquery infinite scroll using the code of your link.

What i did:

I've put the jquery.infinitescroll.min.js (https://github.com/paulirish/infinitescroll) in the js module directory

in views_infinite_scroll_theme.inc i added in the line 100:

    drupal_add_js(drupal_get_path('module', 'views_infinite_scroll') . '/js/jquery.infinitescroll.min.js');

In views_infinite_scroll.js:

            /*$(pager_selector).hide();
            var handle = $.autopager({
              appendTo: content_selector,
              content: items_selector,
              link: next_selector,
              page: 0,
              start: function() {
                $(img_location).after(img);
              },
              load: function() {
                $('div#views_infinite_scroll-ajax-loader').remove();
                Drupal.attachBehaviors(this);
                $(content_selector).masonry('reload');                
              }
            });
*/            
            $(content_selector).infinitescroll({
              navSelector  : pager_selector,    // selector for the paged navigation 
              nextSelector : next_selector,  // selector for the NEXT link (to page 2)
              itemSelector : items_selector,     // selector for all items you'll retrieve
              bufferPx     : 200,
              loading: {
                  finishedMsg: 'No more pages to load.',
                  img: 'http://i.imgur.com/6RMhx.gif'
                }
              },
              // trigger Masonry as a callback
              function( newElements ) {
                // hide new items while they are loading
                var $newElems = $( newElements ).css({ opacity: 0 });
                // ensure that images load before adding to masonry layout
                $newElems.imagesLoaded(function(){
                  // show elems now they're ready
                  $newElems.animate({ opacity: 1 });
                  $(content_selector).masonry( 'appended', $newElems, true ); 
                });
              }
            );

@Carlitus, thank you very much! i think it works. but this module use the autopager plugin from http://lagoscript.org/jquery/autopager, and for me the infinitescroll plugin from paulirish is better, it is also recommend by the masonry plugin. i'm not sure if it is appropriate to use it instead. i mean is it possible to keep using autopager plugin unless the maintainer decide to switch to infinitescroll plugin?

@euroba, yes, you need to remove the line where the module loads the autopager plugin.

@Carlitus, i still have one problem here, everything works great with your code except the trigger. now the trigger will be executed immediately if i scroll the mouse, it should be triggered at the bottom of the page. maybe you know what the problem is? thanks

@euroba, look out the bufferPx variable. this variable is used to load the new items x pixels before the bottom. I like more with 200px but you maybe want to be at 0 (or just remove it)

i don't think that caused the problem, i changed bufferPx variable to 0, but the autopager still starts once I scroll. I'm still looking for the real reason, i appreciate your help, if you find something, please tell me, thanks

maybe there is something wrong with the trigger, because i'm using the the infinitescroll plugin not the autopager? handle.autopager('load'); is this piece of code still suitable?

            // Trigger autoload if content height is less than doc height already
            var prev_content_height = $(content_selector).height();
            do {
              var last = $(items_selector).filter(':last');
              if(last.offset().top + last.height() < $(document).scrollTop() + $(window).height()) {
                last = $(items_selector).filter(':last');
                handle.autopager('load');
              }
              else {
                break;
              }
            }
            while ($(content_selector).height() > prev_content_height);

I didn't remove this and it worked but no always (in the first page with apache Solr didn't work in my project). May be your problem is another. Look out at this:
https://github.com/paulirish/infinite-scroll/issues/145

Hi all, I'm not using the masonry module and still getting this js error when I try to use the autoscroll in a view.
The line in which the error is spotted is
if(last.offset().top + last.height() < $(document).scrollTop() + $(window).height()) {
of the jquery.autopager-1.0.0.js

The autoscroll is not working as expected, I get the "normal" pager even if I select "Infinite scroll" under Pager settings in the view.
I'm using "HTML list" format.

I thought that maybe some template was rewriting the pager, and therefore the autoscroll is not loading.
But when I comment the $pager in my views-view.tpl.php I get no pager at all and the autoscroll is not displaying either.

Is there something I am missing?
please let me know if you need more details.

Thanks!
m

Getting an error after setting Infinite Scroll pager in a view..using drupal 7..The error is
"Uncaught TypeError: Cannot read property 'top' of null"
in line 52 of views_infinite_scroll.js, using views_infinite_scroll version 7.x.1.1.

var last = $(items_selector).filter(':last');
              if(last.offset().top + last.height() < $(document).scrollTop() + $(window).height()) {
                last = $(items_selector).filter(':last');
                handle.autopager('load');
              }

using console.log i printed the value of variable last...its empty..

great solution thank you Carlitus,
evereything works except loading gif is not in place...

I found that loading img is showing up in the top left corner of the screen, its loading very quickly and I can't find any css for the loading gif.
How can I place it at the bottom of the page?

maharag: Please refrain from editing the title of an issue unless it needs to be updated to better reflect the overall topic being discussed. Thanks! :)

I'm getting this issue, too, after installing this module on the latest Views 3 stable build.

I was getting the same issue also, but after updating of jQuery, it seems to work with jQuery v. 1.8.

I was facing same issue but I get it resolved.

If you are theaming you view output tpl you need to set selector according to your html structure.

got to views_plugin_pager_infinite_scroll.inc and set selector as per your HTML under

switch ($this->view->plugin_name) {

I am using TABLE format and I replaced below code

case 'table':
        $content_selector = 'div.view-content > table > tbody';
        $items_selector = 'tr';
        break;

with

case 'table':
        $content_selector = 'div.infinite-scroll-view-wrapper';
        $items_selector = 'div.blockWrap';
        break;

If you still face problem please check views_infinite_scroll.js file and work around items_selector. It depends on your HTML structure butt for me it works when I removed > from selector.

Patch attached

Bad patch! Attaching new one

Issue exists for me. Trying to make sense of solutions in here...

Updating to critical. This simply doesn't work right now when this bug is encountered.

Also I checked out the second patch from grisendo... not sure that has any impact upon the issue what-so-ever

With that patch I can avoid errors. Then, with custom JS and custom theming in my theme, I can make it work.

Could you elaborate upon the customing themeing and custom JS? Perhaps I can abstract the cause of the problem, how to reproduce the problem, and then a patchable solution.

Some develop used no "Wrapper class" and use "List class"

var pager_selector   = view_selector + ' > div.item-list ' + settings.pager_selector;
//change to
var pager_selector   = view_selector + ' ' + settings.pager_selector;

The reason for this error is that the css selector in the theme variable "content_selector" is not always correct, which leads to the jquery plugin not finding the element it's looking for. This variable is defined in the "render" method in views_plugin_pager_infinite_scroll.inc. In my case I was using Views Bulk Operations which alters the markup in a way that this module can't handle. What I did to create a workaround for this was to create a custom module to alter that variable before it's passed to the theme function:

//Implements hook_theme_registry_alter().
function MYMODULE_theme_registry_alter(&$theme_registry) {
  if(!empty($theme_registry['views_infinite_scroll_pager'])) {
    $theme_registry['views_infinite_scroll_pager']['preprocess functions'][] = 'MYMODULE_infinite_scroll_pager_preprocess';
  }
}
function MYMODULE_infinite_scroll_pager_preprocess(&$variables) {
  if($variables['content_selector'] === 'div.view-content > table > tbody') {
    $variables['content_selector'] = 'div.view-content table > tbody';
  }
}

Your post reminded me to come back here :)

I was able to figure out my issue. It was that the view was broken up into the view content and view pager in panels.

All of these are custom use cases where the view starts to break down. I'm not sure this can be all account for, but perhaps patches for particular situations can be contributed. In my case, I added a conditional case for when ctools was used, and adjusted the selectors used. I'll try and come up with a patch and submit it back when time allows, although the patch will be use case specific, not really a safe larger contribution to the module itself.