1

How can I move the following markup after the one loading jQuery and drupalsettings?

<script src="https://abc.ai/js/w?key=abc.jdnwVFfn4YUZA0in"></script>

Actually, the order is the one in the following markup.

<script type="application/json" data-drupal-selector="drupal-settings-json">{"path":{"baseUrl":"\/","scriptPath":null,"pathPrefix":"","currentPath":"node","currentPathIsAdmin":false,"isFront":true,"currentLanguage":"en"},"pluralDelimiter":"\u0003","ajaxTrustedUrl":{"\/search\/node":true},"user":{"uid":0,"permissionsHash":"a791675a6fdb4f639fabce88c7e91295566b58e25f936b9d181582d9321c503f"}}</script>
<script src="/core/assets/vendor/jquery/jquery.min.js?v=3.2.1"></script>
<script src="/core/misc/drupalSettingsLoader.js?v=8.5.1"></script>
<script src="/modules/abc/js/abc.js?v=1.x"></script>

I used hook_page_bottom() to attach the script in the abc module.

function acobot_page_bottom(array &$attachments) {
  $attachments['#attached']['library'][] = 'acobot/acobot-initialise';
  $attachments['acobot'][] = [
    [
      '#type' => 'html_tag',
      '#tag' => 'script',
      '#attributes' => array('src' => 'https://acobot.ai/js/w?key=' . $token),
    ],
    'acobot-token',
  ];
}

The content of the abc.libraries.yml file is the following.

abc-initialise:
  version: 1.x
  js:
    js/abc.js: {}
  dependencies:
    - core/jquery
    - core/drupalSettings

I added weight in the below code(instead of #attached in hook_page_bottom) but it does not change the position .

function acobot_library_info_alter(&$libraries, $extension) {
$libraries['acobot'] = array(
  'version' =>'1.x',
  'js' => array(
     'acobot/acobot.js' => array(
        '#weight' => 100,
     ),
   'dependencies' => array(
     0 => 'core/jquery',
     1 => 'core/drupalSettings'
   )  
  ),   
);

  return $libraries;
}

3 Answers 3

1

I have an alternative idea: provide the dynamic value in drupal settings, define your main script as library, and get the setting in run time.

 '#attached' => [
  'library'        => [
    'mymodule/mylibrary',
  ],
  'drupalSettings' => [
    'myModule' => [
      'key' => 'value',
    ],
  ],
],

Then in your library script, get the setting and use it.

var data = drupalSettings.myModule.key;

You can see how to create a dynamic script tag if needed here: https://stackoverflow.com/questions/20737442/document-writescript-throws-unexpected-token-illegal

1
  • Hi @Alexei Rayu, xI was able to find out the solution using your answer! and other answers made me overhelmed by the support I got.!
    – harshal
    Apr 19, 2018 at 11:50
4

The problem is that you're adding it to page bottom region, which is above the JS.

What exactly is $token, is it something personalized or is it a global license key/identifier for the whole site? If the second, then use a library alter hook to load it instead.

See https://cgit.drupalcode.org/jw_player/tree/jw_player.module#n129 for example, that dynamically alters the library definition to either load from a CDN with a dynamic url or a local path that can vary based on input from the libraries module.

8
  • ,token is dynamic value , I add based on some logic so its global license key /identifier for the whole site
    – harshal
    Apr 17, 2018 at 6:44
  • +1 for showing the code used from an existing module.
    – apaderno
    Apr 17, 2018 at 6:51
  • "I add based on some logic so its global license key /identifier for the whole site ". Yes in that case, it's the same as jw_player, and you can alter it once and then just use the library.
    – Berdir
    Apr 17, 2018 at 9:27
  • Hi @berdir , I checked the code, all I want to do is place the jquery(after the script is added where I have the key at the bottom but I am unable to do it , can u elaborate a bit more
    – harshal
    Apr 17, 2018 at 10:27
  • Hi @berdir , I have edited my question with my current attempt on adding it in hook_library_info_alter
    – harshal
    Apr 17, 2018 at 10:32
1

To add Javascript to a theme that depends on jQuery, you should define it as a library and add a dependency to "core/jquery";

See: https://www.drupal.org/docs/8/theming-drupal-8/adding-stylesheets-css-and-javascript-js-to-a-drupal-8-theme

Remember, Drupal 8 no longer loads jQuery on all pages by default, so for example if cuddly-slider needs JQuery you must declare a dependency on the core library that contains jQuery (Drupal core provides jQuery, not a module or theme). Declare the dependency with an extension name followed by a slash, followed by the library name, in this case core/jquery. If another other library required cuddly-slider it would declare:fluffiness/cuddly-slider, the theme name, followed by the library name. You cannot declare an individual file as a dependency, only a library.

So, to make jQuery available for cuddly-slider, we update the above to:

# fluffiness.libraries.yml
cuddly-slider:
  version: 1.x
  css:
    theme:
      css/cuddly-slider.css: {}
  js:
    js/cuddly-slider.js: {}
  dependencies:
    - core/jquery

So following your example:

abc-initialise:
  version: 1.x
  js:
    js/abc.js: {}
    'https://abc.ai/js/w?key=abc.jdnwVFfn4YUZA0in':
      type: external
  dependencies:
    - core/jquery
    - core/drupalSettings
10
  • Hi @alfred, but the question here is how I can place the jquery script code above script added in hook_page_bottom ,currently jquery is at the bottom which is what I am looking to change,thanks for your info anways
    – harshal
    Apr 17, 2018 at 9:16
  • If you have jquery as a dependency your script will come after it. Apr 17, 2018 at 9:25
  • Hi @alfred but in my case the jquery loads after my script ,please see the code in the question where you will find it out
    – harshal
    Apr 17, 2018 at 9:27
  • But you are loading the external js directly, not as part of the library. It needs to be defined in the library as well. Apr 17, 2018 at 9:43
  • Hi @alfred, what should be the value of key when I define this script : <script src="abc.ai/js/w?key=abc.jdnwVFfn4YUZA0in"></script> in the .libraries.yml
    – harshal
    Apr 17, 2018 at 9:51

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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