Struts - JSR168 Ajax Portlet - Problem!

[Christopher Frankland]

Hi,

Ok, I really hope somebody can help with this as I have hit a brick wall. I have a JSR-168 Struts portlet that I am developing and I would like to implement AJAX functionality - simply to update an InnerHTML tag on the screen for now.

I have my jsp page set up, along with my struts action. The aim is to update the page during the 'onchange' event of my text input. Can somebody please review my code to let me know if I am missing anything? It would much appreciated. Thanks.

districtChart.jsp

    
<%@ taglib uri="/WEB-INF/struts-html.tld" prefix="html"%>
<%@ taglib uri="/WEB-INF/struts-bean.tld" prefix="bean"%>
<%@ taglib uri="http://java.sun.com/portlet" prefix="portlet"%>
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
 
<portlet :mrgreen: efineObjects />
 
<script type="text/javascript">
var xmlHttp;
var requestType = "";
 
function createXMLHttpRequest() {
if (window.ActiveXObject) {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
else if (window.XMLHttpRequest) {
xmlHttp = new XMLHttpRequest();
}
}
    
function validate() {
createXMLHttpRequest();
var date = document.getElementById("birthDate");
alert(escape(date.value));
xmlHttp.onreadystatechange=callback;
 
xmlHttp.open("POST", "<%= renderResponse.encodeURL(renderRequest.getContextPath()) %>/welcome.do", true);
xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
try {
xmlHttp.send(null);
} catch (e) {
alert ("Problem communicating with server: " + e);
}
}
    
function callback() {
if(xmlHttp.readyState == 4) {
if(xmlHttp.status == 200) {
alert("status=200");
var mes = "true";
var val = "true";
setMessage(mes, val);
}
}
}
 
function setMessage(message, isValid) {
var messageArea = document.getElementById("dateMessage");
var fontColor = "red";

if (isValid=="true") {
fontColor == "green";
}
messageArea.innerHTML = "<font color=" + fontColor + ">" + message + "</font>";
}
 
</script>

Birth date: <input type="text" size="10" id="birthDate" onchange="validate();"/>
<div id="dateMessage"></div>

WelcomeAction.java

   
public class WelcomeAction extends StrutsAction {
 
    public ActionForward execute(ActionMapping mapping, ActionForm form,
            PortletRequest request, PortletResponse response) throws Exception {
  
    System.out.println("*** Executing WelcomeAction ****");
   
    String birthDate = request.getParameter("birthDate");
    
    System.out.println("*** WelcomeAction: birthDate: " + birthDate + " ****");
    
DistrictChartForm districtForm = (DistrictChartForm) form;    

ActionForward forward = mapping.findForward("viewDistrictChart");
 
    System.out.println("***--> WelcomeAction - Forward User... ***");
        return (forward);
    }
}

struts-config.xml

   
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE struts-config PUBLIC "-//Apache Software Foundation//DTD Struts Configuration 1.1//EN" "http://jakarta.apache.org/struts/dtds/struts-config_1_1.dtd">
<struts-config>
 
<!-- Form Beans -->
<form-beans>
<form-bean name="districtChartForm" type="com.dr.dashboarddistrictchart.forms.DistrictChartForm">
</form-bean>
</form-beans>
 
<!-- Global Forwards -->
<global-forwards>
<forward name="welcome" path="/welcome.do" />
</global-forwards>
 
<!-- Action Mappings -->
<action-mappings>
<action name="districtChartForm" path="/welcome" scope="request" type="com.dr.dashboarddistrictchart.actions.WelcomeAction">
<forward name="viewDistrictChart" path="/districtChart.jsp" />
</action>
</action-mappings>
<!--Controller-->
<controller processorClass="com.ibm.portal.struts.portlet.WpRequestProcessor">
</controller>
 

<!-- Message Resources -->
<message-resources parameter="com.dr.dashboarddistrictchart.resources.ApplicationResources"/>
 
</struts-config>

[Bill Fly]

Christopher,
I have two comments about your Javascript code, although I am certainly not an expert.
First, in you createXMLHttpRequest function, the preferred method of creating a XMLHttpRequest is new XMLHttpRequest
before the use of the new ActiveXObject.
Secondly, quoting Head Rush Ajax on page 183, "Using the innerHTML property is not a good way to get and set the contents of an element.
It's not part of the DOM specification, and the W3C has deprecated it - future versions of browsers may not even support it. Worse than that,
some browsers don't support it now."

   
   var request = null;
 
   function createRequest() {
     try {
       request = new XMLHttpRequest();
     } catch (trymicrosoft) {
       try {
         request = new ActiveXObject("Msxml2.XMLHTTP");
       } catch (othermicrosoft) {
         try {
           request = new ActiveXObject("Microsoft.XMLHTTP");
         } catch (failed) {
           request = null;
         }
       }
     }
 
     if (request == null)
       alert("Error creating request object!");
   }    

I recommend that you look at the Head Rush book or any Ajax book and find better code to replace text in a DOM, instead of using the innerHTML
property.

[ December 06, 2007: Message edited by: Bill Fly ]

[ December 06, 2007: Message edited by: Bill Fly ]

[ December 06, 2007: Message edited by: Bill Fly ]
[ December 06, 2007: Message edited by: Bill Fly ]

[Paul Earnest]

I am also facing the same problem. if you have found any solution for your posts, please let me know.
Thanks in advance,
Paul