UI Template using alert()

Dashboard
1

I want to have an alert pop up that uses alert() method. I have an example and it works fine when using ngclick. However when I try to pass a msg.payload to the template the pop up will not show until I click on the browser page. I am using a Chrome browser.

image

image

Here is the test flow...

[{"id":"178e0660b6026254","type":"ui_template","z":"87abe99bc8ef43df","group":"3027907fd56be4b6","name":"","order":7,"width":"6","height":"2","format":"\n<!DOCTYPE html>\n<html lang=\"en\">\n \n<body>\n    <h1 style=\"color: green;\">\n        Alert Test\n    </h1>\n\n \n<button onclick=\"myalert()\">\n        Show Alert Message\n    </button>\n\n \n<script>\n        function myalert() {\n            alert(\"Flex 6700 On\");\n        }\n    </script> \n\n    <script>\n    (function(scope) {\n        scope.$watch('msg.payload', function(data) {\n     //   function myalert() {\n     //   alert(data);\n     //   }\n     //   myalert();\n        alert(data);\n        });\n    })(scope);\n    </script>\n\n</body>\n \n</html>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","x":620,"y":360,"wires":[[]]},{"id":"f1aa957df4a04c7c","type":"inject","z":"87abe99bc8ef43df","name":"","props":[{"p":"payload"}],"repeat":"","crontab":"*/1 0 * * *","once":false,"onceDelay":0.1,"topic":"","payload":"On","payloadType":"str","x":450,"y":360,"wires":[["178e0660b6026254"]]},{"id":"3027907fd56be4b6","type":"ui_group","name":"Default","tab":"29dca734fc93f2ac","order":1,"disp":true,"width":"6","collapse":false},{"id":"29dca734fc93f2ac","type":"ui_tab","name":"Alert","icon":"dashboard","disabled":false,"hidden":false}]

Thanks in advance.

2

I notice that you are $watching msg.payload .. im not sure that will work correctly

Try watching for the whole msg and pick payload later in the code

(function(scope) {
        scope.$watch('msg', function(msg) {
     //   function myalert() {
     //   alert(data);
     //   }
     //   myalert();
    //  console.log("alert")
    if(msg) {
        alert(msg.payload);
    }
        });
    })(scope);
3

Is the themed dashboard notification node not better than a raw alert?

4

I changed it to your code and still get the same thing. I can use the default notification node, however I like the look of the alert() layout.

5

@UnborN code should work, maybe refresh the Browser as it may be confused with all the changes made.

Also no need for html or body tags as the page the template is placed already has them.

example (tested and working on chrome browser)

[{"id":"178e0660b6026254","type":"ui_template","z":"d1395164b4eec73e","group":"3027907fd56be4b6","name":"","order":7,"width":"6","height":"2","format":"\n    <h1 style=\"color: green;\">\n        Alert Test\n    </h1>\n\n \n<button onclick=\"myalert('Flex 6700 On')\">\n        Show Alert Message\n    </button>\n\n \n<script>\n     function myalert(alert_ata) {\n            alert(alert_data);\n        }\n   \n    (function(scope) {\n       \n        scope.$watch('msg', function(data) {\n     \n        alert(data.payload);\n        //or myalert(data.payload);\n    \n        });\n    })(scope);\n    </script>\n\n","storeOutMessages":false,"fwdInMessages":false,"resendOnRefresh":true,"templateScope":"local","className":"","x":360,"y":2760,"wires":[[]]},{"id":"f1aa957df4a04c7c","type":"inject","z":"d1395164b4eec73e","name":"","props":[{"p":"payload"}],"repeat":"5","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"On","payloadType":"str","x":190,"y":2760,"wires":[["178e0660b6026254"]]},{"id":"3027907fd56be4b6","type":"ui_group","name":"Default","tab":"29dca734fc93f2ac","order":1,"disp":true,"width":"6","collapse":false},{"id":"29dca734fc93f2ac","type":"ui_tab","name":"Alert","icon":"dashboard","disabled":false,"hidden":false}]
6

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