By arlingtonvoicellc on

I'm having trouble getting a javascript snippet to execute each time a views ajax callback is completed. 

My view name is global_cofi_feed and my display id is block_1. In this case, I'm just trying to get a message to log on the console.

(function($, Drupal, drupalSettings) {

    Drupal.behaviors.slideUpdate = {
  
      attach: function(context, settings) {

        $(document).ajaxSuccess(function (event, data) {
          
            if (drupalSettings && drupalSettings.views && drupalSettings.views.ajaxViews) {
  
            var ajaxViews = drupalSettings.views.ajaxViews;

            Object.keys(ajaxViews || {}).forEach(function (i) {

              if (ajaxViews[i]['view_name'] == 'global_cofi_feed' &&  ajaxViews[i]['view_display_id'] == 'block_1') 
              
              {
                console.log('hello world');
              }

            });
          }
        });
      }
    };
  })(jQuery, Drupal, drupalSettings);
⋅ Categories: Drupal 9.x

Comments

arlingtonvoicellc’s picture

arlingtonvoicellc commented

Any help on this is greatly appreciated

wombatbuddy’s picture

wombatbuddy commented

Please provide more info about the use case.

arlingtonvoicellc’s picture

arlingtonvoicellc commented

I'm using views infinite scroll to load in content nodes. I need to fire off a few javascript functions every time the view loads more nodes in order to update the display. 

wombatbuddy’s picture

wombatbuddy commented

In the "infinite-scroll.js" file is triggered  "views_infinite_scroll.new_content" jQuery event to inform that new content was loaded. So, we can add the event listener for it in our code. The example:
my_module.libraries.yml 

my_module:
  js:
    js/my-module.js: {}
  dependencies:
    - views_infinite_scroll/views-infinite-scroll

my_module.module 

/**
 * Implements hook_views_pre_render().
 */
function my_module_views_pre_render(ViewExecutable $view) {
  if ($view->id() === 'my_view') {
    $view->element['#attached']['library'][] = 'my_module/my_module';
  }
}

my-module.js 

/**
 * @file
 * My module behaviors.
 */
(function ($, Drupal, once) {

  'use strict';

  Drupal.behaviors.myModule = {
    attach: function (context, settings) {
      $(once('my-module', 'body')).on('views_infinite_scroll.new_content', function() {
        console.log('New nodes have been loaded.');
      });
    }
  };

})(jQuery, Drupal, once);
arlingtonvoicellc’s picture

arlingtonvoicellc commented

Perfect! That works great. Thanks for your help! In case anyone else needs this solution, the only thing I had to add was 

use \Drupal\views\ViewExecutable;

to the top of the my_module.module file

arlingtonvoicellc’s picture

arlingtonvoicellc commented

Working with this further I've discovered an issue. The javascript is firing just before the content is loaded. I need it to fire after the content has fully loaded into the view. Any ideas?

wombatbuddy’s picture

wombatbuddy commented

What are you going to do with the content after it's loaded?

arlingtonvoicellc’s picture

arlingtonvoicellc commented

I need to read a localStorage value, iterate over the view rows and change a CSS style. Basically this:

(function ($, Drupal, once) {

  'use strict';

  Drupal.behaviors.infiniteScrollScripts = {
    attach: function (context, settings) {
      $(once('infinite_scroll_scripts', 'body')).on('views_infinite_scroll.new_content', function() {
        var expand = localStorage.getItem("expand");
        var media = document.querySelectorAll('.cofiMedia');
        if (expand == "true") {
          for (let element of media) {
            media.style.display = "block";
          }
        }
      });
    }
  };

})(jQuery, Drupal, once);
arlingtonvoicellc’s picture

arlingtonvoicellc commented

I'm still hung up on this issue. Would you have any suggestions?