How come my view block is not loading using ajax?

Question

We have a view, myview, that has an exposed filter title (text input). The view has Exposed form in block:Yes and so we load it onto the page under admin/structure/block. The block has a machine name of exposedform_myview_title.

We want to remove it from display and only load the view block on click of an icon. How come my view block is not loading when using ajax?

View Setup:

• view_name = 'myview`
• when creating view, view page setting -> "create a page" was set to true
• view machine name = mypage
• view use ajax = Yes
• view block (displayed using admin/structure/block) machine name exposedform_myview

Error message

https://somesite/path/views/ajax?view_name=myview&view_block_id=mypage 404 (not found)

myjs.js

This will load the view itself and not the exposedform_myview_title block. We want the exposedform_myview_title to be displayed.

(function($) {
  'use strict';

  Drupal.behaviors.iconClick = {
    attach: function(context, setting) {
      $('#someid', context).once().each(function () {
        $(this).on('click', function(clickEvent) {
          // Use Ajax to load form.
          $.ajax({
            url: drupalSettings.path.baseUrl + 'views/ajax',
            type: 'GET', // type: 'POST' not succesfull
            dataType: 'json',
            data: 'view_name=myview&view_display_id=mypage',
            //not successfull --> data: 'view_name=myview&view_block_id=exposedform_myview',
            success: function(response) {
              var output = response[1].data;
              $('.some-element').html(output);
            },
            error: function(data) {
              alert('error');
              console.log(data);
            }
          });
        });
      });
    }
  };

})(jQuery);

page.html.twig

...
<div id="someid">my icon goes here</div>
<div class="some-element"> view block exposed form should go here </div>
...

we also tried to use Drupal.ajax, but that did not load the View into the required <div class="some-element">

(function($) {
  'use strict';

  Drupal.behaviors.iconClick = {
    attach: function(context, setting) {
      $('#someid', context).once().each(function () {
        $(this).on('click', function(clickEvent) {
          // Use Ajax to load form.
          var ajaxPath = '/views/ajax';
          var view_info = {
            view_name: 'myview',
            view_display_id: 'page'
          };

          var ajax_settings = {
            submit: view_info,
            url: ajaxPath,
            event: 'click'
          };

          Drupal.ajax(ajax_settings);
        });
      });
    }
  };

})(jQuery);

Answer 1

I got this working:

gotchas: 1. Had to load ajax_view.js, added this code snippet to theme file, check your view source to make sure ajax_view.js is loaded.

use \Drupal\views\ViewExecutable;
function customthemename_views_pre_render(ViewExecutable $view) {
  if (isset($view) && ($view->storage->id() == 'community_plan_update_news_feed')) {
    $view->element['#attached']['library'][] = 'pager-view';
  }
}

2. Had to write my own jquery once function in Drupal Behaviors file:

(function($, Drupal, drupalSettings) {
    'use strict';
    // turn off scrolltoTop
    if (Drupal.AjaxCommands) {
        Drupal.AjaxCommands.prototype.viewsScrollTop = null;
    }
    // Write your own jquery once function
    $.fn.once = function(processed_class) {
        if (typeof processed_class == 'undefined') {
            processed_class = 'processed';
        }
        return $(this).not('.' + processed_class).addClass(processed_class);
    };

    Drupal.behaviors.pagerFragments = {
        attach: function(context, settings) {
            var pager_links = $('.tab-content .pager__items li a').addClass("use-ajax");
        }
    };

    Drupal.behaviors.linkClick = {
        attach: function(context, settings) {
            $(".pager__items li a", context).on('click', function() {

                var ajaxObject = Drupal.ajax({
                    success: function(response) {
                        var viewHtml = response[1].data;
                        Drupal.settings.views = response[0].settings.views;
                        Drupal.attachBehaviors();
                        if (response[1].data !== undefined) {
                            $('.tab-content').html(viewHtml);
                        }
                        var ajaxPath = 'views/ajax';
                        var view_info = {
                            view_name: 'community_plan_update_news_feed',
                            view_display_id: 'general_plan_news',
                        };
                        var ajax_settings = {
                            submit: view_info,
                            url: ajaxPath,
                            cache: true,
                            event: 'click',
                            async: true,
                        };

                        Drupal.ajax(ajax_settings);
                        ajaxObject.success(response, "success");
                    },

                });
            });
            // reload sharethis icons
            if (__sharethis__ && __sharethis__.config) {
                __sharethis__.init(__sharethis__.config);
            }
            Drupal.behaviors.animate = {
                attach: function(context, settings) {
                    $(document).ajaxStart(function() {
                        $('.tab-content').fadeTo(200, 0);
                    });
                    $(document).ajaxSuccess(function() {
                        $('.tab-content').fadeTo(200, 1.0);
                    });
                }
            };
        }
    }
})(jQuery, Drupal, drupalSettings);