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.

Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(

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.

Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(
Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(