<html xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:w="urn:schemas-microsoft-com:office:word" xmlns:m="http://schemas.microsoft.com/office/2004/12/omml" xmlns="http://www.w3.org/TR/REC-html40">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=us-ascii">
<meta name="Generator" content="Microsoft Word 15 (filtered medium)">
<style><!--
/* Font Definitions */
@font-face
{font-family:Wingdings;
panose-1:5 0 0 0 0 0 0 0 0 0;}
@font-face
{font-family:"Cambria Math";
panose-1:2 4 5 3 5 4 6 3 2 4;}
@font-face
{font-family:Calibri;
panose-1:2 15 5 2 2 2 4 3 2 4;}
/* Style Definitions */
p.MsoNormal, li.MsoNormal, div.MsoNormal
{margin:0cm;
margin-bottom:.0001pt;
font-size:11.0pt;
font-family:"Calibri",sans-serif;
mso-fareast-language:EN-US;}
a:link, span.MsoHyperlink
{mso-style-priority:99;
color:#0563C1;
text-decoration:underline;}
a:visited, span.MsoHyperlinkFollowed
{mso-style-priority:99;
color:#954F72;
text-decoration:underline;}
span.EmailStyle17
{mso-style-type:personal-compose;
font-family:"Calibri",sans-serif;
color:windowtext;}
.MsoChpDefault
{mso-style-type:export-only;
font-family:"Calibri",sans-serif;
mso-fareast-language:EN-US;}
@page WordSection1
{size:612.0pt 792.0pt;
margin:70.85pt 3.0cm 70.85pt 3.0cm;}
div.WordSection1
{page:WordSection1;}
--></style><!--[if gte mso 9]><xml>
<o:shapedefaults v:ext="edit" spidmax="1026" />
</xml><![endif]--><!--[if gte mso 9]><xml>
<o:shapelayout v:ext="edit">
<o:idmap v:ext="edit" data="1" />
</o:shapelayout></xml><![endif]-->
</head>
<body lang="PT-BR" link="#0563C1" vlink="#954F72">
<div class="WordSection1">
<p class="MsoNormal">Hey team,<o:p></o:p></p>
<p class="MsoNormal"><o:p> </o:p></p>
<p class="MsoNormal"><span lang="EN-US">I’m not sure if this is still happening randomly with Ginger, Gingerbase or Kimchi because after the latest changes to wok.window.js it was supposed to be fixed but I was able to reproduce it once again when developing
Ginger OVS Bridge UI.<o:p></o:p></span></p>
<p class="MsoNormal"><span lang="EN-US">The problem is not related to wok.window.js at all, but in majority if a function that builds the UI has a wok.window.open() line inside of any block and the same parent function is called again, the modal content is
hidden from the DOM tree but not removed. This will create windows with different IDs but with the same content inside the modal dialog. The ideal fix would be isolating all click handlers in a different function.<o:p></o:p></span></p>
<p class="MsoNormal"><span lang="EN-US">For instance, suppose we have a function like this:<o:p></o:p></span></p>
<p class="MsoNormal"><span lang="EN-US"><o:p> </o:p></span></p>
<p class="MsoNormal"><span lang="EN-US">ginger.buildTableUi = function() {<o:p></o:p></span></p>
<p class="MsoNormal"><span lang="EN-US">// Some lines<o:p></o:p></span></p>
<p class="MsoNormal"><span lang="EN-US"> $(‘<b>button’</b>).on(‘click’,function(){<o:p></o:p></span></p>
<p class="MsoNormal" style="text-indent:35.4pt"><span lang="EN-US"> wok.window.open(‘url’);<o:p></o:p></span></p>
<p class="MsoNormal" style="text-indent:35.4pt"><span lang="EN-US">});<o:p></o:p></span></p>
<p class="MsoNormal"><span lang="EN-US">// Some lines<o:p></o:p></span></p>
<p class="MsoNormal"><span lang="EN-US">};<o:p></o:p></span></p>
<p class="MsoNormal"><span lang="EN-US">ginger.buildTableUi();<o:p></o:p></span></p>
<p class="MsoNormal"><span lang="EN-US"><o:p> </o:p></span></p>
<p class="MsoNormal"><span lang="EN-US">And then ginger.buildTableUi() is called again once a new element is added or removed from/to a table or list, this will make the modal content append inside the modal window at N times that this function was called.<o:p></o:p></span></p>
<p class="MsoNormal"><span lang="EN-US"><o:p> </o:p></span></p>
<p class="MsoNormal"><span lang="EN-US">Instead we have to isolate the click events like this:<o:p></o:p></span></p>
<p class="MsoNormal"><span lang="EN-US"><o:p> </o:p></span></p>
<p class="MsoNormal"><span lang="EN-US">ginger.someTabclickHandler = function() {<o:p></o:p></span></p>
<p class="MsoNormal"><span lang="EN-US"> $(‘<b>container’</b>).on(‘click’,<b>’button’</b>,function(){<o:p></o:p></span></p>
<p class="MsoNormal" style="text-indent:35.4pt"><span lang="EN-US"> wok.window.open(‘url’);<o:p></o:p></span></p>
<p class="MsoNormal" style="text-indent:35.4pt"><span lang="EN-US">}); <o:p>
</o:p></span></p>
<p class="MsoNormal"><span lang="EN-US">}<o:p></o:p></span></p>
<p class="MsoNormal"><span lang="EN-US"><o:p> </o:p></span></p>
<p class="MsoNormal"><span lang="EN-US">And then we can call it like this:<o:p></o:p></span></p>
<p class="MsoNormal"><span lang="EN-US"><o:p> </o:p></span></p>
<p class="MsoNormal"><span lang="EN-US">ginger.buildTableUi();<o:p></o:p></span></p>
<p class="MsoNormal"><span lang="EN-US">ginger.someTabclickHandler();<o:p></o:p></span></p>
<p class="MsoNormal"><span lang="EN-US"><o:p> </o:p></span></p>
<p class="MsoNormal"><span lang="EN-US">Call ginger.buildTableUi() many times as you want and it won’t duplicate the click handlers
</span><span lang="EN-US" style="font-family:Wingdings">J</span><span lang="EN-US"><o:p></o:p></span></p>
<p class="MsoNormal"><span lang="EN-US">Please pay attention the changes in the click event differences from the examples above.<o:p></o:p></span></p>
<p class="MsoNormal"><span lang="EN-US">Since the UI will dynamically generate the buttons or links that we’ll bind new events, we have to add a static container that is not generated by JS or ensure that the container, button or link element was in the DOM
tree before someTabclickHandler() was called.<o:p></o:p></span></p>
<p class="MsoNormal"><span lang="EN-US">If you find any duplicate modal windows, please let me know or follow the instructions above and send a patch
</span><span lang="EN-US" style="font-family:Wingdings">J</span><span lang="EN-US"><o:p></o:p></span></p>
<p class="MsoNormal"><span lang="EN-US"><o:p> </o:p></span></p>
<p class="MsoNormal"><span lang="EN-US">Regards,<o:p></o:p></span></p>
<p class="MsoNormal"><span lang="EN-US">Samuel<o:p></o:p></span></p>
</div>
</body>
</html>