wicket-user-guide/src/main/asciidoc/ajax/ajax_3.adoc - wicket - Git at Google



 In addition to specific components, Wicket offers also a set of built in AJAX behaviors that can be used to easily add AJAX functionalities to existing components. As we will see in this paragraph AJAX behaviors can be used also to ajaxify components that weren't initially designed to work with this technology. All the following behaviors are inside package _org.apache.wicket.ajax_.

 === AjaxEventBehavior

 AjaxEventBehavior allows to handle a JavaScript event (like click, change, etc...) on server side via AJAX. Its constructor takes in input the name of the event that must be handled. Every time this event is fired for a given component on client side, the callback method _onEvent(AjaxRequestTarget target)_ is executed. onEvent is abstract, hence we must implement it to tell _AjaxEventBehavior_ what to do when the specified event occurs.

 In project _AjaxEventBehaviorExample_ we used this behavior to build a “clickable” Label component that counts the number of clicks. Here is the code from the home page of the project:

 *HTML:*
 [source,html]
 ----
 <body>
   <div wicket:id="clickCounterLabel"></div>
   User has clicked <span wicket:id="clickCounter"></span> time/s on the label above.
 </body>
 ----

 *Java Code:*
 [source,java]
 ----
 public class HomePage extends WebPage {
    public HomePage(final PageParameters parameters) {
       super(parameters);

       final ClickCounterLabel clickCounterLabel =
          new ClickCounterLabel("clickCounterLabel", "Click on me!");
       final Label clickCounter =
          new Label("clickCounter", new PropertyModel(clickCounterLabel, "clickCounter"));


       clickCounterLabel.setOutputMarkupId(true);
       clickCounterLabel.add(new AjaxEventBehavior("click"){

          @Override
          protected void onEvent(AjaxRequestTarget target) {
             clickCounterLabel.clickCounter++;
             target.add(clickCounter);
          }
       });

       add(clickCounterLabel);
       add(clickCounter.setOutputMarkupId(true));
     }
 }

 class ClickCounterLabel extends Label{
    public int clickCounter;

    public ClickCounterLabel(String id) {
       super(id);
    }

    public ClickCounterLabel(String id, IModel<?> model) {
       super(id, model);
    }

    public ClickCounterLabel(String id, String label) {
       super(id, label);
    }
 }
 ----

 In the code above we have declared a custom label class named _ClickCounterLabel_ that exposes a public integer field called clickCounter. Then, in the home page we have attached a _AjaxEventBehavior_ to our custom label to increment clickCounter every time it receives a click event.

 The number of clicks is displayed with another standard label named _clickCounter_.

 === AjaxFormSubmitBehavior

 This behavior allows to send a form via AJAX when the component it is attached to receives the specified event. The component doesn't need to be inside the form if we use the constructor version that, in addition to the name of the event, takes in input also the target form:

 [source,java]
 ----
 Form<Void> form = new Form<>("form");
 Button submitButton = new Button("submitButton");
 //submit form when button is clicked
 submitButton.add(new AjaxFormSubmitBehavior(form, "click"){});
 add(form);
 add(submitButton);
 ----

 NOTE: _AjaxFormSubmitBehavior_ does not prevent JavaScript default event handling. For _<input type=submit_ you'll have to call _AjaxRequestAttributes.setPreventDefault(true)_ to prevent the form from being submitted twice.

 === AjaxFormComponentUpdatingBehavior

 This behavior updates the model of the form component it is attached to when a given event occurs. The standard form submitting process is skipped and the behavior validates only its form component.

 The behavior doesn't work with radio buttons and checkboxes. For these kinds of components we must use _AjaxFormChoiceComponentUpdatingBehavior_:

 [source,java]
 ----
 Form<Void> form = new Form<>("form");
 TextField textField = new TextField("textField", Model.of(""));
 //update the model of the text field each time event "change" occurs
 textField.add(new AjaxFormComponentUpdatingBehavior("change"){
 	@Override
 	protected void onUpdate(AjaxRequestTarget target) {
 		//...
 	}
 });
 add(form.add(textField));
 ----

 === AbstractAjaxTimerBehavior

 _AbstractAjaxTimerBehavior_ executes callback method _onTimer(AjaxRequestTarget target)_ at a specified interval. The behavior can be stopped and restarted at a later time with methods _stop(AjaxRequestTarget target)_ and _restart(AjaxRequestTarget target)_:

 [source,java]
 ----
 Label dynamicLabel = new Label("dynamicLabel");
 //trigger an AJAX request every three seconds
 dynamicLabel.add(new AbstractAjaxTimerBehavior(Duration.seconds(3)) {
 	@Override
 	protected void onTimer(AjaxRequestTarget target) {
 		//...
 	}
 });
 add(dynamicLabel);
 ----

 NOTE: By default AJAX components and behaviors are _stateful_, but as we will see very soon they can be easily turned to stateless if we need to use them in stateless pages.



	In addition to specific components, Wicket offers also a set of built in AJAX behaviors that can be used to easily add AJAX functionalities to existing components. As we will see in this paragraph AJAX behaviors can be used also to ajaxify components that weren't initially designed to work with this technology. All the following behaviors are inside package _org.apache.wicket.ajax_.

	=== AjaxEventBehavior

	AjaxEventBehavior allows to handle a JavaScript event (like click, change, etc...) on server side via AJAX. Its constructor takes in input the name of the event that must be handled. Every time this event is fired for a given component on client side, the callback method _onEvent(AjaxRequestTarget target)_ is executed. onEvent is abstract, hence we must implement it to tell _AjaxEventBehavior_ what to do when the specified event occurs.

	In project _AjaxEventBehaviorExample_ we used this behavior to build a “clickable” Label component that counts the number of clicks. Here is the code from the home page of the project:

	HTML:
	[source,html]
	----
	<body>
	<div wicket:id="clickCounterLabel"></div>
	User has clicked <span wicket:id="clickCounter"></span> time/s on the label above.
	</body>
	----

	Java Code:
	[source,java]
	----
	public class HomePage extends WebPage {
	public HomePage(final PageParameters parameters) {
	super(parameters);

	final ClickCounterLabel clickCounterLabel =
	new ClickCounterLabel("clickCounterLabel", "Click on me!");
	final Label clickCounter =
	new Label("clickCounter", new PropertyModel(clickCounterLabel, "clickCounter"));


	clickCounterLabel.setOutputMarkupId(true);
	clickCounterLabel.add(new AjaxEventBehavior("click"){

	@Override
	protected void onEvent(AjaxRequestTarget target) {
	clickCounterLabel.clickCounter++;
	target.add(clickCounter);
	}
	});

	add(clickCounterLabel);
	add(clickCounter.setOutputMarkupId(true));
	}
	}

	class ClickCounterLabel extends Label{
	public int clickCounter;

	public ClickCounterLabel(String id) {
	super(id);
	}

	public ClickCounterLabel(String id, IModel<?> model) {
	super(id, model);
	}

	public ClickCounterLabel(String id, String label) {
	super(id, label);
	}
	}
	----

	In the code above we have declared a custom label class named _ClickCounterLabel_ that exposes a public integer field called clickCounter. Then, in the home page we have attached a _AjaxEventBehavior_ to our custom label to increment clickCounter every time it receives a click event.

	The number of clicks is displayed with another standard label named _clickCounter_.

	=== AjaxFormSubmitBehavior

	This behavior allows to send a form via AJAX when the component it is attached to receives the specified event. The component doesn't need to be inside the form if we use the constructor version that, in addition to the name of the event, takes in input also the target form:

	[source,java]
	----
	Form<Void> form = new Form<>("form");
	Button submitButton = new Button("submitButton");
	//submit form when button is clicked
	submitButton.add(new AjaxFormSubmitBehavior(form, "click"){});
	add(form);
	add(submitButton);
	----

	NOTE: _AjaxFormSubmitBehavior_ does not prevent JavaScript default event handling. For _<input type=submit_ you'll have to call _AjaxRequestAttributes.setPreventDefault(true)_ to prevent the form from being submitted twice.

	=== AjaxFormComponentUpdatingBehavior

	This behavior updates the model of the form component it is attached to when a given event occurs. The standard form submitting process is skipped and the behavior validates only its form component.

	The behavior doesn't work with radio buttons and checkboxes. For these kinds of components we must use _AjaxFormChoiceComponentUpdatingBehavior_:

	[source,java]
	----
	Form<Void> form = new Form<>("form");
	TextField textField = new TextField("textField", Model.of(""));
	//update the model of the text field each time event "change" occurs
	textField.add(new AjaxFormComponentUpdatingBehavior("change"){
	@Override
	protected void onUpdate(AjaxRequestTarget target) {
	//...
	}
	});
	add(form.add(textField));
	----

	=== AbstractAjaxTimerBehavior

	_AbstractAjaxTimerBehavior_ executes callback method _onTimer(AjaxRequestTarget target)_ at a specified interval. The behavior can be stopped and restarted at a later time with methods _stop(AjaxRequestTarget target)_ and _restart(AjaxRequestTarget target)_:

	[source,java]
	----
	Label dynamicLabel = new Label("dynamicLabel");
	//trigger an AJAX request every three seconds
	dynamicLabel.add(new AbstractAjaxTimerBehavior(Duration.seconds(3)) {
	@Override
	protected void onTimer(AjaxRequestTarget target) {
	//...
	}
	});
	add(dynamicLabel);
	----

	NOTE: By default AJAX components and behaviors are _stateful_, but as we will see very soon they can be easily turned to stateless if we need to use them in stateless pages.