0

I am trying to add this simple script to my block

<script>
    const config = {
      sourceAssetAddress: null,
      sourceAmountDecimal: null,
      destinationAssetAddress: null,
      destinationAmountDecimal: null,
      apiKey: null,
      partnerContractAddress: null,
    };
    const nodeId = "totle-widget";
    !function(){const t=document.createElement("script");t.type="text/javascript";const e=()=>{TotleWidget.default.run(config,document.getElementById(nodeId))};t.readyState?t.onreadystatechange=function(){"loaded"!=t.readyState&&"complete"!=t.readyState||(t.onreadystatechange=null,e())}:t.onload=function(){e()},t.src="https://widget.totle.com/latest/dist.js",document.getElementsByTagName("head")[0].appendChild(t)}();
</script>

Problem I have is that I tried to add it as library like this

(function ($) {

    'use strict';

    /**
     * Attaches the behavior to bootstrap carousel view.
     */
    Drupal.behaviors.totle_widget = {
      attach: function (context, settings) {

        const config = {
            sourceAssetAddress: null,
            sourceAmountDecimal: null,
            destinationAssetAddress: null,
            destinationAmountDecimal: null,
            apiKey: null,
            partnerContractAddress: null,
          };
          const nodeId = 'totle-widget';
          !function(){const t=document.createElement("script");t.type="text/javascript";const e=()=>{TotleWidget.default.run(config,document.getElementById(nodeId))};t.readyState?t.onreadystatechange=function(){"loaded"!=t.readyState&&"complete"!=t.readyState||(t.onreadystatechange=null,e())}:t.onload=function(){e()},t.src="https://widget.totle.com/latest/dist.js",document.getElementsByTagName("head")[0].appendChild(t)}();
}}}(jQuery));

and somehow script goes beserk after this, loads many times and finaly breaks. It is attached to block in build and should be fine.

$build['#attached'] = array('library' => array('exch/totle'));

So I am not really sure what is wrong here. All I want to is to add this script somewhere in body of my html. Like when I add it directly into html.html.twig template of my theme and it works, but ofcourse I want to do it more in drupal way. What is wrong, how should I add this script to my library?

3
  • 1
    You need to use $.once(). See the documentation: drupal.org/docs/8/api/javascript-api/javascript-api-overview
    – Jaypan
    Commented Apr 22, 2020 at 21:21
  • Was thinking of once but thought it is not needed for this case, seems it does help to make it work after all :)
    – Blissful
    Commented Apr 22, 2020 at 21:38
  • 3
    Drupal.Behaviors is executes multiple times. This is why you need $.once().
    – Jaypan
    Commented Apr 22, 2020 at 21:40

1 Answer 1

1

Using once with proper definition helped.

(function ($) {

    'use strict';

    Drupal.behaviors.totle_widget = {
        attach: function (context, settings) {

          // Using once() so script is loaded only once
          $('#totle-widget', context).once('totle_widget').each(function () {

            const config = {
                sourceAssetAddress: null,
                sourceAmountDecimal: null,
                destinationAssetAddress: null,
                destinationAmountDecimal: null,
                apiKey: null,
                partnerContractAddress: null,
              };
              const nodeId = 'totle-widget';
              !function(){const t=document.createElement("script");t.type="text/javascript";const e=()=>{TotleWidget.default.run(config,document.getElementById(nodeId))};t.readyState?t.onreadystatechange=function(){"loaded"!=t.readyState&&"complete"!=t.readyState||(t.onreadystatechange=null,e())}:t.onload=function(){e()},t.src="https://widget.totle.com/latest/dist.js",document.getElementsByTagName("head")[0].appendChild(t)}();

          });
        }
      };

  }(jQuery));

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.