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

emrhssla

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.

Seann

@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 );

sdetweil

@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

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…
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
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

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', ...
...
},