Example to add an onChange, or onClick event for Accordian

[Marc Stuart]

Hi, I am trying to add an override method on an Accordion object, so that I can capture the header, and do a redirect to a mountPage defined in the Application class.

I have an accordian on the left hand side of my layout,would also like to leave the specified accordian panel open as the user navigates to another page in the applicatuon
Any ideas on how to do something like  that ?

Thanks

[Sebastien Briquet]

Hi Marc,

According to your use case, I do not see any other option than binding the 'change' event to an ajax behavior (as it is done on other components in wicket-jquery-ui).
I can probably integrate it in the next few days, but you can also do it on your side by overriding Accordion#onConfigure(JQueryBehavior)
For the active element, just set the 'active' option (as shown bellow)

        @Override
        protected void onInitialize() {
            super.onInitialize();
            
            this.add(this.onChangeBehavior);
        }

        @Override
        protected void onConfigure(JQueryBehavior behavior) {
            super.onConfigure(behavior);
           
            behavior.setOption("active", 2); //activate the 3rd element
            behavior.setOption("onChange", "function(event, ui) { " + this.onChangeBehavior.getCallbackScript() + "}"); //wicket-jquery-1.2.x
            //behavior.setOption("onChange", this.onChangeBehavior.getCallbackFunction()); //wicket-jquery-6.x
        }

        //TODO: creates the onChangeBehavior object the ChangeEvent class and override onEvent()
        //wicket-jquery-1.2.x sample:
        //https://github.com/sebfz1/wicket-jquery-ui/blob/master/wicket-jquery-ui-plugins/src/main/java/com/googlecode/wicket/jquery/ui/plugins/datepicker/RangeDatePicker.java
        //wicket-jquery-6.x sample:
        //https://github.com/sebfz1/wicket-jquery-ui/blob/wicket6/wicket-jquery-ui-plugins/src/main/java/com/googlecode/wicket/jquery/ui/plugins/datepicker/RangeDatePicker.java


If you decide to implement this, I am interested to know if you succeed and what problems you may have faced.

Thanks & best regards,
Sebastien.

[Sebastien Briquet]

Hi Marc,

I am currently working on that (hope you did not already spent your day/night on this :).

I already did integrate the ability to retrieve the index and the title, but I am still wondering:
- is the title really needed as you already get the index back?
- are the title/content pairs static or are they loaded dynamically using a repeater? If yes, how exactly did you do?

Thanks in advance,
Sebastien.

PS: a small error in previous msg. behavior.setOption("change", instead of "onChange". Thus, "onchangestart" is more relevant in this context.

[Sebastien Briquet]

Hi Marc,

Sorry about the delay.
I finally added an AccordionPanel which takes an ITab list as constructor's argument (like TabbedPanel) and that handle 2 events:

• onChanging(AjaxRequestTarget target, int index, ITab tab)
• onChanged(AjaxRequestTarget target, int index, ITab tab)

onChanging event is enabled by default because it (might) serves to load dynamic content (if an AjaxTab is used).
onChanged event can be enabled by overriding #isChangedEventEnabled(), returning true.

The title of the selected tab can, then, be retrieved using tab.getTitle()
Thanks to let me know if it suits to your use case.

Best regards,
Sebastien.

PS: wicket-jquery-ui 1.2.3-SNAPSHOT & 6.0.1-SNAPSHOT have been released