2

I try to use jQuery UI dialog.
Based on this, I put this in a node: 

<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
    $( function() {
      $( "#dialog" ).dialog();
    } );
</script>
<div id="dialog" title="Basic dialog">
    <p>
        This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.
    </p>
</div>
<p>
    Some stuff...
</p>

And it works! The popup window shows up automatically when the node is displayed.
But I noticed that jQuery is deprecated in Drupal 8.
So, how should I do the same thing in a more "Drupal" way?

[EDIT] Making progress...
@leymannx Using the 1rst example of Ajax Dialog Boxes page you provided, I get this working (see the screen capture).
My next step: how to have the dialog box displayed automatically when the page is reached without having to click the link? enter image description here

Improve this question

1 Answer 1

Reset to default
4

jQuery hasn't been deprecated. Some unused jQuery UI components have been deprecated in 8.8 and will be removed in Drupal 9.0. core/jquery.ui.dialog is not among them.

Nonetheless there's the new Dialog API. For that you have to require the core/drupal.dialog library or the core/drupal.dialog.ajax library for more advanced stuff. Some examples can be found in the docs on Ajax Dialog Boxes. The following sample requires the core/drupal.dialog.ajax library.

This link opens /node/1 in a modal dialog box:

<a class="use-ajax" 
    data-dialog-options="{&quot;width&quot;:400}" 
    data-dialog-type="modal" 
    href="/node/1">
    First node displayed in modal dialog.
</a>

What you currently do in your code sample hasn't much to do with Drupal at all. To do it the Drupal way check the docs on adding JS/CSS to your module or theme first. You could attach the library simply to your theme or directly to all nodes of a given type for example.

Improve this answer
6
  • I hear you. I understand that I have to attach the library ($something['#attached']['library'][] = 'core/drupal.dialog.ajax';). But I don't know how to do that when I want it only on a specific node. Do I have to create a .js file with $( function() {$( "#dialog" ).dialog();} );in it and add both this file and the core/drupal.dialog.ajax dependencie to my module library? In this case, how to choose the node I want to display the popup when the nodeis displayed?
    – gbmapo
    Commented Apr 12, 2020 at 12:56
  • 1
    @gbmapo – I found drupal.org/docs/8/api/ajax-api/ajax-dialog-boxes where you can find more information on how to actually use it. From where you attach the library depends a little bit on the circumstances. Sounds a bit as if you might want to attach it to some field that references the other node maybe. But you could simply add it to your themes's info file as well.
    – leymannx
    Commented Apr 12, 2020 at 13:35
  • I updated my question with the last results I get using your advice...
    – gbmapo
    Commented Apr 12, 2020 at 15:06
  • 1
    @gbmapo you can make jQuery to click the link for you on page load $(".use-ajax").click();
    – No Sssweat
    Commented Apr 12, 2020 at 15:24
  • 1
    Make a new question on that, not enough room in comments to properly explain.
    – No Sssweat
    Commented Apr 12, 2020 at 21:28

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.