Drupal 8, 9 and 10: Rendering views through Ajax

By hari, 27 November, 2022

Sometime we required to render the views through ajax in your desirable place in you web page. Here is a views/ajax API snippet to call the views with some arguments and views details.

Create views

Create a views by using Views UI and Enable Use Ajax

Grab required parameter's values

Collect following parameters from Views UI

view_name like article_list
view_display_id like block_1/page_1
view_args like 1,2 (if you use Content ID in Contextual filters)

Add custom js into the Drupal module via *.libraries.yml

Refer if you don't know how to add libraries.yml - Adding assets (CSS, JS) to a Drupal module via *.libraries.yml

Add below snippet to custom_module/custom_module.libraries.yml

render-views:
  version: 1.x
  header: true
  js:
    js/custom.js: {}
  dependencies:
    - core/drupal
    - core/jquery
    - core/jquery.once
    - core/drupalSettings

Add below content on custom_module/js/custom.js

Drupal.behaviors.renderViews = {
  attach: function (context, settings) {
    let contentWrapper = '#div-id';
    let args = 1;
    jQuery.ajax({
      'url': Drupal.url('views/ajax'),
      'type': 'POST',
      'data': {
        'view_name': 'article_list',
        'view_display_id': 'block_1',
        'view_args': args,
       },
      'dataType': 'json',
      'async': false,
      'success': function (response)  {
        if (response[3] !== undefined) {
          var viewHtml = response[3].data;

          // Remove previous views content and add new.
          jQuery(contentWrapper).html('');
          jQuery(contentWrapper).append(viewHtml);
        }
      }
     });
  }
};

Add library in target page by using hook_page_attachments

Add below snippet with your condition in custom_module/custom_module.module

/**
 * Implement_hook_page_attachments.
 */
function custom_module_page_attachments(array &$page) {
  if (/*YOUR CONDITION*/) {
    $page['#attached']['library'][] = 'custom_module/render-views';
  }
}

Add div with id div-id in Drupal twig template or rendered element

Reference

Drupal 8, 9 and 10: Rendering views through Ajax

Create views

Grab required parameter's values

Add custom js into the Drupal module via *.libraries.yml

Add library in target page by using hook_page_attachments

Tags