elFlashor elFlashor - 5 months ago 13x
Javascript Question

MaterialDesign, JS behaviors lost when loaded through ajax

I'm starting with Ajax, jQuery and all that, sorry if I'm making stupid mistakes here.
I'm building a website using PHP/JS, and using Google's Material Design comportments and CSS: https://getmdl.io/components/

My pages are built that way:
- index.php, which is the main page (with links to css, js files, etc...)
- that contains a div where other php "modules" (different php files that contains only some neede parts) are loaded.

My issue is that in these loaded pages, every "special" behaviors of Material Design classes are completely lost (no "ripple effect" on buttons, textfield labels that doesn't disappear thus overlapping with the textfield content, etc...). The css styles are good (material design colors are displayed, visually things works well) but not the behaviors when clicked, etc...

Any idea how I could fix that?
Thanks a lot!


Found the solution after diving into jQuery githubs issues reports. Is seems the components are not being DOM upgraded when loaded through AJAX.

The following call has to be added in the pages loaded through AJAX:


Either through a function call or ajaxComplete a listener, for example:

 $('body').ajaxComplete(function () {