recharge design material effects

Asked

Viewed 117 times

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);
};
javascript ajax async xmlhttprequest material-design

  • 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.

  • I believe the code won’t influence, but I edited it. I don’t use jQuery.

  • 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.

  • @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

  • Try calling componentHandler.upgradeDom() after Ajax insert new elements on the page.

  • @dvd worked! Adds a quick response so you can accept and reward. But when using this function the whole page is rerenderized right?

  • Posted answer. ;)

Show 2 more comments

1 answer

2


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

  • Can you tell if this recharges the entire DOM or just what has been modified by the function?

  • Probably all the DOM. In my view there is no way to know what has been modified.

  • Then I’ll look at the documentation, thanks

Browser other questions tagged javascript ajax async xmlhttprequest material-design

You are not signed in. Login or sign up in order to post.