Buy me a coffee :)

Wicket - jQuery UI

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

Confirm AjaxButton



Components / Samples

Description

Provides an AjaxButton which pop-ups an OK-Cancel confirmation dialog when clicked. In case of confirmation, the form is sent via an ajax post.

Note: this component is not an AjaxButton itself but a Panel, it should not be attached to a <button />; it can be attached on a <div /> or a <span /> for instance.

Warning: it is not possible to get a form component value - that is going to be changed - to be displayed in the dialog box message. The reason is that in order to get a form component (updated) model object, the form component should be validated. The dialog does not proceed to a (whole) form validation while being opened, because the form validation will occur when the user will confirm (by clicking on OK button). This the intended behavior.

Sources

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

import org.apache.wicket.ajax.AjaxRequestTarget;
import org.apache.wicket.markup.html.form.Form;
import org.apache.wicket.markup.html.form.RequiredTextField;
import org.apache.wicket.markup.html.panel.FeedbackPanel;
import org.apache.wicket.model.Model;

import com.googlecode.wicket.jquery.ui.form.button.ConfirmAjaxButton;
import com.googlecode.wicket.jquery.ui.panel.JQueryFeedbackPanel;

public class ConfirmAjaxButtonPage extends AbstractButtonPage
{
	private static final long serialVersionUID = 1L;

	public ConfirmAjaxButtonPage()
	{
		final Form<Void> form = new Form<Void>("form") {

			private static final long serialVersionUID = 1L;

			@Override
			protected void onSubmit()
			{
				info("Form submitted");
			}
		};

		this.add(form);

		// FeedbackPanel //
		final FeedbackPanel feedback = new JQueryFeedbackPanel("feedback");
		form.add(feedback.setOutputMarkupId(true));

		// TextField //
		final RequiredTextField<String> textField = new RequiredTextField<String>("text", new Model<String>());
		form.add(textField);

		// Buttons //
		form.add(new ConfirmAjaxButton("button", "Submit", "Please confirm", "Do you confirm the new value?") {

			private static final long serialVersionUID = 1L;

			@Override
			protected void onError(AjaxRequestTarget target)
			{
				this.error("Validation failed!");
				target.add(feedback);
			}

			@Override
			protected void onSubmit(AjaxRequestTarget target)
			{
				this.info("Model object: " + textField.getModelObject());
				target.add(feedback);
			}
		});
	}
}
<!DOCTYPE html>
<html xmlns:wicket="http://wicket.apache.org">
<head>
<wicket:head>
	<title>Wicket jQuery UI: confirm ajax button</title>
</wicket:head>
</head>
<body>
<wicket:extend>
	<div id="demo-panel">
		<form wicket:id="form">
			<input type="text" wicket:id="text" />
			<span wicket:id="button"></span><br />
			<br/>
			<div wicket:id="feedback" style="width: 360px;"></div>
		</form>
	</div>
</wicket:extend>
</body>
</html>