reload effects of design material

4

I have a site with design material, but when I update the page html with XHR the new content loses the javascript effect as I could do to reload the 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 optional array, 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);
};
    
asked by anonymous 06.06.2018 / 22:57

1 answer

2

Call the componentHandler.upgradeDom() function after Ajax adds new elements to the DOM. This will update the DOM in Material Design.

    
24.06.2018 / 22:18