I have a simple page with validation that I got working with a
conventional submit and action.
I'm now trying to explore doing an Ajax form submit, and getting a JSON
response. I'm using YUI on the client side. I'd like to see if I can
get similar data in the JSON response that I would in a normal submit,
for instance, with field errors.
There are a couple points I could use some help with, not necessarily
related to Ajax or JSON. Please don't hesitate to tell me if I'm doing
something else wrong, or something I should be aware of.
My first attempt actually did execute the Ajax request, and got the
response, but it wasn't JSON. The responseText was just the HTML of my
source JSP, which is also the value of my "input" result. I tried
setting up the JSON action without an "input" result, but it seemed to
complain if I didn't have that. I would have thought the "input"
parameter wouldn't be relevant in a Ajax/JSON action. If I filled in
all the required fields so it didn't result in any field errors, the
response was JSON, and it was reasonable (although setting
"wrapWithComments" didn't appear to have any effect). I guess there's
no automatic provision for reporting field errors in a JSON response, so
I guess I'll have to build something like that by hand?
Note that I tried to enable the logging interceptor, but I didn't see
any output from it.
I have a single action that I was intending to use to handle both the
ajax and non-ajax submit. I tried to make it use two different action
names in the form, but it seemed to have trouble with that.
I noticed in the generated HTML, I had this in the HTML for the form
tag:
onsubmit="return YAHOO.strutsform.submitform();; return true;"
I'm not sure if that "return true;" will cause me trouble, as I'm trying
to bypass the normal form submission. I think by returning false from
"submitform", I achieved that, however.
I'll include here the relevant files. Please comment where appropriate.
Thanks for your input.
---form.jsp------------
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ taglib prefix="s" uri="/struts-tags" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd";>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Struts Form</title>
<link rel="stylesheet"
href="${pageContext.request.contextPath}/struts/css_xhtml/styles.css"
type="text/css">
<link rel="stylesheet" type="text/css"
href="${pageContext.request.contextPath}/style/form.css">
<!-- css -->
<link rel="stylesheet" type="text/css"
href="${pageContext.request.contextPath}/yui/reset-fonts-grids/reset-fon
ts-grids.css">
<link rel="stylesheet" type="text/css"
href="${pageContext.request.contextPath}/yui/button/assets/skins/sam/but
ton.css">
<link rel="stylesheet" type="text/css"
href="${pageContext.request.contextPath}/yui/logger/assets/skins/sam/log
ger.css">
<!-- js -->
<script type="text/javascript"
src="${pageContext.request.contextPath}/yui/utilities/utilities.js"></sc
ript>
<script type="text/javascript"
src="${pageContext.request.contextPath}/yui/button/button-debug.js"></sc
ript>
<script type="text/javascript"
src="${pageContext.request.contextPath}/yui/json/json-debug.js"></script
>
<script type="text/javascript"
src="${pageContext.request.contextPath}/yui/logger/logger-debug.js"></sc
ript>
<script type="text/javascript"
src="${pageContext.request.contextPath}/scripts/strutsform.js"></script>
</head>
<body class="yui-skin-sam">
<h4>Enter your data</h4>
<!-- onsubmit="return YAHOO.strutsform.submitform();" -->
<s:form id="form" action="Form" onsubmit="return
YAHOO.strutsform.submitform();">
<s:textfield name="lastName" label="Last Name"/>
<s:textfield name="firstName" label="First Name"/>
<button id="formsubmit" type="submit">Submit</button>
</s:form>
<script type="text/javascript">
YAHOO.util.Event.onDOMReady(YAHOO.strutsform.init);
</script >
</body>
</html>
---------------
---struts.xml------------
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE struts PUBLIC "-//Apache Software Foundation//DTD Struts
Configuration 2.0//EN" "struts-2.0.dtd" >
<struts>
<constant name="struts.devMode" value="true" />
<package extends="struts-default" name="main" namespace="/main">
<action name="main">
<result>/form.jsp</result>
</action>
<action name="Form" class="com.wamu.strutsform.FormAction">
<result name="input">/form.jsp</result>
<result>/form.jsp</result>
</action>
</package>
<package extends="json-default" name="json" namespace="/json">
<action name="Form" class="com.wamu.strutsform.FormAction"
method="jsonSubmit">
<interceptor-ref name="logger"></interceptor-ref>
<interceptor-ref name="completeStack"></interceptor-ref>
<result type="json">
<param name="wrapWithComments">true</param>
</result>
<result name="input">/form.jsp</result>
</action>
</package>
</struts>
---------------
---FormAction.java------------
package com.wamu.strutsform;
import org.apache.commons.logging.Log;
import org.apache.commons.logging.LogFactory;
import com.opensymphony.xwork2.ActionSupport;
public class FormAction extends ActionSupport
{
private static final Log logger =
LogFactory.getLog(FormAction.class);
private String lastName;
private String firstName;
public String getLastName() { return lastName; }
public String getFirstName() { return firstName; }
public void setLastName(String lastName)
{ this.lastName = lastName; }
public void setFirstName(String firstName)
{ this.firstName = firstName; }
public String execute()
{
logger.info("execute.");
return SUCCESS;
}
public String jsonSubmit()
{
logger.info("jsonSubmit.");
return SUCCESS;
}
}
---------------
---strutsform.js------------
/**
* @author u166705
*/
YAHOO.namespace("strutsform");
YAHOO.widget.Logger.enableBrowserConsole();
var $E = YAHOO.util.Event;
var $D = YAHOO.util.Dom;
YAHOO.strutsform.init =
function ()
{
$E.onContentReady("formsubmit", function()
{
var submitButton = new YAHOO.widget.Button("formsubmit");
});
};
YAHOO.strutsform.submitform =
function()
{
var callback =
{
success: function(obj)
{
YAHOO.log("obj.responsetext[" + obj.responseText + "]");
},
failure: function(obj)
{
YAHOO.log("obj.responseText[" + obj.responseText + "]");
}
};
YAHOO.util.Connect.setForm(document.getElementById("form"));
YAHOO.util.Connect.asyncRequest("POST",
"/strutsform/json/Form.action",
callback, null);
return false;
};
---------------
