Hello,
While I am waiting for my other OOUI-related question to be answered, I want to ask a brand new one!
Please see the code here: https://meta.wikimedia.org/wiki/User:Huji/OOUI2.js
Once you enable this script, you will be shown a dialog with two sets of buttons. The first set has "Show Emotions" pre-selected, and you see two buttons (Happy and Sad) in the second button group. You can click on those buttons and you will see they get highlighted as you select them.
Next, you can click on "Show Animals" and that will swap the second row with a new ButtonSelectWidget which has two choices (Cat and Dog). Again, you can click on Cat or Dog and they will get highlighted and function normally.
*Now the problem:* Click on "Show Emotions" again; it will bring back the other ButtonSelectWidget, the one with Happy and Sad buttons; but these buttons do not work anymore. If you click on the they won't get selected, and indeed, the 'choose' even is not triggered for that ButtonSelectWidget anymore either.
I also tried a different implementation in which instead of swapping the contents of the panel, I recreate the ButtonSelectWidget each time, but that also had the same problem.
Am I doing something wrong, or have I uncovered a bug in OOUI?
Thanks,
Huji
Using jQuery methods like .remove() and .empty() clears all event handlers from the removed elements. That's why the buttons no longer work after you remove them (using .empty()) and show them again.
To avoid this, you can use the .detach() method instead, or hide the elements rather than remove them. For example, instead of:
dialog.panelBottom.$element.empty().append(dialog.buttonSelect[item.data.group].$element);
You can write:
dialog.panelBottom.$element.children().detach(); dialog.panelBottom.$element.append(dialog.buttonSelect[item.data.group].$element);
Hi Huji, I hope you've found your questions clarified with above. While I appreciate the continued efforts here on OOUI questions, I would like to propose different channels for your future technical issues. Wikimedia Foundation currently test-pilots “Wikimedia Developer Support”[0] or alternatively a tag for any questions regarding the library on StackOverflow [1]. Using those channels provide easier, long-term search-ability for other folks running into the same issues and also keeps the noise on a high-volume mailing list like wikitech-l for wide range of subscribers low. As with any urgent technical question on OOUI you could also seek help on the IRC channel #wikimedia-editing.
Thanks and regards, Volker
[0]: https://discourse-mediawiki.wmflabs.org/ [1]: https://stackoverflow.com/questions/tagged/oojs-ui
On Mon, Apr 15, 2019 at 11:14 AM Bartosz Dziewoński matma.rex@gmail.com wrote:
Using jQuery methods like .remove() and .empty() clears all event handlers from the removed elements. That's why the buttons no longer work after you remove them (using .empty()) and show them again.
To avoid this, you can use the .detach() method instead, or hide the elements rather than remove them. For example, instead of:
dialog.panelBottom.$element.empty().append(dialog.buttonSelect[item.data.group].$element);
You can write:
dialog.panelBottom.$element.children().detach();
dialog.panelBottom.$element.append(dialog.buttonSelect[item.data.group].$element);
-- Bartosz Dziewoński
Wikitech-l mailing list Wikitech-l@lists.wikimedia.org https://lists.wikimedia.org/mailman/listinfo/wikitech-l
@Volker, that is a great point; I was not aware of the discourse environment, and will use that going forward.
@Bartosz: thanks for the answer. In retrospect, it was an obvious error on my part.
On Mon, Apr 15, 2019 at 2:58 PM Volker E. volker.e@wikimedia.org wrote:
Hi Huji, I hope you've found your questions clarified with above. While I appreciate the continued efforts here on OOUI questions, I would like to propose different channels for your future technical issues. Wikimedia Foundation currently test-pilots “Wikimedia Developer Support”[0] or alternatively a tag for any questions regarding the library on StackOverflow [1]. Using those channels provide easier, long-term search-ability for other folks running into the same issues and also keeps the noise on a high-volume mailing list like wikitech-l for wide range of subscribers low. As with any urgent technical question on OOUI you could also seek help on the IRC channel #wikimedia-editing.
Thanks and regards, Volker
On Mon, Apr 15, 2019 at 11:14 AM Bartosz Dziewoński matma.rex@gmail.com wrote:
Using jQuery methods like .remove() and .empty() clears all event handlers from the removed elements. That's why the buttons no longer work after you remove them (using .empty()) and show them again.
To avoid this, you can use the .detach() method instead, or hide the elements rather than remove them. For example, instead of:
dialog.panelBottom.$element.empty().append(dialog.buttonSelect[item.data.group].$element);
You can write:
dialog.panelBottom.$element.children().detach();
dialog.panelBottom.$element.append(dialog.buttonSelect[item.data.group].$element);
-- Bartosz Dziewoński
Wikitech-l mailing list Wikitech-l@lists.wikimedia.org https://lists.wikimedia.org/mailman/listinfo/wikitech-l
Wikitech-l mailing list Wikitech-l@lists.wikimedia.org https://lists.wikimedia.org/mailman/listinfo/wikitech-l
wikitech-l@lists.wikimedia.org