Content format breaks when loaded by Infinite Scroll [#1546066]

When I scroll to the bottom of the page, new content loads like it should, but it messes with the format really bad. It might just be me doing something stupid, but it was working previously. Example: http://heybuy.me

Any help fixing this would be appreciated.

Comment	File	Size	Author
#8	views_infinite_scroll-classes_need_fixing_after_pager_load-1546066-8.patch	2.81 KB	MustangGB
#8

Support from Acquia helps fund testing for Drupal Acquia logo

Comments

Comment #1

Remon CreditAttribution: Remon commented 24 April 2012 at 23:39

Could you please paste an export of that view?

Comment #2

disillusion CreditAttribution: disillusion commented 24 April 2012 at 23:53

Surely, here you go.

$view = new view;
$view->name = 'new_items';
$view->description = '';
$view->tag = 'default';
$view->base_table = 'node';
$view->human_name = 'New Items';
$view->core = 7;
$view->api_version = '3.0';
$view->disabled = FALSE; /* Edit this to true to make a default view disabled initially */

/* Display: Master */
$handler = $view->new_display('default', 'Master', 'default');
$handler->display->display_options['title'] = 'Our Newest Items';
$handler->display->display_options['access']['type'] = 'perm';
$handler->display->display_options['cache']['type'] = 'none';
$handler->display->display_options['query']['type'] = 'views_query';
$handler->display->display_options['query']['options']['query_comment'] = FALSE;
$handler->display->display_options['exposed_form']['type'] = 'basic';
$handler->display->display_options['pager']['type'] = 'infinite_scroll';
$handler->display->display_options['pager']['options']['items_per_page'] = '9';
$handler->display->display_options['pager']['options']['offset'] = '0';
$handler->display->display_options['pager']['options']['id'] = '1';
$handler->display->display_options['pager']['options']['expose']['items_per_page_options'] = '15, 30, 90, 180, 360';
$handler->display->display_options['pager']['options']['expose']['items_per_page_options_all'] = 0;
$handler->display->display_options['style_plugin'] = 'grid';
$handler->display->display_options['style_options']['row_class'] = 'grid-row';
$handler->display->display_options['style_options']['columns'] = '3';
$handler->display->display_options['style_options']['fill_single_line'] = 1;
$handler->display->display_options['row_plugin'] = 'node';
$handler->display->display_options['row_options']['links'] = 0;
$handler->display->display_options['row_options']['comments'] = 0;
/* Field: Content: Title */
$handler->display->display_options['fields']['title']['id'] = 'title';
$handler->display->display_options['fields']['title']['table'] = 'node';
$handler->display->display_options['fields']['title']['field'] = 'title';
$handler->display->display_options['fields']['title']['label'] = '';
$handler->display->display_options['fields']['title']['alter']['alter_text'] = 0;
$handler->display->display_options['fields']['title']['alter']['make_link'] = 0;
$handler->display->display_options['fields']['title']['alter']['absolute'] = 0;
$handler->display->display_options['fields']['title']['alter']['word_boundary'] = 0;
$handler->display->display_options['fields']['title']['alter']['ellipsis'] = 0;
$handler->display->display_options['fields']['title']['alter']['strip_tags'] = 0;
$handler->display->display_options['fields']['title']['alter']['trim'] = 0;
$handler->display->display_options['fields']['title']['alter']['html'] = 0;
$handler->display->display_options['fields']['title']['hide_empty'] = 0;
$handler->display->display_options['fields']['title']['empty_zero'] = 0;
$handler->display->display_options['fields']['title']['link_to_node'] = 1;
/* Sort criterion: Content: Post date */
$handler->display->display_options['sorts']['created']['id'] = 'created';
$handler->display->display_options['sorts']['created']['table'] = 'node';
$handler->display->display_options['sorts']['created']['field'] = 'created';
$handler->display->display_options['sorts']['created']['order'] = 'DESC';
/* Filter criterion: Content: Published */
$handler->display->display_options['filters']['status']['id'] = 'status';
$handler->display->display_options['filters']['status']['table'] = 'node';
$handler->display->display_options['filters']['status']['field'] = 'status';
$handler->display->display_options['filters']['status']['value'] = 1;
$handler->display->display_options['filters']['status']['group'] = 1;
$handler->display->display_options['filters']['status']['expose']['operator'] = FALSE;
/* Filter criterion: Content: Type */
$handler->display->display_options['filters']['type']['id'] = 'type';
$handler->display->display_options['filters']['type']['table'] = 'node';
$handler->display->display_options['filters']['type']['field'] = 'type';
$handler->display->display_options['filters']['type']['value'] = array(
  'product' => 'product',
);

/* Display: Page */
$handler = $view->new_display('page', 'Page', 'page');
$handler->display->display_options['path'] = 'new-items';

/* Display: Block */
$handler = $view->new_display('block', 'Block', 'block');
$handler->display->display_options['defaults']['title'] = FALSE;
$handler->display->display_options['title'] = 'New Items';
$handler->display->display_options['defaults']['pager'] = FALSE;
$handler->display->display_options['pager']['type'] = 'some';
$handler->display->display_options['pager']['options']['items_per_page'] = '20';
$handler->display->display_options['defaults']['style_plugin'] = FALSE;
$handler->display->display_options['style_plugin'] = 'default';
$handler->display->display_options['defaults']['style_options'] = FALSE;
$handler->display->display_options['defaults']['row_plugin'] = FALSE;
$handler->display->display_options['row_plugin'] = 'fields';
$handler->display->display_options['defaults']['row_options'] = FALSE;

Comment #3

Remon CreditAttribution: Remon commented 25 April 2012 at 01:47

Although I don't have similar content types to yours, but everything looks fine and new items are appended correctly. Could you create a new view with similar settings but without theming?

Comment #4

disillusion CreditAttribution: disillusion commented 25 April 2012 at 02:14

That'd probably work, but why is it altering the content output so drastically?

Comment #5

Po3t CreditAttribution: Po3t commented 26 April 2012 at 02:00

I think I know what the problem is. The appended code isn't creating correct views rows. Here's what my output looks like:

<div class="view-content">
  <div class="views-row views-row-1 views-row-odd views-row-first">
  <div class="views-row views-row-2 views-row-even">
  <div class="views-row views-row-3 views-row-odd">
  <div class="views-row views-row-4 views-row-even">
  <div class="views-row views-row-5 views-row-odd views-row-last">
  <div class="views-row views-row-1 views-row-odd views-row-first">
  <div class="views-row views-row-1 views-row-odd views-row-first">
  <div class="views-row views-row-2 views-row-even views-row-last">
  <div class="views-row views-row-2 views-row-even views-row-last">
</div>

The autopager is set to show 5 rows, then load the next 5 rows. As you can see, the first 5 rows output correctly, but then the next 4 aren't listed correctly. "views-row-5" should lose the "views-row-last" class once the new rows have been added, and the next row should be "views-row-6" instead of resetting to 1 again. I'm not sure why the row numbers are being duplicated though.

This is probably why the OP's formatting is getting all messed up. CSS classes for "views-row-first" and "views-row-last" are getting applied to rows that aren't first or last.

Comment #6

Po3t CreditAttribution: Po3t commented 26 April 2012 at 02:26

Actually, I think my issue may actually have to do with the fact that I'm using "Views Field View". Coupled with Views Infinite Scroll, the Field Views are being listed as their own top level rows instead of being inside of the parent row. I think my issue might be associated with this issue: http://drupal.org/node/1343836

However I'm using the latest released version of Views Infinite Scroll (April 23, 2012) and it's generating the aforementioned results.

<div class="views-row views-row-1 views-row-odd views-row-first">
<div class="views-row views-row-1 views-row-odd views-row-first">
<div class="views-row views-row-2 views-row-even views-row-last">
<div class="views-row views-row-2 views-row-even views-row-last">

The reason those rows are duplicating is because the middle two rows are actually supposed to be inside of the top row. The last row is actually supposed to be the row after the top row. The two middle rows should be inside of the first "views-row-1".

Is this possible to fix?

Comment #7

disillusion CreditAttribution: disillusion commented 29 April 2012 at 22:20

Yeah this is still not working at all for me. Your help might be able to help me patch it up temporarily. Is there an easy way to find older versions? I installed an older one with the web interface, so I don't have a copy. As I said, it used to work fine.

Comment #8

MustangGB CreditAttribution: MustangGB commented 26 July 2012 at 18:59

Version:	7.x-1.1	» 6.x-1.x-dev
Category:	support	» bug
Status:	Active	» Needs review

File	Size
views_infinite_scroll-classes_need_fixing_after_pager_load-1546066-8.patch	2.81 KB

In my opinion because multiple pages are being loaded on the same screen we should be dealing with their classes as well. The attached patch was made against 6.x-1.x-dev, however it only deals with the "Grid" style as this was the combination needed for my implementation. The switch statement needs expanding to include code that supports the other styles as well.

In should also be noted that the approach taken in this patch is to override all existing classes with those generated by views_infinite_scroll. This loses any customised or additional classes, which maybe undesirable from a themers prospective. It would be better to implement this in a slightly modified way that preserves these.