You absolutely can attach a jQuery element into your $content parameter.
That will work, and probably give you what you want.

However, one of the more powerful things about OOUI is its ability to
encapsulate this type of work. In this case, what I would recommend, is
creating your own custom widget that manages itself.

I imagine that your $content changes, but it probably has similar structure
through its changes. For example, it might have an error box at the top
that only appears when necessary, or it can have some regular inputs
alongside inputs that maybe change, and it probably has some area where you
display a text or an image or anything else.

You could create all of those in jQuery, but OOUI also offers you an
ability to encapuslate this better.

I tried to explain this in an email and got a bit long, so I created a
gist: https://gist.github.com/mooeypoo/a9082a5a5828dcec53be28ed3c538e22

The main idea I am trying to show is how you can create your own widget
that extends OO.ui.Widget, construct its base structure in the constructor
with either other OOUI widgets or with some custom jQuery elements, add
classes and event listeners, and then manage the state of this widget when
some other code calls its methods.

I tried to also show how you can have your custom widget emit some custom
event so that other pieces of your code (say, the dialog in general?) can
listen to some event (I used "success" but you can define whatever you
want) and respond, like change to another panel, or close the dialog, or
enable some other action.

I hope the gist helps, I tried to make it self explanatory, but please let
me know if you encounter any issues with it (I wrote it relatively quickly,
I hope there aren't any bugs ;)

Moriel

On Sun, Mar 24, 2019 at 7:19 AM Alex Monk <kren...@gmail.com> wrote:

> I haven't dealt with OOUI for a couple of years but maybe you could pass a
> jQuery object to the $content parameter, store it yourself, then modify
> that later?
>
> On Sun, 24 Mar 2019 at 14:14, Huji Lee <huji.h...@gmail.com> wrote:
>
> > In the script I am working on,[1] I have a PanelLayout that is defined
> like
> > this:
> >
> >         this.previewResult = new OO.ui.PanelLayout({
> >           expanded: true,
> >           padded: true,
> >           framed: true,
> >           $content: ''
> >         });
> >
> > Later on, I would like to modify the content of this; specifically, I
> want
> > to use MW API to retrieve the parsed output of some short wikitext. For
> > now, however, I just want to try out the concept by replacing the content
> > with a simple <p> tag.
> >
> > Evidently, this line of code does not do the trick:
> >
> >         dialog.previewResult.$content = '<p>Something</p>';
> >
> >
> > That is, it does update the value of the $content property for the OOUI
> > object, but that does not result in the object getting re-rendered. None
> of
> > the setter functions for OO.ui.PanelLayout seem to do the trick either.
> >
> > What is the correct way to do this? If PanelLayout is not the right
> object
> > type for this purpose, what is?
> > _______________________________________________
> > 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



-- 
Moriel Schottlender (she/her)
Senior Software Engineer
Tech Lead | Community Tech and Anti Harassment Tools
Wikimedia Foundation https://wikimediafoundation.org/
_______________________________________________
Wikitech-l mailing list
Wikitech-l@lists.wikimedia.org
https://lists.wikimedia.org/mailman/listinfo/wikitech-l

Reply via email to