Control drawer with Javascript
Hello, I'm using Keen 3.0.2 and I'm trying to add a script on the same page that has the div to create the drawer. (Following instructions here: https://preview.keenthemes.com/html/keen/docs/general/drawer)
When I try using any of the script examples, it doesn't work and I see errors in the console.
E.g. Uncaught TypeError: drawer is null, etc.
If I simply add the div and add a button, the drawer functions as expected.
What I'm really trying to accomplish is to update the contents of the div (drawer) from an url using Hotwire Turbo (https://hotwired.dev/) and then open the drawer. I'm able to use a link to either update the div, or to display the drawer, but not both. I don't think anyone will want to press two buttons; one to update the drawer and one to display the drawer.
The code is being used to show the details of a row of data from a table. 50 rows are displayed on one page. As a hack, I also attempted to create a separate drawer for each row of data (50 drawers). This worked okay on a desktop browser, but it crashed the mobile browser on my iPhone.
Replies (1)
Hi Ryan,
If you added the Drawer HTML dynamically when the document is ready(core-js loaded and available) you will need to call KTComponents.init(), the global KTComponents initializer:
// On document ready
KTUtil.onDOMContentLoaded(function() {
// dynamically create drawer element and add to DOM
// KTComponents.init(); // initialize all newly added KT components
});If you need any further help please let us know.
Regards.
