Not loading second page if content is view mode.

@Devendra Mishra not able to reproduce this issue, its working fine here

I'm seeing this very same issue on my D8 site. I even updated to the latest from 1.x-dev.

Drupal core: 8.9.16

We are including this on a page using Bricks (which is similar to Paragraphs). Tried other core Views pagers for AJAX loading the content and they work fine. They just don't do it in the manner that this module does.

When you look at the AJAX response, it shows the content that should be loaded. However, it never appears on the page. There are no JS errors in the console either. This leads me to believe that this view mode breaks whatever step is taken in the JS to display the new results.

Now we are using the EVA module (https://www.drupal.org/project/eva) and a Views display that is using that on the page. But given that other pagers have no issues I would contend that the problem lies in the Views Infinite Scroll module.

Here is what the config export for the view shows:

uuid: 75298fae-9db5-40a7-9633-426fde3cd1e9
langcode: en-us
status: true
dependencies:
  config:
    - core.entity_view_mode.node.teaser
    - node.type.blog_post
    - taxonomy.vocabulary.blog_categories
  module:
    - better_exposed_filters
    - datetime
    - eva
    - node
    - taxonomy
    - user
    - views_infinite_scroll
id: blog_post_listing
label: 'Blog Post Listing'
module: views
description: ''
tag: ''
base_table: node_field_data
base_field: nid
display:
  default:
    display_plugin: default
    id: default
    display_title: Master
    position: 0
    display_options:
      access:
        type: perm
        options:
          perm: 'access content'
      cache:
        type: tag
        options: {  }
      query:
        type: views_query
        options:
          disable_sql_rewrite: false
          distinct: false
          replica: false
          query_comment: ''
          query_tags: {  }
      exposed_form:
        type: bef
        options:
          submit_button: Apply
          reset_button: false
          reset_button_label: Reset
          exposed_sorts_label: 'Sort by'
          expose_sort_order: false
          sort_asc_label: Asc
          sort_desc_label: Desc
          text_input_required: 'Select any filter and click on Apply to see results'
          text_input_required_format: restricted_html
          bef:
            general:
              autosubmit: false
              autosubmit_exclude_textfield: false
              autosubmit_textfield_delay: 500
              autosubmit_hide: false
              input_required: false
              allow_secondary: false
              secondary_label: 'Advanced options'
              secondary_open: false
            filter:
              blog_categories_target_id:
                plugin_id: bef
                advanced:
                  placeholder_text: ''
                  rewrite:
                    filter_rewrite_values: ''
                  collapsible: false
                  is_secondary: false
                select_all_none: false
                select_all_none_nested: false
                display_inline: false
      pager:
        type: infinite_scroll
        options:
          items_per_page: 20
          offset: 0
          id: 0
          total_pages: null
          tags:
            previous: '‹ Previous'
            next: 'Next ›'
          expose:
            items_per_page: false
            items_per_page_label: 'Items per page'
            items_per_page_options: '5, 10, 25, 50'
            items_per_page_options_all: false
            items_per_page_options_all_label: '- All -'
            offset: false
            offset_label: Offset
          views_infinite_scroll:
            button_text: 'Load More'
            automatically_load_content: false
            initially_load_all_pages: false
      style:
        type: default
        options:
          row_class: ''
          default_row_class: true
          uses_fields: false
      row:
        type: 'entity:node'
        options:
          view_mode: teaser
      fields:
        title:
          id: title
          table: node_field_data
          field: title
          settings:
            link_to_entity: true
          plugin_id: field
          relationship: none
          group_type: group
          admin_label: ''
          label: ''
          exclude: false
          alter:
            alter_text: false
            text: ''
            make_link: false
            path: ''
            absolute: false
            external: false
            replace_spaces: false
            path_case: none
            trim_whitespace: false
            alt: ''
            rel: ''
            link_class: ''
            prefix: ''
            suffix: ''
            target: ''
            nl2br: false
            max_length: 0
            word_boundary: true
            ellipsis: true
            more_link: false
            more_link_text: ''
            more_link_path: ''
            strip_tags: false
            trim: false
            preserve_tags: ''
            html: false
          element_type: ''
          element_class: ''
          element_label_type: ''
          element_label_class: ''
          element_label_colon: true
          element_wrapper_type: ''
          element_wrapper_class: ''
          element_default_classes: true
          empty: ''
          hide_empty: false
          empty_zero: false
          hide_alter_empty: true
          click_sort_column: value
          type: string
          group_column: value
          group_columns: {  }
          group_rows: true
          delta_limit: 0
          delta_offset: 0
          delta_reversed: false
          delta_first_last: false
          multi_type: separator
          separator: ', '
          field_api_classes: false
      filters:
        status:
          value: '1'
          table: node_field_data
          field: status
          plugin_id: boolean
          entity_type: node
          entity_field: status
          id: status
          expose:
            operator: ''
            operator_limit_selection: false
            operator_list: {  }
          group: 1
        type:
          id: type
          table: node_field_data
          field: type
          value:
            blog_post: blog_post
          entity_type: node
          entity_field: type
          plugin_id: bundle
          expose:
            operator_limit_selection: false
            operator_list: {  }
        blog_categories_target_id:
          id: blog_categories_target_id
          table: node__blog_categories
          field: blog_categories_target_id
          relationship: none
          group_type: group
          admin_label: ''
          operator: or
          value: {  }
          group: 1
          exposed: true
          expose:
            operator_id: blog_categories_target_id_op
            label: Category
            description: ''
            use_operator: false
            operator: blog_categories_target_id_op
            operator_limit_selection: false
            operator_list: {  }
            identifier: blog_categories_target_id
            required: false
            remember: false
            multiple: false
            remember_roles:
              authenticated: authenticated
              anonymous: '0'
              content_manager: '0'
              developer: '0'
              administrator: '0'
              unpublished_view_only: '0'
            reduce: false
          is_grouped: false
          group_info:
            label: ''
            description: ''
            identifier: ''
            optional: true
            widget: select
            multiple: false
            remember: false
            default_group: All
            default_group_multiple: {  }
            group_items: {  }
          reduce_duplicates: false
          type: select
          limit: true
          vid: blog_categories
          hierarchy: false
          error_message: true
          plugin_id: taxonomy_index_tid
      sorts:
        blog_post_updated_publish_date_value:
          id: blog_post_updated_publish_date_value
          table: node__blog_post_updated_publish_date
          field: blog_post_updated_publish_date_value
          relationship: none
          group_type: group
          admin_label: ''
          order: DESC
          exposed: false
          expose:
            label: ''
          granularity: second
          plugin_id: datetime
        blog_post_publish_date_value:
          id: blog_post_publish_date_value
          table: node__blog_post_publish_date
          field: blog_post_publish_date_value
          relationship: none
          group_type: group
          admin_label: ''
          order: DESC
          exposed: false
          expose:
            label: ''
          granularity: second
          plugin_id: datetime
      title: 'Blog Post Listing'
      header: {  }
      footer: {  }
      empty: {  }
      relationships:
        blog:
          id: blog
          table: node__blog
          field: blog
          relationship: none
          group_type: group
          admin_label: 'blog: Content'
          required: true
          plugin_id: standard
      arguments:
        nid:
          id: nid
          table: node_field_data
          field: nid
          relationship: blog
          group_type: group
          admin_label: ''
          default_action: 'not found'
          exception:
            value: all
            title_enable: false
            title: All
          title_enable: false
          title: ''
          default_argument_type: fixed
          default_argument_options:
            argument: ''
          default_argument_skip_url: false
          summary_options:
            base_path: ''
            count: true
            items_per_page: 25
            override: false
          summary:
            sort_order: asc
            number_of_records: 0
            format: default_summary
          specify_validation: false
          validate:
            type: none
            fail: 'not found'
          validate_options: {  }
          break_phrase: false
          not: false
          entity_type: node
          entity_field: nid
          plugin_id: node_nid
      display_extenders: {  }
      use_ajax: true
    cache_metadata:
      max-age: -1
      contexts:
        - 'languages:language_content'
        - 'languages:language_interface'
        - url
        - url.query_args
        - user
        - 'user.node_grants:view'
        - user.permissions
      tags: {  }
  block_1:
    display_plugin: block
    id: block_1
    display_title: Block
    position: 1
    display_options:
      display_extenders: {  }
      exposed_form:
        type: bef
        options:
          submit_button: Apply
          reset_button: false
          reset_button_label: Reset
          exposed_sorts_label: 'Sort by'
          expose_sort_order: false
          sort_asc_label: Asc
          sort_desc_label: Desc
          text_input_required: 'Select any filter and click on Apply to see results'
          text_input_required_format: restricted_html
          bef:
            general:
              autosubmit: false
              autosubmit_exclude_textfield: false
              autosubmit_textfield_delay: 500
              autosubmit_hide: false
              input_required: false
              allow_secondary: false
              secondary_label: 'Advanced options'
              secondary_open: false
            filter:
              blog_categories_target_id:
                plugin_id: bef
                advanced:
                  placeholder_text: ''
                  rewrite:
                    filter_rewrite_values: ''
                  collapsible: false
                  is_secondary: false
                select_all_none: false
                select_all_none_nested: false
                display_inline: false
      defaults:
        exposed_form: false
    cache_metadata:
      max-age: -1
      contexts:
        - 'languages:language_content'
        - 'languages:language_interface'
        - url
        - url.query_args
        - user
        - 'user.node_grants:view'
        - user.permissions
      tags: {  }
  entity_view_1:
    display_plugin: entity_view
    id: entity_view_1
    display_title: EVA
    position: 2
    display_options:
      display_extenders: {  }
      entity_type: brick
      bundles:
        - blog_post_listing
      argument_mode: token
      default_argument: '[brick:blogpostlisting_blog:target_id]'
    cache_metadata:
      max-age: -1
      contexts:
        - 'languages:language_content'
        - 'languages:language_interface'
        - url
        - url.query_args
        - user
        - 'user.node_grants:view'
        - user.permissions
      tags: {  }

Update on this, I am currently scoping out the "docroot/modules/contrib/views_infinite_scroll/js/infinite-scroll.js" file. Specifically in the "$.fn.infiniteScrollInsertView" function.

I see it receiving the correct View ID. It has a proper contentWrapperSelector. When it tries to append the rows to the view object, that works too. At this point I am wondering how it could not be the "Drupal.attachBehaviors(view.$view[0]);" line.

Continuing to dig...

While poking around a bit more, I decided to recheck on local that it is still failing. And it no longer is. The added items are showing up. I rechecked on dev and it is still having the issue.

Here is what is different locally:

1. I updated from 1.8 to 1.x-dev
2. I changed the display output of the Brick bundle that it outputting it to arrange the filters before the results. (probably not it)
3. And I changed the settings in the View for Views Infinite Scroll to automatically load then switched back to using the "Load More" button

I did a config-export to be sure nothing else was in there and nothing was. It didn't even update the view config.

I did notice that when I switched to automatic loading it would do that action on page load instead of on scroll past.

I am pushing the code to dev to see if this solves it somehow.

One last thing. I noticed that, post update to 1.x-dev, the layout output changed from two-columns to a single column. Which is super-weird. Not sure the exact issue there.

But I also noticed this issue with EVA Views that is in the dev branch but not in 1.8.

https://www.drupal.org/project/views_infinite_scroll/issues/2896459

As I mentioned previously, we are using EVA. So clearly that was my primary issue. Leaving all this documented for others to both see my stupidity and learn from it.

Devendra Mishra, https://www.drupal.org/project/views_infinite_scroll/issues/3252577 helped me in a similar case, will you check it?

Same issue for me. Switching to fields instead of content and everything works.

I am also experiencing the same issue. It is specific to the scenario when we chose to choose content rather than fields. In my case, I'm using the teaser view of the content. As is mentioned in views_infinite_scroll_preprocess_views_view

$vars['rows']['#theme_wrappers']['container']['#attributes']['data-drupal-views-infinite-scroll-content-wrapper'] = TRUE;
$vars['rows']['#theme_wrappers']['container']['#attributes']['class'][] = 'views-infinite-scroll-content-wrapper';
$vars['rows']['#theme_wrappers']['container']['#attributes']['class'][] = 'clearfix';

We are not getting any of these classes or the attribute data-drupal-views-infinite-scroll-content-wrapper added to the parent div in views-view.html.twig file.

@Alex Bukach I can confirm that the issue #3252577 patch #8 have solved the issue in my end.

Currently the version 2.0.x-dev@dev has the fix in place.

Also the change in #3252577: Stops loading after X amount of items(Drupal ^9.2.0 ) has been included in https://www.drupal.org/project/views_infinite_scroll/releases/2.0.0