How can I avoid the output of my module is cached?

Question

I have a module I wrote that prints dynamic data for JavaScript variables.

function javascript_api_page_attachments(array &$page) {
$page['#attached']['html_head'][] = [
        // The data.
    [
        '#type' => 'html_tag',
        // The HTML tag to add, in this case a  tag.
        '#tag' => 'script',
        // The value of the HTML tag, here we want to end up with alert("Hello world!");.
        '#value' => javascript_api_print_parameters(),

    ],
    // A key, to make it possible to recognize this HTML  element when altering.
    'hello-world'
];}

My problem is when Drupal caches the page.Need to stop caching my pages in drupal.

How can I avoid the output of my module is cached?

Answer 1

As Eyal mentioned, you can pass the variables from your module to jQuery like this:

mymodule.module

function mymodule_page_attachments(array &$attachments) {
    $attachments['#attached']['library'][] = 'mymodule/auto';
    $attachments['#attached']['drupalSettings']['cool'] = 'hello world';     
  }
}

mymodule.libraries.yml

auto:
  version: 1.0
  js:
    js/auto.js: {}
  dependencies:
      - core/jquery

auto.js

(function($, Drupal, drupalSettings) {

    $( document ).ready(function() {
      alert(drupalSettings.cool);
    });

})(jQuery, Drupal, drupalSettings);

This will show a js alert message saying "hello world".

Answer 2

I suggest you first create a Js file, put your Js function there then pass desire variable ( or object) to it with using drupalSettings and try to get variable(s) in your js files. ( I guess you are know how attach js libraries to page if not take a took at Helper1 and Helper2

$page['#attached']['drupalSettings']['myvars'] = $myvars;

Then Drupal.drupalSettings.myvar will be exists (it's will be dynamic and not cached) in your Js file.

Answer 3

To disable the page cache for anonymous users try the first method:

// Deny any page caching on the current request.    
\Drupal::service('page_cache_kill_switch')->trigger();

Else, you need to set max-age 0 in e.g. hook_node_view().

function yourmodule_node_view(array &$build, NodeInterface $node, $display, $view_mode) {
  if ($node->getType() == 'yourtype' && $view_mode == 'full') {
    $build['#cache']['max-age'] = 0;
  }
}

OR, if you like to remove cache from route, provide no_cache in routing.yml of your module.

newsletter.signup:
  path: '/abc'
  defaults:
    _controller: '\Drupal\your_module\Controller\your_controller::render'
  requirements:
    _permission: 'access content'
  options:
    no_cache: TRUE

Answer 4

Thanks for the help i came up to create a new page with a controller and this page will be attached to the page .

<?php

namespace Drupal\javascript_api\Controller;

use Drupal\Core\Controller\ControllerBase;
use Symfony\Component\HttpFoundation\Response;

/**
 * An example controller.
 */
class PageParamsController extends ControllerBase {
    public function build(){
        $result = javascript_api_print_parameters();
        return new Response($result , 200 , array('Content-Type'=> 'application/javascript'));
    }}


pageparams:
  # Block the page from being loaded until Modernizr is initialized.
  header: true
  version: "v1"
  js:
    /javascript_api/pageparms.js: { preprocess: 0, weight: -21, minified: true }

Now i have a dyanmic js that i can put on the page and to use my Variable in the global area.

Thanks All :)