Hi i've noticed that the modules have some difficulties on pages with more than 1 view on the page.
Scenario:
view page with endless scroll + a view block in some region of the page

Result
views_infinite_scroll.js tries to apply scrolling to both of the views causing the page to break up

In views_plugin_pager_infinite_scroll.inc selectors are defined as follows:

      switch($style_plugin){
      case 'default':
        $content_selector =  'div.view-content';
        $items_selector = 'div.view-content .views-row';
        break;
      case 'grid':
        $content_selector = 'div.view-content tbody';
        $items_selector = 'div.view-content tbody tr';
        break;
      case 'list':
        $content_selector = 'div.view-content .item-list > *';
        $items_selector = 'div.view-content .views-row';
        break;
      case 'table':
        $content_selector = 'div.view-content tbody';
        $items_selector = 'div.view-content tbody tr';
        break;
    }

Proposed changes
We need to be more specific and specify the view we want to apply the scroll to.
Here I use the display id to create a more specific selector.

switch($style_plugin){
      case 'default':
        $content_selector = '.view-display-id-' . $this->view->current_display . ' div.view-content';
        $items_selector = '.view-display-id-' . $this->view->current_display . ' div.view-content .views-row';
        break;
      case 'grid':
        $content_selector = '.view-display-id-' . $this->view->current_display . ' div.view-content tbody';
        $items_selector = '.view-display-id-' . $this->view->current_display . ' div.view-content tbody tr';
        break;
      case 'list':
        $content_selector = '.view-display-id-' . $this->view->current_display . ' div.view-content .item-list > *';
        $items_selector = '.view-display-id-' . $this->view->current_display . ' div.view-content .views-row';
        break;
      case 'table':
        $content_selector = '.view-display-id-' . $this->view->current_display . ' div.view-content tbody';
        $items_selector = '.view-display-id-' . $this->view->current_display . ' div.view-content tbody tr';
        break;
    }

I just did a brief test and it seems to be working. I can see a problem if the two views have the same display id so maybe we should also add the view name to the selectors. (I just realized that now).

Anyway I'm posting this patch as a suggestion and wait for module maintainer's word.

cheers

CommentFileSizeAuthor
#1 even_better_selectors.patch2.53 KBgionnibgud
better_selectors.patch2.27 KBgionnibgud

Comments

gionnibgud’s picture

gionnibgud commented
StatusFileSize
new even_better_selectors.patch2.53 KB

A little tweak, it's now using both view name and display-id to select the container preventing errors in case of two different views in page using the same display-id.

rjbrown99’s picture

rjbrown99 commented

I think you may need to be even more specific, per this issue: #981368: Support views grouping. In this case, the tbody can match multiple times for the given plugin if you are using grouping. I'd suggest that we should investigate an even more specific selector, perhaps tbody:last?

http://api.jquery.com/last-selector/
http://api.jquery.com/last/

EDIT: The tbody:last somewhat works, or at least it's less broken. It now only inserts the photos at the end (which is correct) but you don't get any new group headers/titles. Either way I think :last should go in there.

Remon’s picture

Remon commented
Status: Needs review » Fixed

@gionnibgud, thank you very much for the patch :). applied to dev branch.
@rjbrown99, I confirm on your issue but lets keep it to #981368: Support views grouping :).

Status: Fixed » Closed (fixed)

Automatically closed -- issue fixed for 2 weeks with no activity.

rjbrown99’s picture

rjbrown99 commented
Status: Closed (fixed) » Reviewed & tested by the community

Not to re-open an issue, but the patch that was implemented was backed out in a follow-on commit.

Changelog:
http://drupalcode.org/viewvc/drupal/contributions/modules/views_infinite...

It was added in revision 1.1.2.3, then backed out in 1.1.2.4. Have a look at the CSS selectors and you will see it go away. Not sure what status to use for this so I marked it RTBC because it was working at one point, just needs to be re-applied.

Remon’s picture

Remon commented
Status: Reviewed & tested by the community » Closed (fixed)

It is not that it was backed up accidentally. building specific selectors had been moved to js :)

jkopel’s picture

jkopel commented

I believe this problem still exists in a slightly different form in the latest dev.
If I have a panel with 2 views and one of them is using infinite scroll and the other is paged, then the pager for the paged view disappears.
If I modify views_infinite_scroll.js I can add the specific view selectors to the pager as well which solves this problem.

var pager_selector   = 'div.view-id-' + settings.view_name + '.view-display-id-' + settings.display + ' div.item-list ' + settings.pager_selector;
          $(pager_selector).hide();