Buy me a coffee :)

Wicket - jQuery UI

jQuery UI integration in Wicket 6.x, Wicket 7.x , Wicket 8.x & Wicket 9.x

Form Dialog (Slider)

Components / Samples


Form-based dialog are designed to host a form and form components. Those dialogs are typically used to provide inputs (which are eventually validated) of model object properties. The model could be a simple String or Integer but can also be a more complex bean.

Extending an AbstractFormDialog is almost like extending an AbstractDialog (see 'Custom dialog' above)
What you need in addition is to specify what button act as the submit button, and what form is being in use (the dialog's inner form).
The usage is the same as InputDialog above.

public abstract class MyFormDialog extends AbstractFormDialog<MyBean>
	private Form<?> form;
	/* ... */

	protected DialogButton getSubmitButton()
		//should return one of the button returned by #getButtons()
		return this.findButton(OK);

	public Form<?> getForm()
		return this.form;

	public void onError(AjaxRequestTarget target)
		target.add(this.form.get("feedback")); //suppose you have a feedback panel

Warning with nested forms!

Although Wicket allows nested forms, it is recommended to not nest a form-dialog within another form to avoid experiencing some troubles. Troubles could be like the dialogs does not close under certain circumstances (you re-attached the parent form for instance), the dialog's model could be set to null when the parent form is submitted and/or the parent form cannot be submitted due to some validators in the nested form (the dialog's one)...


package com.googlecode.wicket.jquery.ui.samples.jqueryui.dialog;

import org.apache.wicket.ajax.AjaxRequestTarget;
import org.apache.wicket.core.request.handler.IPartialPageRequestHandler;
import org.apache.wicket.markup.html.form.Form;
import org.apache.wicket.markup.html.panel.FeedbackPanel;
import org.apache.wicket.model.Model;

import com.googlecode.wicket.jquery.ui.form.button.AjaxButton;
import com.googlecode.wicket.jquery.ui.panel.JQueryFeedbackPanel;
import com.googlecode.wicket.jquery.ui.samples.component.SliderDialog;
import com.googlecode.wicket.jquery.ui.widget.dialog.DialogButton;

public class FormDialogPage extends AbstractDialogPage
	private static final long serialVersionUID = 1L;

	public FormDialogPage()
		final Form<Void> form = new Form<Void>("form");

		// FeedbackPanel //
		final FeedbackPanel feedback = new JQueryFeedbackPanel("feedback");

		// Dialog //
		final SliderDialog dialog = new SliderDialog("dialog", "Slider dialog", Model.of(0)) {

			private static final long serialVersionUID = 1L;

			public void onSubmit(AjaxRequestTarget target, DialogButton button)
			{"The form has been submitted");"The model object is: '%s'", this.getModelObject()));

			public void onClose(IPartialPageRequestHandler handler, DialogButton button)
			{ + " has been clicked");


		// Buttons //
		form.add(new AjaxButton("open") {

			private static final long serialVersionUID = 1L;

			protected void onSubmit(AjaxRequestTarget target)
<!DOCTYPE html>
<html xmlns:wicket="">
	<title>Wicket jQuery UI: form dialog box</title>
	<div id="demo-panel">
		<form wicket:id="form">
			<button wicket:id="open">Open slider dialog</button>
			<div wicket:id="feedback" style="width: 360px;"></div>
	<div wicket:id="dialog">[dialog]</div>