Hey team,
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.
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.
For instance, suppose we
have a function like this:
ginger.buildTableUi =
function() {
// Some lines
$(‘button’).on(‘click’,function(){
wok.window.open(‘url’);
});
// Some lines
};
ginger.buildTableUi();
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.
Instead we have to
isolate the click events like this:
ginger.someTabclickHandler
= function() {
$(‘container’).on(‘click’,’button’,function(){
wok.window.open(‘url’);
});
}
And then we can call it
like this:
ginger.buildTableUi();
ginger.someTabclickHandler();
Call
ginger.buildTableUi() many times as you want and it won’t
duplicate the click handlers
J
Please pay attention the
changes in the click event differences from the examples
above.
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.
If you find any
duplicate modal windows, please let me know or follow the
instructions above and send a patch
J
Regards,
Samuel