<html>
<head>
<meta content="text/html; charset=windows-1252"
http-equiv="Content-Type">
</head>
<body text="#000000" bgcolor="#FFFFFF">
<br>
Thanks for the instructions, Samuel!<br>
<br>
<div class="moz-cite-prefix">On 04/08/2016 05:59 PM, Samuel Henrique
De Oliveira Guimaraes wrote:<br>
</div>
<blockquote
cite="mid:eb5a18cdbf3545348b1be4ee7e2f8bcd@serv031.corp.eldorado.org.br"
type="cite">
<meta http-equiv="Content-Type" content="text/html;
charset=windows-1252">
<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]-->
<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 style="font-family:Wingdings" lang="EN-US">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 style="font-family:Wingdings" lang="EN-US">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>
<br>
<fieldset class="mimeAttachmentHeader"></fieldset>
<br>
<pre wrap="">_______________________________________________
Kimchi-devel mailing list
<a class="moz-txt-link-abbreviated" href="mailto:Kimchi-devel@ovirt.org">Kimchi-devel@ovirt.org</a>
<a class="moz-txt-link-freetext" href="http://lists.ovirt.org/mailman/listinfo/kimchi-devel">http://lists.ovirt.org/mailman/listinfo/kimchi-devel</a>
</pre>
</blockquote>
<br>
</body>
</html>