Apache Wicket Ajax Request Example with AjaxButton

Apache Wicket provides a handy support for Ajax without writing a single line of javascript code. In Wicket, Ajax support is implemented in the file wicket-ajax-jquery.js. In this tutorial, let us see AjaxButton with example. For this, Let us make an example application for Ajax based search (i.e.) finding Country Name using country code entered in a text box. Let us create a text box, label and a search button(i.e. ajax button). When we click on the ajax button, Ajax request is triggered and the Country Name is displayed in the label. Now let us see the code for the application.

The Java Code and the corresponding html is given below

WicketAjaxRequestSearch.java

package com.javaonline;

import java.util.HashMap;

import org.apache.wicket.ajax.AjaxRequestTarget;
import org.apache.wicket.ajax.markup.html.form.AjaxButton;
import org.apache.wicket.markup.html.WebPage;
import org.apache.wicket.markup.html.basic.Label;
import org.apache.wicket.markup.html.form.Form;
import org.apache.wicket.markup.html.form.TextField;
import org.apache.wicket.model.Model;

public class WicketAjaxRequestSearch extends WebPage {
	Form<Void> form =null;

	public WicketAjaxRequestSearch() {

		form= new Form<Void>("form");

    	final Model<String> model = new Model<String>() {
            private String location ="";
             public String getObject() {
                return location;
            }

             public void setObject(String location) {
                 this.location=location;
             }

    		};

	     final TextField <String> code = new TextField("code",new Model<String>(""));

		    form.add(code);

		    final Label label = new Label("location", model);
		    label.setOutputMarkupId(true);
		    form.add(label);

     AjaxButton ab=new AjaxButton("search") {
		protected void onSubmit(AjaxRequestTarget target, Form form) {

			if (target!=null)
			{

			String cyCode=form.getRequest().getRequestParameters().getParameterValue("code").toString();

			model.setObject(getLocation(Integer.parseInt(cyCode)));

			target.add(label);
			}

		}

    };

       form.add(ab);
       add(form);

    }

    private String getLocation(Integer cyCode)
    {

    	HashMap<Integer,String> locations=new HashMap<Integer, String>();
    	locations.put(1, "USA");
    	locations.put(61,"Australia");
    	locations.put(91, "India");
    	return locations.get(cyCode);
    }
}

WicketAjaxRequestSearch.html

<html>
	<head>
  		<title>Wicket Ajax Example</title>
	</head>
	<body>
		<form id="ajaxForm" method="get" wicket:id="form">
		<fieldset>
  		   Enter Country Code: <input type="text" wicket:id="code" size="50"/>
			<input type="button" wicket:id="search" size="50" value="Search"/><br/>
           Country :<span wicket:id="location"></span><br/>

  	   	    </fieldset>
		</form>
	</body>
</html>

WicketStarter.java


package com.javaonline;

import org.apache.wicket.markup.html.WebPage;
import org.apache.wicket.protocol.http.WebApplication;

public class WicketStarter extends WebApplication
{

	@Override
	public Class<? extends WebPage> getHomePage()
	{
		return WicketAjaxRequestSearch.class;
	}

	@Override
	public void init()
	{
		super.init();

	}
}

web.xml

<?xml version="1.0" encoding="ISO-8859-1"?>
<web-app xmlns="http://java.sun.com/xml/ns/javaee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
	xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"
	version="2.5">

	<display-name>wicketajaxexample</display-name>
	<filter>
		<filter-name>wicket.wicketajaxsample</filter-name>
		<filter-class>org.apache.wicket.protocol.http.WicketFilter</filter-class>
		<init-param>
			<param-name>applicationClassName</param-name>
			<param-value>com.javaonline.WicketStarter</param-value>
		</init-param>
	</filter>

	<filter-mapping>
		<filter-name>wicket.wicketajaxsample</filter-name>
		<url-pattern>/*</url-pattern>
	</filter-mapping>
</web-app>

Running the application

wicket ajax example

 

Reference : Working with Ajax 

You may also like

Leave a Reply

Be the First to Comment!