Super Sale Limited Time 50% OFF for All-Access Plans
Save 50% Now

Lost functionality after HTML reloaded with AJAX call


Hi! Couldn't find an answer on this in here or stackoverflow, but I guess is something common.

I'm loading some content dynamically using jQuery $.get function.

If you have for example $('.element').click(some function); and you reload the element with AJAX, that directive get lost. You can easily make it work by attaching the function to the body instead: $('body').on('click', '.element', some function);

But I don't know how to replicate that with Metronic managed functions in scripts.bundle.js. Specifically I'm reloading some HTML with data-kt-menu-trigger="click" inside, and that functionality get lost.

Any help would be much appreciated!


Text formatting options
Submit
Click any option to insert into your comment. Select text first to wrap it.
  • **text** to make things bold
  • *text* to emphasize
  • ### Heading to make headings
  • [link text](url) for links
  • ![alt text](image-url) to paste in an image
  • - item to make a list
  • 1. item to make an ordered list
  • > quote to quote somebody
  • `code` for single line of code
  • ```js ... ``` for JS code block
  • ```html ... ``` for HTML code block
  • ```scss ... ``` for SCSS code block
  • ```php ... ``` for PHP code block
  • --- for a horizontal rule
  • happy  :)
  • shocked  :|
  • sad  :(

Replies (4)


Losing functionality after reloading HTML with an AJAX call can be frustrating. I’ve resolved this by ensuring that used trimble target id event handlers and scripts are correctly reinitialized after the AJAX call completes. Debugging the JavaScript code and checking for any issues with the HTML elements that are being dynamically loaded also helps.



Hi,

Please call KTComponents.init() method to initialize newly populated components via Ajax on Ajax complete event.

For more info please check this guide.

Regards.



Worked like a charm! Thanks for the quick answer.



Hi happy,

Glad to help you out. All the best with your project!

Regards.


Your Support Matters!

We will highly appreciate your Metronic Review on Themeforest.
Please go to Themeforest Downloads page, select Metronic & leave your feedback.
Text formatting options
Submit
Click any option to insert into your comment. Select text first to wrap it.
  • **text** to make things bold
  • *text* to emphasize
  • ### Heading to make headings
  • [link text](url) for links
  • ![alt text](image-url) to paste in an image
  • - item to make a list
  • 1. item to make an ordered list
  • > quote to quote somebody
  • `code` for single line of code
  • ```js ... ``` for JS code block
  • ```html ... ``` for HTML code block
  • ```scss ... ``` for SCSS code block
  • ```php ... ``` for PHP code block
  • --- for a horizontal rule
  • happy  :)
  • shocked  :|
  • sad  :(
Text formatting options
Submit
Click any option to insert into your comment. Select text first to wrap it.
  • **text** to make things bold
  • *text* to emphasize
  • ### Heading to make headings
  • [link text](url) for links
  • ![alt text](image-url) to paste in an image
  • - item to make a list
  • 1. item to make an ordered list
  • > quote to quote somebody
  • `code` for single line of code
  • ```js ... ``` for JS code block
  • ```html ... ``` for HTML code block
  • ```scss ... ``` for SCSS code block
  • ```php ... ``` for PHP code block
  • --- for a horizontal rule
  • happy  :)
  • shocked  :|
  • sad  :(