Dialogs are a quick and easy way to display additional information without reloading the entire page. Dialog boxes can display just some static text, any node or form of your page, a views page, or any custom markup you’ll feed them.<\/p>\n
In order to open some link\/node\/page in a modal window, you can add the following structure to the link within React:<\/p>\n
class=\"use-ajax\" data-dialog-type=\"modal\"<\/pre>\nOptionally you can also add data-dialog-options='{“width”:810, “dialogClass”: “modal-react”}’<\/strong> to style the modal.<\/p>\n
And ultimately, the link will look like this:<\/p>\n
<a\r\n href=\"\/admin\/content\"\r\n className=\"use-ajax\"\r\n data-dialog-type=\"modal\"\r\n data-dialog-options='{\"width\":810,\"dialogClass\": \"modal-react\"}'\r\n>Dialog link<\/a><\/pre>\nClick on this link, and in most cases it will open the dialog.<\/strong><\/h2>\n
But if in case the <a> tag is rendered after a few seconds of page load, within a popup, or after some AJAX call, clicking on the link will do nothing. To overcome this, we will use drupal behaviors to Ajaxify the links.<\/p>\n
Drupal has a \u201cbehaviors\u201d system to provide a modular and better way for attaching JavaScript functionality to place elements on a page. This Drupal Behavior is the object in JavaScript that Drupal initializes after the page loads and after every AJAX call in DOM.
\nThis drupal behavior can be called from React, let’s see how:<\/p>\nStep 1: Add Drupal Behaviour<\/h3>\n
First, we will create drupal behavior and write the code to Ajaxify the link within this. For this, create a file js\/custom.js<\/strong> and add the following code:<\/p>\n
(function ($, Drupal, drupalSettings) {\r\n Drupal.behaviors.custom_js = {\r\n ajaxifyLinks: function () {\r\n jQuery('.use-ajax:not(.ajax-processed)').addClass('ajax-processed').each(function () {\r\n var ajaxSettings = {\r\n url: jQuery(this).attr('href'),\r\n element: this\r\n };\r\n Drupal.attachBehaviors(this, ajaxSettings);\r\n });\r\n },\r\n attach: function (context, settings) {\r\n \/\/Some JS Code\r\n }\r\n }\r\n})(jQuery, Drupal, drupalSettings);<\/pre>\nSince we are getting new content after the page is loaded, once the new content is loaded, we call Drupal.attachBehaviors()<\/strong> to re-attach any javascript effects to this newly loaded content.<\/p>\n
Step 2: Update our libraries<\/h3>\n
Add custom.js before<\/strong> attaching the react bundle file<\/strong>. This is to ensure our drupal behavior function ajaxifyLinks<\/strong> is available when react is loaded.<\/p>\n
react-lib:\r\n version: 1.x\r\n js:\r\n js\/custom.js: {}\r\n js\/react-app\/dist\/app.bundle.js: { minified: true }<\/pre>\nStep 3: Call drupal behavior from react<\/h3>\n
Drupal.behaviors<\/strong> is a global variable that can be used directly within the React app. custom_js is the behavior name we created in the custom.js<\/strong> file, and ajaxifyLinks<\/strong> is a function within that file.<\/p>\n
Drupal.behaviors.custom_js.ajaxifyLinks();<\/pre>\nCall this after new content is loaded like in the below example link will be rendered after 2s, and drupal behavior will be called after that.<\/p>\n
import React, { useState, useEffect } from \"react\";\r\n\r\nconst App = () => {\r\n const [timer, setTimer] = useState(false);\r\n\r\n useEffect(() => {\r\n setTimeout(() => {\r\n setTimer(true);\r\n }, 2000);\r\n }, [])\r\n\r\n useEffect(() => {\r\n Drupal.behaviors.custom_js.ajaxifyLinks();\r\n }, [timer]);\r\n\r\n return (\r\n <>\r\n {timer && <a\r\n href=\"\/admin\/content\"\r\n className=\"use-ajax\"\r\n data-dialog-type=\"modal\"\r\n data-dialog-options='{\"width\":810,\"dialogClass\": \"modal-react\"}'\r\n >Dialog link<\/a>}\r\n <\/>\r\n )\r\n}\r\nexport default App;<\/pre>\n