0

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);
8
  • Have you tried changing the method to POST? Sep 7 '18 at 0:48
  • 1
    Even if you manage to get a 200 response, how do you intend to execute the ajax commands in the json data? Try to use Drupal.ajax like the Views js library ajax_view.js does, then the json will be processed automatically.
    – 4k4
    Sep 7 '18 at 9:34
  • I agree with @4k4 Sep 7 '18 at 12:28
  • @4k4 I updated the question with what we tried. I tried using Drupal.ajax but that did not insert the view block into the <div class="some-element">. Sep 7 '18 at 16:38
  • I've started my last comment with "Even ..." to suggest this is not an easy task. You need to investigate if the endpoint /views/ajax provides the information you want and which arguments you have to use to get it. It might be easier to deliver the block in the first page load in a hidden state and show it in javascript.
    – 4k4
    Sep 9 '18 at 9:58
0

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';
  }
}
  1. 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);

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.