MagicMirror Forum
    • Recent
    • Tags
    • Unsolved
    • Solved
    • MagicMirror² Repository
    • Documentation
    • 3rd-Party-Modules
    • Donate
    • Discord
    • Register
    • Login
    A New Chapter for MagicMirror: The Community Takes the Lead
    Read the statement by Michael Teeuw here.

    wrapper.innerHTML

    Scheduled Pinned Locked Moved Troubleshooting
    4 Posts 3 Posters 3.0k Views 3 Watching
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • A Offline
      adadws
      last edited by

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

      For example, start: function()

      strawberry 3.141S 1 Reply Last reply Reply Quote 0
      • strawberry 3.141S Offline
        strawberry 3.141 Project Sponsor Module Developer @adadws
        last edited by

        @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

        Please create a github issue if you need help, so I can keep track

        1 Reply Last reply Reply Quote 1
        • D Offline
          doubleT Module Developer
          last edited by

          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.

          1 Reply Last reply Reply Quote 2
          • D Offline
            doubleT Module Developer
            last edited by

            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 Reply Last reply Reply Quote 1
            • 1 / 1
            • First post
              Last post
            Enjoying MagicMirror? Please consider a donation!
            MagicMirror created by Michael Teeuw.
            Forum managed by Sam, technical setup by Karsten.
            This forum is using NodeBB as its core | Contributors
            Contact | Privacy Policy