4
I have a site with material design, but when I update the html of the page with XHR the new content loses the effect of javascript as I could to reload mdl?
To make the change between the view, I use two functions, in the first step the file url, the id of the element that will contain the html and an array, opicional, where I can insert javascript files
function getView(url, elementId, array = []) {
let req = new XMLHttpRequest();
req.open("get", url, true);
req.setRequestHeader("Access-Control-Allow-Origin","*");
req.setRequestHeader("Content-Type","text/html");
req.setRequestHeader("Accept","text/html");
req.onload = function() {
document.getElementById(elementId).innerHTML = this.responseText;
for(let item of array) {
insertJS(item);
}
};
req.send();
};
function insertJS(url) {
let script = document.createElement('script');
script.type = 'text/javascript';
script.async = true;
script.src = url;
let element = document.getElementsByTagName('script')[0];
element.parentNode.insertBefore(script, element);
};
If possible post your code. If using
jQuery
, prefers to use the method .on or create a function to initialize the effects and every time there is an update, just run the function created.– Valdeir Psr
I believe the code won’t influence, but I edited it. I don’t use jQuery.
– Costamilam
It would be nice to have the whole code, to know where you’re using the material design, if you have some framework behind it, some other language being used together, like this starting the components, more references in general. We won’t be able to help, as your question shows us to append 2 functions that without more context we won’t be able to help.
– Caio Koiti
@Caiokoiti does not use any framework or library, and the mdl files (css and js) are being called in head normally
<script defer src="..."></script> <link rel="stylesheet" href="..">
I tried it without Defer and async but it didn’t work– Costamilam
Try calling
componentHandler.upgradeDom()
after Ajax insert new elements on the page.– Sam
@dvd worked! Adds a quick response so you can accept and reward. But when using this function the whole page is rerenderized right?
– Costamilam
Posted answer. ;)
– Sam