jQuery form plugin is used to 'ajaxify' your HTML pages. Using this plugin we can submit requests using ajax and the plugin provides different configurable options too. In our example we will show how to use 'target' option where we can specify a particular element of the HTML page that needs to be updated with the response received from ajax request. Only this portion of page gets updated and thus gives a good user experience.
Using jQuery form plugin is very much simple.
Step-1:
Using jQuery form plugin is very much simple.
- You need to have a HTML form.
- Add jQuery and jQuery Form plugins.
- Register your HTML form to use jQuery form plugin. (This can be done by either using ajaxForm or ajaxSubmit methods of the form plugin)
Step-1:
- Create a dynamic web project named test-app in Eclipse.
- Create a Servlet named DisplaySearchServlet. This servlet is used to present a simple html form.
- As you can see the required jQuery and jQuery form plugins are added in the HTML page too.
import java.io.*;
import javax.servlet.*;
import javax.servlet.annotation.*;
import javax.servlet.http.*;
/**
* A Simple Servlet that displays a HTML page with a search form.
* This search form will be registered with 'form' plugin in such a way that
* output obtained on submitting the form is sent to 'search_output' html divison.
* @author phani
*/
@WebServlet("/DisplaySearchServlet")
public class DisplaySearchServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
@Override
public void doGet(HttpServletRequest request,HttpServletResponse response)
throws ServletException, IOException {
response.setContentType("text/html");
PrintWriter out = response.getWriter();
out.println
("<html>\n" +
"<head>\n"+
"<script type=\"text/javascript\" src=\"js/jquery-1.9.1.js\"></script>\n"+
"<script type=\"text/javascript\" src=\"js/jquery.form.js\"></script>\n"+
"<script type=\"text/javascript\" src=\"js/my_custom.js\"></script>\n"+
"</head>\n" +
"<body>\n" +
"<form id=\"search_form\" name=\"search_form\" method=\"post\" action=\"/test-app/DisplaySearchServlet\">\n" +
"<fieldset>"+
"<legend>Employee Search Criteria</legend>"+
"<table>\n"+
"<tr height=\"20px\">"+
"<td width=\"100px\">"+
"<label for=\"Name\">Name </label>\n"+
"</td>"+
"<td width=\"150px\">"+
"<select height=\"15%\" name=\"NameCondition\" id=\"NameCondition\" >" +
"<option value=\"Equal\">Equal</option>" +
"<option value=\"In\">In</option>" +
"<option value=\"Not Equal\">Not Equal</option>" +
"<option value=\"Not In\">Not In</option>" +
"</select>"+
"</td>"+
"<td width=\"250px\">"+
"<input type=\"text\" name=\"Name\" id=\"Name\" size=\"30\" value=\"\" " +
"</td>\n"+
"</tr>"+
"<tr height=\"20px\">"+
"<td width=\"100px\">"+
"<label for=\"Role\">Role </label>\n"+
"</td>"+
"<td width=\"150px\">"+
"<select height=\"15%\" name=\"RoleCondition\" id=\"RoleCondition\" >" +
"<option value=\"Equal\">Equal</option>" +
"<option value=\"In\">In</option>" +
"<option value=\"Not Equal\">Not Equal</option>" +
"<option value=\"Not In\">Not In</option>" +
"</select>"+
"</td>"+
"<td width=\"250px\">"+
"<input type=\"text\" name=\"Role\" id=\"Role\" size=\"30\" value=\"\" " +
"</td>\n"+
"</tr>"+
"</table>\n"+
"</fieldset>"+
"<fieldset><legend>Actions</legend>"+
"<input type=\"submit\" name=\"Retrieve\" id=\"Retrieve\" value=\"Retrieve\">"+
"</fieldset>"+
"</form>"+
"Below is search_output division, output obtained after submitting form will be populated in this divison"+
"<div id=\"search_output\"> </div>\n"+
"</body>"+
"</html>");
}
protected void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
StringBuilder sb = new StringBuilder();
ServletOutputStream out = response.getOutputStream();
response.setCharacterEncoding("UTF-8");
response.setContentType("text/html");
sb.append("<p>").append("We can write code to retrieve the employee's based on"
+ "above conditions and display them here in table. </p>"
+ "<p>Form Plugin ensures only"
+ "this division (i.e target registered using ajaxForm options) gets updated").append("</p>");
sb.append("<table border = \"1\" style=\"width:300px\"><tr><th>Firstname</th><th>Lastname</th><th>Role</th></tr>"+
"<tr><tr><td>Jill</td><td>Smith</td><td>Engineer</td></tr>"+
"<tr><td>Eve</td><td>Jackson</td><td>Admin</td></tr>"+
"<tr><td>John</td><td>Doe</td><td>Manager</td></tr>"+
"</table>");
out.println(sb.toString());
out.close();
}
}
Step -2 :
- Download the requireds plugins jquery-1.9.1.js and jquery.form.js and put them under 'js' directory in eclipse project's WebContent directory.
- As you can see from above code, there's another java script with name my_custom.js. This is the javascript we will write in which we will register our HTML form with jQuery form plugin.
Step - 3:
- Create my_custom.js javascript in the 'js' directory under eclipse project's WebContent directory.
- We used a javascript variable options and the 'target' property is pointed to 'search_output' HTML division. You can see that this HTML div is defined in the above HTML page.
- Register our HTML form (search_form) with jQuery form plugin using ajaxForm method.
$(document).ready(function () {
var options = {
target: '#search_output'
};
$('#search_form').ajaxForm(options);
});
- Deploy the war file and verify 'DisplaySearchServlet'. This can be seen by typing "http://localhost:8080/test-app/DisplaySearchServlet" in your browser window. (Assuming you deployed the war file on your 'localhost' and default port of your tomcat web server is 8080).
- Click on 'view source' of the web page and make sure all the javascript files are included. If not, then something wrong with your eclipse project setup.
- 'DisplaySearchServlet' should show something like below in the html page:
You can select some conditions and input some data and click on 'Retrieve' button. Now the form is configured to send the request back to the same 'DisplaySearchServlet' using 'post' method. (As can be seen in HTML). This request is now sent using ajax as this form is registered with jQuery form plugin.
DisplaySearchServlet's 'doPost' method returns a simple string as response. And the response received is populated in the 'search_output' HTML division only. There should be no change in the form input and selections you made. HTML page looks like below after populating the search_output div with ajax response:
Thus we have a working html form setup with jQuery form plugin where ajax is used to submit the form. In our next post we will see how to combine 'ajax' and 'non-ajax' ways of submitting to the same form. And the difference between ajaxForm and ajaxSubmit methods of the form plugin.
