Node Red textarea with template node" No msg.payload input possible after changing content of textarea"

Dashboard
1

The attached Node Red Flow with the attached HTML and Javascript Code is working as follows:

  1. msg.payload sending from the buttons is displayed in the textarea and can also be send out correct to the debug node
  2. I also can change the content of the textarea and then send out correct to the debug node
    But after I have changed the content of the textarea, all further msg.payload inputs from the Buttons are ignored until I make re deployment of Node Red.

Node Red Flow
Node Red Flow816×144 7.31 KB

Content of Textarea Node

 <textarea name="textentered" id="textentered" rows="8" cols="25">{{msg.payload}}</textarea>
      <input type="submit" value="Save Comments" ng-click="send({payload:test()})">
      
<script>

(function(scope) {

    scope.test = function() {
 
        var text = document.getElementById("textentered").value;
        alert(text);
        return "E:"+text;
    }

    
})(scope)

</script>

I have made several modification but never could fix this problem. So I hope somebody in this community can help me.

[{"id":"284cd852.c67658","type":"tab","label":"Test Textarea","disabled":false,"info":""},{"id":"8e7a3e8e.4c077","type":"ui_button","z":"284cd852.c67658","name":"Input \"Test Text\"","group":"67a39dee.c646e4","order":1,"width":"3","height":"1","passthru":false,"label":"Test Text","tooltip":"","color":"","bgcolor":"","className":"","icon":"","payload":"TestText","payloadType":"str","topic":"","topicType":"str","x":210,"y":320,"wires":[["2eff8061.69559"]]},{"id":"fae42a25.a6e348","type":"ui_button","z":"284cd852.c67658","name":"Input \"\"","group":"67a39dee.c646e4","order":2,"width":"3","height":"1","passthru":false,"label":"^^","tooltip":"","color":"","bgcolor":"","className":"","icon":"","payload":" ","payloadType":"str","topic":"","topicType":"str","x":180,"y":380,"wires":[["2eff8061.69559"]]},{"id":"53d4f9b7.899c88","type":"debug","z":"284cd852.c67658","name":"Content of textarea","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"payload","targetType":"msg","statusVal":"","statusType":"auto","x":710,"y":380,"wires":[]},{"id":"2eff8061.69559","type":"ui_template","z":"284cd852.c67658","group":"67a39dee.c646e4","name":"Textarea","order":3,"width":"0","height":"0","format":"      <textarea name=\"textentered\" id=\"textentered\" rows=\"8\" cols=\"25\">{{msg.payload}}</textarea>\n      <input type=\"submit\" value=\"Save Comments\" ng-click=\"send({payload:test()})\">\n      \n<script>\n\n(function(scope) {\n\n    scope.test = function() {\n \n        var text = document.getElementById(\"textentered\").value;\n        alert(text);\n        return \"E:\"+text;\n    }\n\n    \n})(scope)\n\n</script>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","className":"","x":500,"y":380,"wires":[["53d4f9b7.899c88"]]},{"id":"67a39dee.c646e4","type":"ui_group","name":"Date Range","tab":"660a703d.ea902","order":2,"disp":true,"width":"6","collapse":false,"className":""},{"id":"660a703d.ea902","type":"ui_tab","name":"Test Multiline Input","icon":"fa-bar-chart","order":4,"disabled":false,"hidden":false}]
2

I now alone have found the solution. Problem: HTML code for Dashboard already had the new msg.payload, but Dashboard was not refreshed.
With Dashboard refresh nodes at each msg.input it works fine !!!

image

3

You can always just write to the document element.

      <textarea name="textentered" id="textentered"  rows="8" cols="25">No message received</textarea>
      <input type="submit" value="Save Comments" ng-click="test()">
      
<script>

(function(scope) {
  const element = document.getElementById("textentered");
  
  scope.$watch('msg', function(msg) {
    if (msg.payload) {
      // Do something when msg arrives
      element.value = msg.payload;
    }
  })
  
  scope.test = function() {
        var text = element.value;
        scope.send({payload: "E:"+text});
    }
})(scope)

</script>

example flow

[{"id":"8e7a3e8e.4c077","type":"ui_button","z":"284cd852.c67658","name":"Input \"Test Text\"","group":"67a39dee.c646e4","order":1,"width":"3","height":"1","passthru":false,"label":"Test Text","tooltip":"","color":"","bgcolor":"","className":"","icon":"","payload":"TestText","payloadType":"str","topic":"","topicType":"str","x":160,"y":320,"wires":[["2eff8061.69559","907e4fabb15681e7"]]},{"id":"2eff8061.69559","type":"ui_template","z":"284cd852.c67658","group":"67a39dee.c646e4","name":"Textarea","order":3,"width":"0","height":"0","format":"      <textarea name=\"textentered\" id=\"textentered\"  rows=\"8\" cols=\"25\">No message received</textarea>\n      <input type=\"submit\" value=\"Save Comments\" ng-click=\"test()\">\n      \n<script>\n\n(function(scope) {\n  const element = document.getElementById(\"textentered\");\n  \n  scope.$watch('msg', function(msg) {\n    if (msg.payload) {\n      // Do something when msg arrives\n      element.value = msg.payload;\n    }\n  })\n  \n  scope.test = function() {\n        var text = element.value;\n        scope.send({payload: \"E:\"+text});\n    }\n})(scope)\n\n</script>\n","storeOutMessages":false,"fwdInMessages":false,"resendOnRefresh":true,"templateScope":"local","className":"","x":450,"y":380,"wires":[["53d4f9b7.899c88"]]},{"id":"fae42a25.a6e348","type":"ui_button","z":"284cd852.c67658","name":"Input \"\"","group":"67a39dee.c646e4","order":2,"width":"3","height":"1","passthru":false,"label":"^^","tooltip":"","color":"","bgcolor":"","className":"","icon":"","payload":" ","payloadType":"str","topic":"","topicType":"str","x":130,"y":380,"wires":[["2eff8061.69559"]]},{"id":"53d4f9b7.899c88","type":"debug","z":"284cd852.c67658","name":"Content of textarea","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"payload","targetType":"msg","statusVal":"","statusType":"auto","x":660,"y":380,"wires":[]},{"id":"67a39dee.c646e4","type":"ui_group","name":"Date Range","tab":"660a703d.ea902","order":2,"disp":true,"width":"6","collapse":false,"className":""},{"id":"660a703d.ea902","type":"ui_tab","name":"Test Multiline Input","icon":"fa-bar-chart","order":4,"disabled":false,"hidden":false}]

No refresh required.

5

Perfect this also works and is much easier.
Many thanks.

6

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.