4. wrapper.innerHTML
MagicMirror² v2.5.0 is available! For more information about this release, check out this topic.

wrapper.innerHTML

  • A

    wrapper.innerHTML = ""
    Is this code available only in getDom?
    I want to use this in other functions.

    For example, start: function()

    0 1 Reply

  • @adadws in the start function your module is not rendered yet. so it doesnt exist, if your trying for module specific stuff, but it would exist for elements like the body

    1
  • D
    Module Developer

    In this context, yes.

    “wrapper” is just a variable that holds the content of the (new) HTML element that you create there and “getDom” grabs the content that is to be put into the DOM (Document Object Model, the raw content/structure), => rendered.

    Example 1, basic:

    getDom: function() {
    var wrapper = document.createElement("div");
    wrapper.setAttribute"id", "my-content");
//  It's always a good idea to make an element addressable
    wrapper.innerHTML = "Hello World!";
    return wrapper;
}

    getDom is called upon starting, grabbing the elements and putting them in place and if you want to change something later on, you need to call “this.updateDom()” to render it again with the new content.

    Example 2, updating:

    start: function() {
    var self = this;
    Log.info("Starting module: " + this.name);
    this.myContent = "nothing yet"; // global variable, available to all functions
    setTimeout(function() {
        this.buildContent(self);  // this will call the function "buildContent"
    }, 5 * 1000);                 // 5 seconds after the start (5 * 1000 ms)
},
getDom: function() {
    var wrapper = document.createElement("div");
    wrapper.setAttribute"id", "my-content");
    wrapper.innerHTML = this.myContent ; // will show "nothing yet" at the beginning
    return wrapper;
},
buildContent: function(self) { // see above, this will be started after 5 seconds
//  do your content building
    this.myContent = "New content!"; // changes the value of the global variable
    self.updateDom(); // call for the DOM to be updated, thus showing the new content
}

    I hope that’s somewhat understandable.

    2
  • D
    Module Developer

    I was interrupted when I wrote my answer and forgot to add what I was initially going to say. I decided to write a new reply instead of editing the above, not to confuse anyone and keep the two apart.

    There is another way to update the content of an element (that has been created in getDom before):

    Example 3, .innerHTML:

    start: function() {
// stays the same as above
    setTimeout(function() {
        this.magicContent(self);  // this will call the function "magicContent"
    }, 10 * 1000);                // 10 seconds after the start, 5 seconds after "buildContent"
},
// we don't touch getDom or buildContent!
magicContent: function() {
    document.getElementById("my-content").innerHTML = "Changed <i><b>yet again!";
}

    document.getElementById(“my-content”).innerHTML = “content”; will update the selected element (the div with the id “my-content”) with the selected content without having to call updateDom().

    Keep in mind that this will only work on elements that were created before in getDom, so it will not work within start: function() …

    Caution! This can also update elements of other modules, so be careful and use unique IDs.

    1