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;
}
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

  • 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 '18 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.

  • ,token is dynamic value , I add based on some logic so its global license key /identifier for the whole site – harshal Apr 17 '18 at 6:44
  • +1 for showing the code used from an existing module. – kiamlaluno Apr 17 '18 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 '18 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 '18 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 '18 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
  • 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 '18 at 9:16
  • If you have jquery as a dependency your script will come after it. – Alfred Armstrong Apr 17 '18 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 '18 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. – Alfred Armstrong Apr 17 '18 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 '18 at 9:51

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.