Text Entry With Partial Submit (Ajax Mode Only)

Tabbing out of an input field triggers a partial submit. Javascript must be enabled.

Description

JSP components usually contain an HTML form that is submitted to the component. In non-Ajax mode a form is submitted only when a user activates a submit button. In Ajax mode it is possible to submit a form incrementally using partial submit feature. Despite the name, the form actually is submitted fully, but instead of sending a submit event, browser sends and partial submit event. A JSP component handles partial submit event just like any other event.

Activating partial submit is a two-step process. Since partial submit is applicable only to Ajax mode, the first thing you need to do is to enable Ajax mode for the HTML form. You do that by setting CSS class on FORM element to "jspcCommand".

Next, you need to select input elements that should generate partial submit, and to mark them with CSS class "partialsubmit". In case you did not know, CSS allows to specify several classes for one HTML element, so you can specify another class for formatting.

Now, when a field with "partialsubmit" class losese focus, the form is submitted along with "jspcontrols.partialsubmit" event. To process partial submit, you need to add a Handler tag that processes this event.

Notice, that despite the fact that partial submit works in Ajax mode only, the content of HTML form's fields is saved in the session. This is done to ensure that form data is not lost if a user hits Reload button. If you don't mind losing form data on page reload, you can use page context. You need to process request data and to save it in some context, because the whole component is refreshed.

Source Code

Below is the full source code of the component embedded into the top of this page.

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib uri="http://jspcontrols.net/tags/core" prefix="jc" %>

<jc:component id="Showcase_Textentry">

  <%-- Input phase --%>

  <jc:handler event="jspcontrols.partialsubmit">
    <%
      String submittedField = request.getParameter("jspcontrols.partialsubmit");
      session.setAttribute("showcase_textentry_name", request.getParameter("username"));
      session.setAttribute("showcase_textentry_pwd", request.getParameter("password"));
      session.setAttribute("showcase_textentry_comment", request.getParameter("comments"));
    %>
  </jc:handler>
  <jc:reload/>

  <%-- Render phase --%>

  <jc:prerender/>
  <form name="textentryform" class="jspcCommand" method="get" action="${jspcComponentAddress}">
    <table>

      <tr>
        <td>Name:</td>
        <td><input type="text" name="username" value="${showcase_textentry_name}"
                         size="25" class="partialsubmit"/></td>
      </tr>

      <tr>
        <td>Password:</td>
        <td><input type="password" name="password" value="${showcase_textentry_pwd}"
                         size="25" class="partialsubmit"/></td>
      </tr>

      <tr>
        <td>Comments:</td>
        <td><textarea name="comments" rows="4" cols="25" class="partialsubmit">
          ${showcase_textentry_comment}</textarea>
        </td>
      </tr>

      <tr><td colspan="2">
        Name: ${showcase_textentry_name}<br/>
        Password: ${showcase_textentry_pwd}<br/>
        Comment: ${showcase_textentry_comment}
      </td></tr>

    </table>
  </form>

</jc:component>