OOUI: problem with button groups

classic Classic list List threaded Threaded
4 messages Options
Reply | Threaded
Open this post in threaded view
|

OOUI: problem with button groups

Huji Lee
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
_______________________________________________
Wikitech-l mailing list
[hidden email]
https://lists.wikimedia.org/mailman/listinfo/wikitech-l
Reply | Threaded
Open this post in threaded view
|

Re: OOUI: problem with button groups

Bartosz Dziewoński
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
[hidden email]
https://lists.wikimedia.org/mailman/listinfo/wikitech-l
Reply | Threaded
Open this post in threaded view
|

Re: OOUI: problem with button groups

Volker E.
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 <[hidden email]>
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
> [hidden email]
> https://lists.wikimedia.org/mailman/listinfo/wikitech-l
_______________________________________________
Wikitech-l mailing list
[hidden email]
https://lists.wikimedia.org/mailman/listinfo/wikitech-l
Reply | Threaded
Open this post in threaded view
|

Re: OOUI: problem with button groups

Huji Lee
@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. <[hidden email]> 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
>
>
> [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 <[hidden email]>
> 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
> > [hidden email]
> > https://lists.wikimedia.org/mailman/listinfo/wikitech-l
> _______________________________________________
> Wikitech-l mailing list
> [hidden email]
> https://lists.wikimedia.org/mailman/listinfo/wikitech-l
_______________________________________________
Wikitech-l mailing list
[hidden email]
https://lists.wikimedia.org/mailman/listinfo/wikitech-l