1

Using Dialog API and advice from @leymannx, I added this link to a node (node99):

<a class="use-ajax" data-dialog-options="{&quot;width&quot;:600}" data-dialog-type="modal" href="/node/27">Last minute information</a>

and it works fine: when clicked, the dialog box shows up!

Now, I'd like to have the dialog box displayed automatically when the node is reached without having to click the link.
@No Sssweat suggested to make jQuery to click the link for you on page load $(".use-ajax").click();

After some errors ($ is not a function), I finally used this:

(function ($) {
  $('.use-ajax').trigger("click");
})(jQuery);

It works but not as expected: the node 27 (the link has href="/node/27") is displayed instead of node99, not in a modal over node99.
What am I missing?

2
  • Try to add an id and target with it, maybe use-ajax class used else where, add id="my-dialog-modal" and in the js change it to $('#my-dialog-modal').trigger("click"); – berramou Apr 13 '20 at 12:33
  • Nothing better. Even worse: I don't have anymore node27 replacing node99. And when I go back to previous version - with $('.use-ajax'), same result: I'm stuck on node99. I'm confused... – gbmapo Apr 13 '20 at 13:43
1

Your JS needs to be formatted like this:

(function ($, Drupal) {
  Drupal.behaviors.myThemeBehavior = {
    attach: function (context, settings) {
      $('.use-ajax', context).once('auto-open').each(function () {
        $(this).click();
      });
    }
  };
})(jQuery, Drupal);

Your library needs to be defined like this:

example:
  js:
    js/example.js: {}
  dependencies:
    - core/jquery #Just ot be save
    - core/drupal.dialog.ajax #Required for dialogs

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.