Old ui-template code survives a deploy

[Hugobox]

What are the steps to reproduce?

1.Create a new ui-template 2. insert following code:

3. Deploy
4. Go to dashboard page and click anywhere
5. Open the web console and see that the word "hello" is displayed
6. Go back and edit the ui_template to:

7. deploy
8. Go to the Dashboard page and click anywhere
9. Look in the web console and notice that both scripts were executed, you now see both "hello" and "world" printed anytime you click on the dashboard.
10. Now refresh the dashboard web page.
11. Click anywhere and see that only the latest Jquery script prints only "world"

What happens?

Jquery scripts are not refreshed on deploy only on page refresh. They seem to accumulate.

What do you expect to happen?

Jquery scripts should refresh on deploy and not only on page refresh

Please tell us about your environment:

• [ ] Node-RED-Dashboard version: 2.11.0
• [ ] Node-RED version: 0.19.5
• [ ] node.js version: v.6.9.4
• [ ] npm version: 3.10.10
• [ ] Platform/OS: Windows
• [ ] Browser: Chrome

[dceejay]

While an inconvenience I'm not sure this is a major problem. At one point we used to force a refresh of the browser - but then users complained that any screens that were not on the "home" page would get reset to that page, rather than remain on the page they were on. E.G. they had set each room in the house to a different tab. Having to go round and reset them back to the tab they should be is also a problem.

[Hugobox]

It might not be a major problem (for most) after you become aware of it trying to make sense of what is going on when you left a browser open on your dashboard with jquery code that does more than just console.logs. It's still a problem as the behavior is not expected and can lead to nasty loops (ex: using scope.send within jquery handler). And even after being aware of it, I sometimes forget to manually refresh all my dashboard pages (or forget a a page opened on another machine or even someone else opened a dashboard page while working collaboratively) and wonder why it is acting weird.

When I manually refresh a dashboard page in chrome it doesn't go back to ui/#/0 but stays on its tab. It would seem there are different types of page refresh that affects Dashboard differently or perhaps it is browser dependant? Maybe adding a "Dashboard refresh on Deploy" option in the Dashboard Site config tab would make sense?

[Hugobox]

And not refreshing after deploy not only affects Jquery code but also JS code for eventListeners, for example:

<div id="test">CLICKME</div>
<script>
const test = document.getElementById("test");
test.addEventListener('click', onclick, false);

function onclick(ev) {
    console.log("test")
}
</script>

With this code if we re-deploy, clicking the element will stop working as: Uncaught SyntaxError: Identifier 'test' has already been declared

[Hugobox]

Turns out any JS code (not linked with eventListeners) that uses "let" or "const" instead of "var" will display the error: Uncaught SyntaxError: Identifier 'X' has already been declared after deploying without a page refresh.

[natcl]

Isn't that normal as most browsers don't support ES6 yet?

[Hugobox]

Most modern browsers support "let" and "const" and it works well after a page refresh, it just goes to show that deploying without refreshing can cause problems. Turns out good old "var" doesn't complain about redeclaration so that's probably why it hasn't been causing more problems.

[Hugobox]

Hi! Some more tests on windows/chrome.

Tried to pinpoint when Dashboard currently displayed tab shifts: On F5 refresh: no shift location.reload();: no shift programamticaly via a button linked to function: window.location.reload(false); : no shift programamticaly via a button linked to function: window.location.reload(true); : no shift via ui-node: no shift After a full deploy: most of the time it goes back to /ui/#/0 After a partial deploy: most of the time it goes back to /ui/#/0

I'm thinking the refresh has nothing to do with the currently displayed page shifting bug and could be safely brought back.

[falkolab]

In my case I try add js library script into header and I get error every deploy

Uncaught Error: Highcharts error #16: www.highcharts.com/errors/16/

This error happens if the Highcharts namespace already exists when loading Highcharts or Highstock

You can see template code appended to header again and again after each deploy.

[{"id":"9d69007a.1785a","type":"tab","label":"Flow 4","disabled":false,"info":""},{"id":"d6443622.4136f8","type":"ui_template","z":"9d69007a.1785a","group":"53f58ee.4d70f7","name":"","order":5,"width":0,"height":0,"format":"<script src=\"https://code.highcharts.com/highcharts.js\"></script>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"global","x":390,"y":520,"wires":[[]]},{"id":"53f58ee.4d70f7","type":"ui_group","z":"","name":"Default","tab":"fbb5786b.e9a928","order":1,"disp":false,"width":"12","collapse":false},{"id":"fbb5786b.e9a928","type":"ui_tab","name":"Tab 1","icon":"dashboard","order":1}]

For correct handling issue we must do cleanup or some checks before. For example:

    if (!window.Highcharts){
      var el = document.createElement('script');
      document.getElementsByTagName("head")[0].appendChild(el);
      el.src = url; // some url
    }