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.

    Uncaught TypeError: this.sendNotification is not a function at HTMLParagraphElement.

    Scheduled Pinned Locked Moved Unsolved Troubleshooting
    4 Posts 4 Posters 1.8k Views 4 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.
    • E Offline
      emrhssla
      last edited by

      Module.register("MMM-Test", {
        defaults: {},
        start: function (){},
      
      getDom: function() {
        var element = document.createElement("div")
        element.className = "myContent"
        element.innerHTML = "Hello, World! " + this.config.foo
        var subElement = document.createElement("p")
        subElement.innerHTML = "Test" 
        subElement.id = "TEST"
        element.appendChild(subElement)
        return element
      },
      
      
      notificationReceived: function(notification, payload, sender) {
        switch(notification) {
          case "DOM_OBJECTS_CREATED":
          var elem = document.getElementById("TEST")
          elem.addEventListener("click", function(){
          elem.innerHTML = "TEST2"
          this.sendNotification('CHANGE_POSITIONS', 
          modules = {
              'clock':{
                  visible: 'true',
                  position: 'top_left',
                  },
             }
            )
          })     
            break
        }
      },
      
      
      

      The position of the clock was top_right. As a result of the execution, clicking on a letter changes the letter but does not change the position of the clock module. What is the reason?

      this.sendNotification('CHANGE_POSITIONS—) is MMM-Dynamic-Modules

      When clicked on the console, the following words appeared:
      MMM-Test.js:23 Uncaught TypeError: this.sendNotification is not a function
      at HTMLParagraphElement.

      S ? 2 Replies Last reply Reply Quote 0
      • S Offline
        Seann Module Developer @emrhssla
        last edited by

        @emrhssla This is a common issue for most modules, most people solve the issue by adding “self = this;” as the first line of the function they require the send notification in. Personally I declare a global variable outside of the module; e.g.:

        var Test;
        Module.register("MMM-Test", {
        

        then inside the start function assign it’s value to be the module.

        start: function(){
        Test = this;
        }
        

        then to send the notification you would just use:

        Test.sendNotification(blah blah );
        
        1 Reply Last reply Reply Quote 0
        • S Offline
          sdetweil
          last edited by

          @emrhssla said in Uncaught TypeError: this.sendNotification is not a function at HTMLParagraphElement.:

          the word ‘this’ has a defined meaning… context of THIS object at the time of execution.

          the issue is that at that moment in time the code is inside the eventhandler, NOT your module. (the routine that did the addEventListener() ended minutes ago) so it has its OWN ‘this’ context… there are three ways to get back to the module context

          1. declare a global variable (self) and use that so the execution processor knows what you want, watch out, global variables are global, names may collide across modules…

          2. use a different function declaration () => {} instead of function(){}… tells the execution processor to use the surrounding context …these are called Arrow functions… Arrow functions do not have their own ‘this’
            BUT you need to pass params on the function call to get access to the element where the event happened

          3. use the bind() operator to add the outer module context to the event context
            function(){}.bind({inner_varname:outer_varname)… .bind({module_this:this})

          elem.addEventListener(“click”,
          function(){
          elem.innerHTML = “TEST2”
          this.sendNotification(‘CHANGE_POSITIONS’,
          modules = {
          ‘clock’:{
          visible: ‘true’,
          position: ‘top_left’,
          },
          }
          )
          }
          )

          you will have to research these and decide how to do it… each has a different implementation and code maintenance impact

          Sam

          How to add modules

          learning how to use browser developers window for css changes

          1 Reply Last reply Reply Quote 1
          • ? Offline
            A Former User @emrhssla
            last edited by

            Try this;

            notificationReceived: function(notification, payload, sender) {
              switch(notification) {
                case "DOM_OBJECTS_CREATED":
                var elem = document.getElementById("TEST")
                elem.addEventListener("click", () => {
                this.sendNotification('CHANGE_POSITIONS', ...
            ...
            },
            

            Or,

            notificationReceived: function(notification, payload, sender) {
              switch(notification) {
                case "DOM_OBJECTS_CREATED":
                var elem = document.getElementById("TEST")
                var that = this 
                elem.addEventListener("click", function() {
                that.sendNotification('CHANGE_POSITIONS', ...
            ...
            },
            
            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