I've run into an "interesting" situation (interesting in that it's had me
cursing my computer for two days). I've got a page which uses a remote
<div> to load a form. The form uses the ajax theme and a submit button with
executeScripts="true". The returned script tells the page to reload a new
form within that same div. So far so good.
The second form operates identically. It uses the ajax theme and, again, a
submit button with executeScripts="true". The problem is that the second
form submission results in a full page reload (rather than a reload of only
the nested div via an XMLHTTPRequest).
Has anyone else run into this? Is there something about the event-binding
model which causes the second form submission to *not* bind to an event that
should execute the request via an XMLHTTPRequest?
I've included the relevant bits of code needed to reproduce this problem
below.
-rob
struts.xml (action defs):
<action name="TestAction1" class="SuccessAction">
<result name="success">test_form_2.jsp</result>
</action>
<action name="TestAction2" class="SuccessAction">
<result name="success">success.jsp</result>
</action>
SuccessAction.java:
import com.opensymphony.xwork2.ActionSupport;
public class SuccessAction extends ActionSupport {
public String execute() {
return SUCCESS;
}
}
test.jsp:
<%@ taglib prefix="s" uri="/struts" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd
">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<s:head theme="ajax" debug="true"/>
<script type="text/javascript"
src="/ajax_utils.js">
</script>
</head>
<body>
<s:url id="testUrl" value="/test_form_1.jsp"><s:param name="show"
value="true"/></s:url>
<s:div id="loginDiv" theme="ajax" href="%{testUrl}" loadingText="Loading..."
cssClass="boxed">
</s:div>
<br>
</body>
</html>
ajax_utils.js:
function getXMLHTTPRequest() {
var xRequest = null;
if (window.XMLHttpRequest) {
xRequest = new XMLHttpRequest();
}
else if (typeof ActiveObject != "undefined") {
xRequest = new ActiveObject("Microsoft.XMLHTTP");
}
return xRequest;
}
function loadDiv(div, url) {
var req = getXMLHTTPRequest();
if (req) {
req.open("GET", url);
req.onreadystatechange = function() {
if (req.readyState == 4) {
document.getElementById (div).innerHTML = req.responseText;
}
};
req.send(null);
}
}
function sendEmailVal(url, emailAddress) {
alert('url = ' + url);
loadDiv("loginDiv", url);
}
test_form_1.jsp:
<%@ taglib prefix="s" uri="/struts" %>
<s:if test="${param.show != 'true'}">
<script language="javascript">
var url = "<s:url value="/test_form_1.jsp"><s:param name="show"
value="%{'true'}"/></s:url>";
// alert('reloading! url = ' + url);
loadDiv("loginDiv", url);
</script>
</s:if>
<s:else>
<h2>Testerific 1</h2>
<div id="errors">
</div>
<s:form id="f1" action="TestAction1" method="post" theme="ajax">
<s:hidden name="show" value="%{'false'}"/>
<s:submit id="submit1" value="Send" align="left" cssClass="submit-button"
executeScripts="true"/>
</s:form>
</s:else>
test_form_2.jsp:
<%@ taglib prefix="s" uri="/struts" %>
<s:if test="${param.show != 'true'}">
<script language="javascript">
var url = "<s:url value="/test_form_2.jsp"><s:param name="show"
value="%{'true'}"/></s:url>";
// alert('reloading! url = ' + url);
loadDiv("loginDiv", url);
</script>
</s:if>
<s:else>
<h2>Testerific 2</h2>
<div id="errors">
</div>
<s:form id="f1" action="TestAction2" method="post" theme="ajax">
<%-- <s:hidden name="show" value="%{'false'}"/> --%>
<s:submit id="submit1" value="Send" align="left" cssClass="submit-button"
executeScripts="true"/>
</s:form>
</s:else>
success.jsp:
<%@ taglib prefix="s" uri="/struts" %>
<s:if test="${param.show != 'true'}">
<script language="javascript">
var url = "<s:url value="/success.jsp"><s:param name="show"
value="%{'true'}"/></s:url>";
alert('reloading! url = ' + url);
loadDiv("loginDiv", url);
</script>
</s:if>
<s:else>
<h2>Testerific 2</h2>
<h2>SUCCESS AT LAST!</h2>
</s:else>