Search jQuery

jQuery Forum

Widget with sub-widgets

in Developing jQuery UI • 10 years ago

Hello,

I'm working on the ticket #3905 (http://dev.jqueryui.com/ticket/3905) .
To simplify the problem, when an accordion with autoHeight is in a tab, and the tab is hidden, the resize function of the accordion is called and makes the accordion height equal to 0. And then the accordion is never displayed even if the tab becomes visible.

I made a first partial fix, making the accordion visible but the autoHeight option is not applied.
I test if the accordion is hidden, in this case the function to calculate the height is not done.

if ( !this.element.is(":hidden") ) {

I'm trying now to make the autoHeight option working in this case. I tried to implement the call to resize when the accordion becomes visible. I added a bind on the event "tabsshow", to call the resize process.

// resize later when the element won't be hidden
var resizeHandler = function() {
self.element.parents(".ui-widget-content").unbind('tabsshow',resizeHandler);
self.resize();
};
this.element.parents(".ui-widget-content").bind('tabsshow', resizeHandler);

It works with the current html sample provided with the ticket. But it isn't working with a more complex html structure.
I made a test in tabs4, with an accordion in an another accordion. The fix doesn't work, because in this case, the "tabshow" event is not sent by the accordion.

1- Do I need to bind any possible events : tabshow, ...
2- Do I need to search for the event to bind :
    - my widget parent is a tab, so I bind tabshow.
    - my widget parent is an accordion, so I bind accordionshow (I didn't find it)
    - ...
3- Is there a more general event, like widgetshow that will solve my problem in any complex html structure ?

The files are available here :
http://github.com/dominiquevincent/jquery-ui/commit/f4d802be6531f81113108c7e4dba98fe2c83eab7

Regards,
Dominique VINCENT

Replies(11)

scott.gon..

Re: Widget with sub-widgets

10 years ago

In order to find a valid solution, you have to find a way to make this work without interacting with any other plugins. Any solution that involves listening to events from other plugins will not be accepted as there will still be an unlimited number of other ways to produce the same problem.

dominique..

Réf.: Widget with sub-widgets

10 years ago

Yes, it's exactly what I'm pointing out with the example of accordion in another accordion.
So, from your point of view, the widget should not and will never manage a common event saying to sub widgets your are going to be displayed.

In the ticket comments, I mention 2 other possibilities :

1- force the accordion to be visible in the current DOM before making the autoHeight calculation process.

2- clone the accordion somewhere in the DOM, make the clone visible, make the calculation on the clone, remove the clone, set the maxHeight value in the accordion

Do you think that one of those proposals could become a valid solution ?

Regards,
Dominique VINCENT
http://www.toitl.com/
http://helpdesk.toitl.com/

scott.gon..

Re: Réf.: Widget with sub-widgets

10 years ago

1- force the accordion to be visible in the current DOM before making the autoHeight calculation process.

That's a lot of work since you have to traverse up the DOM finding every element that is causing the accordion to be hidden. This probably works, but isn't ideal.

2- clone the accordion somewhere in the DOM, make the clone visible, make the calculation on the clone, remove the clone, set the maxHeight value in the accordion

This doesn't work because you need to be in the correct portion of the DOM so that you get the correct width before calculating the height. Also, setting an option to something seemingly arbitrary (according to the user) isn't a valid action to take.

dominique..

Réf.: Widget with sub-widgets

10 years ago

Solution 1, force the accordion to be visible :

That's a lot of work since you have to traverse up the DOM finding every element that is causing the accordion to be hidden. This probably works, but isn't ideal.

I don't see how this proposal can be done without interacting with the other plugins. It will require to make the parent (tabs, accordion, ...) showing properly the part where is the element. In this case, you will tell me again this:

In order to find a valid solution, you have to find a way to make this work without interacting with any other plugins.

Basically the question is : find a solution to a problem due to interaction between widgets (parent-children situation in this case) but your solution should not interact with any other widget ... It could be hard to find one without any kind of interaction.
From my point of view, the event solution is not so bad. It could be improved to be more general and not specific to tabs or accordion parent containers .

What is the ideal solution ?

Regards,
Dominique VINCENT
http://helpdesk.toitl.com/

scott.gon..

Re: Réf.: Widget with sub-widgets

10 years ago

If we had an ideal solution, we would have implemented it by now.

As I said before, listening to events from other plugins only solves a small portion of the problem. The problem is that accordions don't work if initialized while hidden, not that accordions don't work only when initialized inside a closed tab panel. We cannot use a solution that only works if the plugin is inside another jQuery UI plugin.

dominique..

Réf.: Widget with sub-widgets

10 years ago

One solution without any interaction with other plugin could be to use a timer with setInterval to check when the accordion becomes visible, and when it becomes visible for the first time , make the calculation.
But it means that each accordion in the situation of the ticket will create a timer using CPU resources for something that could never happen : in some cases, the user will never click on the tab to make visible the accordion.
I would prefer that jQuery UI Widget manage the situation where a container widget send general event to sub widgets, like show and hide . UI Widget class already manages some general actions like destroy or option ...

Regarding this :

The problem is that accordions don't work if initialized while hidden

if you try the first partial fix, the accordions work well even when they are hidden (by any plugins), the only problem is that the autoHeight option is not taken into account. From my point of view it's better than nothing.

Regards,
Dominique VINCENT
http://www.toitl.com/
http://helpdesk.toitl.com/

dominique..

Réf.: Widget with sub-widgets

10 years ago

The fix using a timer could be like that :

// resize later when the element won't be hidden
var resizeHandler = function() {
if ( !self.element.is(":hidden") ) {
self.resize();
} else {
setTimeout(resizeHandler,1000);
}
};
setTimeout(resizeHandler,2000);

It works whatever the reason why the accordion is hidden...

Regards,
Dominique VINCENT
http://www.toitl.com/
http://helpdesk.toitl.com/

scott.gon..

Re: Réf.: Widget with sub-widgets

10 years ago

Wouldn't this fail if the timer happens to run while the accordion is becoming visible via an animation? For example, if the accordion is inside a tab and the tab is shown using a slide animation. If the accordion timer happens to run immediately after the animation starts, the accordion would think it's very small.

dominique..

Re: Widget with sub-widgets

10 years ago

1- The timer solution isn't probably the best one, but it works in many cases.

2- The only valid and smart solution to solve this kind of problem is to define some jquery-ui events that will be sent when the jquery widget is displayed or hidden (see the previous comment).
You don't want to implement this solution for this reason:

We cannot use a solution that only works if the plugin is inside another jQuery UI plugin.

If the external container plugin is not working well because this container plugin doesn't respect the event rules of jquery ui library it 's not really our problem.
With this solution, the hard work is to change all the jquery-ui container widgets in order to send those new events. As soon as this work will be done, the issue won't be in the jquery-ui library anymore.

Regards,
Dominique VINCENT
http://www.toitl.com/

scott.gon..

Re: Re: Widget with sub-widgets

10 years ago

The issue is already not in jQuery UI, but that doesn't mean that it's "not our problem."

dominique..

Re: Widget with sub-widgets

10 years ago

This issue IS in the current version of jquery-ui, because if you put ONLY jquery-ui widgets in your page and if you use the autoHeight option , the widgets don't work like they should be (like the jquery-ui functional documentation )
You have 2 solutions :
1- remove this functionality from the library and documentation
2- implement the correct functionality (the event design will fix the issue)

Whatever the solutions you choose, you will have, after this change, a jquery-ui library that will be consistent.

At this point, you will have always the issue in the following case: when you put a jquery-ui accordion in an external widget that is not follow the jquery-ui event design. And this case is really NOT our problem.

The event design is really not easy to implement but it will allow to implement the correct functionality.

Regards,
Dominique VINCENT
http://www.toitl.com/

Top Reply

Response title

Attachments

jQuery Forum

Widget with sub-widgets

Replies(11)

Re: Widget with sub-widgets

Réf.: Widget with sub-widgets

Re: Réf.: Widget with sub-widgets

Réf.: Widget with sub-widgets

Re: Réf.: Widget with sub-widgets

Réf.: Widget with sub-widgets

Réf.: Widget with sub-widgets

Re: Réf.: Widget with sub-widgets

Re: Widget with sub-widgets

Re: Re: Widget with sub-widgets

Re: Widget with sub-widgets

Statistics

Tags

Actions