AjaxTabbedPanel – Store state when switching tabs

Normally when you switch tabs of an AjaxTabbedPanel it won’t store the state of all your input fields. If you do want this, without pressing a save button, you have to override the newLink(String linkId, final int index) method of the AjaxTabbedPanel class and use an AjaxSubmitLink instead of the default AjaxFallbackLink. Now all values will be stored in the model (not saved to the database).

Keep in mind that all Wicket validations will be validated, so we have to take care of the FeedbackPanel (refreshing) as well.


Example:

/**
	 * {@inheritDoc}
	 */
	@Override
	protected WebMarkupContainer newLink(String linkId, final int index) {

			return new AjaxSubmitLink(linkId, m_form) {

			@Override
			protected void onSubmit(AjaxRequestTarget target, Form<?> form) {
				setSelectedTab(index);
				if (target != null) {
					target.addComponent(TabbedComponent.this);
				}
				onAjaxUpdate(target);
			}

			@Override
			protected void onError(AjaxRequestTarget target, Form<?> form) {
				target.addComponent(((FeedbackAware) getPage()).getFeedbackPanel());
			}
		};
	}

See also my other blog about the AjaxTabbedPanel and LazyLoading

5 comments to AjaxTabbedPanel – Store state when switching tabs

  • bert

    Hi,

    thanks for this post. I have 2 questions:

    * where is the m_form coming from
    * TabbedComponent is the Component holding your TabbedPanel?

    In my usecase, i have a form in each of the tabs and would like to push the data into the model on tab switch. If i understood you right, the above code is inside a
    AjaxTabbedPanel tabPanel = new AjaxTabbedPanel(“tabsPanel”, tabs) {
    ..
    }
    and i do not have any form there ..

    Any hints would be very helpful

    Thanks, Bert

  • Hello,

    Stefanovich, thanks for the posting!

    Bert, the example can only work when the tabbedpanel is inside a form, because newLink returns a submit button.
    Forms can’t be nested in HTML, so the tabs inside the tabbedpanel can’t contain a separate form.

    To have a form object, you could pass the form you could extend AjaxTabbedPanel, and then pass you’re own form to the constructor:

    class MyAjaxTabbedPanel extends AjaxTabbedPanel {
    Form m_form;

    MyAjaxTabbedPanel(String id,List tabs,Form m_form) {
    super(id,tabs);
    this.m_form=m_form;

    @Override
    protected WebMarkupContainer newLink(String linkId, final int index) {

    }

    If I have some time left, I’ll post a working example on my on weblog (as I’m currently trying to get tabs working).

    }

  • Ludger

    Thanks for the post.
    I have one thing. TabbedComponent.this should be form.

    cu
    Ludger

  • Janaka

    This was very helpful. Thanks a lot.
    Janaka

Leave a Reply

 

 

 

You can use these HTML tags

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>