I'm building a module which applies some changes to class and other attributes via jquery, more exactly, I'm adding the use-ajax class and data-dialog attributes to make a link use the dialog api. The problem is that backdrop processes the page, looking for class='use-ajax', before I apply my changes, so my links don't open in a dialog frame.
How can I invert the order, so I make sure I apply my class before backdrop.ajax processes the page? Or can I just call backdrop.ajax somehow within my jquery to processes it again?
Thanks.
Comments
You could try something like (in your custom JS code):
$(function() { Backdrop.attachBehaviors(document, Backdrop.settings); }This will reattach all JS behaviors to the page. I don't know if this may cause any issues - I would assume that behaviors are smart enough not to re-attach event listeners and such. Try and see if that works. (also, hopefully Backdrop.settings will already be available at that point).
Alternatively, try attaching your custom JS script in the footer rather than in the header of the page, to see if that makes it run after the rest. See documentation for backdrop_add_js
Thanks @argiepiano. This worked somehow, at least the dialog opened, but it interfered with other modules, which started to make weird things. (The notification bar appears in the middle of the page...)
This is the error shown in the console:
ajax.js?v=1.23.0:186 Uncaught TypeError: Cannot read properties of undefined (reading 'replace') at new Backdrop.ajax (ajax.js?v=1.23.0:186:23)About putting my script in the footer, I don't think it will work. I actually need the other way around, to be sure that backdrop.ajax run after my script.
Need to keep looking up....
So, here's another thought. (My suggestion above is rather hacky).
First, be sure your JS code follows the standard Backdrop "behaviors" and "attach" syntax. Take a look at the Examples for Developers module, specifically at the js_example.module
Second, after you have well-formed js code, you can use the option 'group' or 'weight' of backdrop_add_js() when you add your js file. Specify 'group' => JS_DEFAULT in the options array (I believe) will handle the attachment of your behaviors AFTER attaching all JS libraries.
So, question after my comment above: how are you actually loading your JS in the page? I suspect that this is what's causing the issue of the dialog library not being loaded before you execute your code.
I'm loading in a hook_preprocess_page() function. I actually just modified the extlink module, so it adds the proper class and data attributes to display internal links in a dialog.
I'll have a go. Thanks. I'll let know if that worked.
Another thought (also a bit hacky). Lift the code from ajax.js under
$('.use-ajax:not(.ajax-processed)')and use it in your own code. This function is responsible for processing the use-ajax links.Robert, before you put a lot of time into making this work, be aware that there are issues with dialogs happening on the front end theme. They break the styling. This is an issue that has been reported, and for which there is no solution yet. See:
https://github.com/backdrop/backdrop-issues/issues/5250
Thanks, Alejandro. That's good to know, indeed!