Ajax, Struts, and a few pesky event based issues

I'm working on a webform that uses Struts and Ajax to prepopulate much of the data based off an ID number supplied by the user.

It works absolutely perfectly in IE.

It doesn't even think about firing the AJax calls (fired in an OnBlur() of the text box for the last part of the ID) in FireFox.

Am I missing something here?

I thought onBlur() was cross browser supported.

Similarly, I have two dependant drop downs. The second one is supposed to populate based on an onChange() of the first.

That's not working either in FireFox, but is perfect in IE.

Any thoughts about what might be wrong?

Thanks,
-Terri

Well, inspecting your code I see that...

Oh wait! No code!

Seriously, you'll need to show us your code. How else can we even venture a guess? Please be sure to use code tags.

It sounds likely that you are using proprietary IE script rather than coding to standards.

Here's my code for that page. Sorry I didn't include it earlier.

First the main page. (rmaInit.jsp)

<%-- tpl:insert page="/layoutOutlet.jtpl" --%><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<%-- tpl:put name="tagLibArea" --%>
<%@ taglib uri="/WEB-INF/struts-bean.tld" prefix="bean" %>
<%@ taglib uri="/WEB-INF/struts-html.tld" prefix="html" %>
<%@ taglib uri="/WEB-INF/struts-logic.tld" prefix="logic" %>

<jsp:useBean id="rmaForm" type="com.bestchairs.form.RmaForm" scope="session" />

function getAcctInfo()
{

ajaxAction('getAcctNameRMA');
}

function getItemInfo(x)
{
//alert("This form is " + x + ".");
	document.getElementById("acctContact").focus();
	idAjaxAction('getItemInfo',x);
}

function getCodeInfo()
{
	document.getElementById("orderNo").focus();
	ddCodeAction('getCodeInfo');
	
}

function storeCode(dC)
{
	document.getElementById("deftCde").value=dC;
	//alert("I'm working here!");
	
}

function storeWhse(wh)
{
	document.getElementById("itemWhse").value=wh;
	//alert("I'm working here!");
	
}

function toggleDiv(divid, x){
	if(x=='Y'){
    if(document.getElementById(divid).style.display == 'none'){
      document.getElementById(divid).style.display = 'block';
      }
    }else{
      document.getElementById(divid).style.display = 'none';
    }
  }

//Automatically tab forward on ID numbers
 var FormUtil = new Object;
 FormUtil.tabForward = function(oTextbox) {
        var oForm = oTextbox.form;
        //make sure the textbox is not the last field in the form
        if (oForm.elements[oForm.elements.length-1] != oTextbox
&& oTextbox.value.length == oTextbox.getAttribute("maxlength")) {
            for (var i=0; i < oForm.elements.length; i++) {
                if (oForm.elements[i] == oTextbox) {
                    for(var j=i+1; j < oForm.elements.length; j++) {
                        if (oForm.elements[j].type != "hidden") {
                            oForm.elements[j].focus();
                            return;
                        }
                    }
                    return;
                }
            }
        }
    };

</script>

<%-- /tpl:put --%>
<%-- tpl:put name="catalogTypeArea" --%><%-- /tpl:put --%>
<jsp:include page="/css.jsp" flush="true" />

<TITLE>
<%-- tpl:put name="titleArea" --%>Return Merchandise Authorization<%-- /tpl:put --%>
</TITLE>

<%-- tpl:put name="contentArea" --%>
	<%-- tpl:insert page="/contentLayoutOutlet.jtpl" --%>
<script language="JavaScript1.2" type="text/javascript">
<!--
function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}
function MM_swapImage() { //v3.0
  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
function MM_swapImgRestore() { //v3.0
  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}

function MM_changeProp(objName,x,theProp,theValue) { //v6.0
  var obj = MM_findObj(objName);
  if (obj && (theProp.indexOf("style.")==-1 || obj.style)){
    if (theValue == true || theValue == false)
      eval("obj."+theProp+"="+theValue);
    else eval("obj."+theProp+"='"+theValue+"'");
  }
}
//-->
var ref = window.location.href;
</script>

<div id="generalInfo">
		<div id="sideMenu">
			<div class="level1"><%-- tpl:put name="pageLabelArea" --%>RMA Processing
				<div class="level2"><a >Create RMA</a></div>
				<div class="level2"><a >Back to Listing</a></div>		
			<%-- /tpl:put --%></div>
		</div>
		<div id="pageInfoWrapper">
			<div id="pageInfoTop">
			<logic:present name="logonForm" property="userMessage">
			<div id="sysMessage"><bean:write name="logonForm" property="userMessage"/></div>
			</logic:present>
				<%-- tpl:put name="cookieCrumbArea" --%><%-- /tpl:put --%>
				<div id="pageControls">
				<div id="pageCtlTable">
				<table   border="0">				
				<tr>
					<%-- tpl:put name="myFavorites" --%><%-- /tpl:put --%>
					<td><img  ></td>
					
					<td><img   ></td>
					<td  class="pc_Tab">
						<a  
						 
						 rel="nofollow"><span id="pc_tab_printtxt">PRINT</span></a>
					</td>
					<td><a ><img   id="pc_tab_print" border="0" 
						 
						></a>
					</td>
					<td><img   ></td>
				</tr>
				</table>
				</div>
				</div>
			</div>
			<%-- tpl:put name="contentArea" --%>
			
			
			<div id="twoColInfo">

<%-- first line of table used to display errors --%>
<h3>Return Merchandise Authorization</h3>
<html:form action="/rma" method="get">
<html:hidden property="firstRun" value="N"></html:hidden>
<input type="hidden" name="rmaIdNo" value="<bean:write name="rmaForm" property="rmaIdNo"/>">
<input type="hidden" name="deftCde" value="<bean:write name="rmaForm" property="defectCode"/>">
<input type="hidden" name="userName" value="<bean:write name="rmaForm" property="userName"/>">
<input type="hidden" name="userid" value="<bean:write name="rmaForm" property="userid"/>">
<input type="hidden" name="ssmIdNo" value="<bean:write name="rmaForm" property="ssmIdNo"/>">
<input type="hidden" name="timeEnt" value="<bean:write name="rmaForm" property="timeEnt"/>">
<input type="hidden" name="itemWhse" value="<bean:write name="rmaForm" property="itemWhse"/>">
<input type="hidden" name="status" value="U">

<td  >Date:</td>
		<td  ><html:text property="curDate" styleClass="inputBoxNotBold"></html:text></td>
	</tr>
	<tr>
		<td  >Account #: </td>
		<td  ><html:text property="acctNo" size="6" maxlength="6" onblur="getAcctInfo()" styleClass="inputBoxNotBold"></html:text></td>
		<td >Model #:</td>
		<td ><html:text property="modelNo" styleClass="inputBoxNotBold"></html:text></td>
		
	</tr>
	<tr>
		<td >Account Name: </td>
		<td ><html:text property="acctName" size="30" maxlength="30" styleClass="inputBoxNotBold"></html:text></td>
		<td >Fabric #:</td>
		<td ><html:text property="fabricNo" styleClass="inputBoxNotBold"></html:text></td>	
		
	</tr>
	
	<tr>
		<td >Contact: </td>
		<td ><html:text property="acctContact" size="30" styleClass="inputBoxNotBold" onfocus= "this.style.backgroundColor='ffffcc'; this.style.color = 'Blue';" onblur="this.style.backgroundColor='Window'; this.style.color='WindowText';"></html:text></td>
		<td >Phone #: </td>
		<td ><html:text property="phoneNo" size="15" styleClass="inputBoxNotBold"></html:text></td>
	</tr>
	<tr>
		<td  class="detail_center"> </td>
	</tr>
	<tr>
		<td  class="detail_left_bold">Pick Up Address </td>
		<td  class="detail_left_bold">Type of RMA</td>
	</tr>
	<tr>
		<td >Line 1:</td><td ><html:text property="addOne" size="30" styleClass="inputBoxNotBold"></html:text></td>
		<td >
		<SELECT name="rmaType"> 
			<OPTION value="">Select RMA Type</OPTION>
			   	<logic:iterate name = "rmaForm" property = "rmaTypeDD" id="rmaDD" type="com.bestchairs.model.RmaWCI">
						<OPTION value="<bean:write name = "rmaDD" property="rmaTypeCode" filter="false"/>""
						 <%=rmaForm.getRmaType().equals(rmaDD.getRmaTypeCode())?"selected":""%>><bean:write name = "rmaDD" property="rmaTypeDesc" filter="false"/></OPTION>	
				</logic:iterate>
		</SELECT>
		</td>
	</tr>
	<tr>
		<td >Line 2:</td><td ><html:text property="addTwo" size="30" styleClass="inputBoxNotBold"></html:text></td>
		<td >(Customer Service will order replacement if required.)</td>
	</tr>
	<tr>
		<td >City, State:</td><td ><html:text property="addCity" size="30" styleClass="inputBoxNotBold">City</html:text> , 
					<html:select property="addState" size="1">
							<option value=" ">--</option>
							<option value = "<bean:write name="rmaForm" property="addState" />" selected><bean:write name="rmaForm" property="addState" /></option>	
							<option value="N/A">N/A</option>
							<option value="AK">AK</option>
							<option value="AL">AL</option>
							<option value="AR">AR</option>
							<option value="AZ">AZ</option>
							<option value="CA">CA</option>
							<option value="CO">CO</option>
							<option value="CT">CT</option>
							<option value="DC">DC</option>
							<option value="DE">DE</option>
							<option value="FL">FL</option>
							<option value="GA">GA</option>
							<option value="HI">HI</option>
							<option value="IA">IA</option>
							<option value="ID">ID</option>
							<option value="IL">IL</option>
							<option value="IN">IN</option>
							<option value="KS">KS</option>
							<option value="KY">KY</option>
							<option value="LA">LA</option>
							<option value="MA">MA</option>
							<option value="MD">MD</option>
							<option value="ME">ME</option>
							<option value="MI">MI</option>
							<option value="MN">MN</option>
							<option value="MO">MO</option>
							<option value="MS">MS</option>
							<option value="MT">MT</option>
							<option value="NC">NC</option>
							<option value="ND">ND</option>
							<option value="NE">NE</option>
							<option value="NH">NH</option>
							<option value="NJ">NJ</option>
							<option value="NM">NM</option>
							<option value="NV">NV</option>
							<option value="NY">NY</option>
							<option value="OH">OH</option>
							<option value="OK">OK</option>
							<option value="OR">OR</option>
							<option value="PA">PA</option>
							<option value="RI">RI</option>
							<option value="SC">SC</option>
							<option value="SD">SD</option>
							<option value="TN">TN</option>
							<option value="TX">TX</option>
							<option value="UT">UT</option>
							<option value="VA">VA</option>
							<option value="VT">VT</option>
							<option value="WA">WA</option>
							<option value="WI">WI</option>
							<option value="WV">WV</option>
							<option value="WY">WY</option>
						</html:select>
	</td><td ></td></tr>
	<tr>
	<td >
						Zip: </td><td ><html:text property="addZip" size="9" styleClass="inputBoxNotBold">Zip</html:text></td>
		<td ></td>
	</tr>
	<tr>
		<td >Country:</td><td ><html:text property="addCountry" styleClass="inputBoxNotBold"></html:text></td>
		<td ></td>
	</tr>	
	<tr>
		<td  class="detail_center"> </td>
	</tr>	
	<tr>
		<td >Defect Codes: </td>
		<td >
		<SELECT name="defectType" onchange="getCodeInfo()"> 
			<OPTION value="">Select Defect Type</OPTION>
			   	<logic:iterate name = "rmaForm" property = "defectTypeDD" id="typeDD" type="com.bestchairs.model.RmaWCI">
						<OPTION value="<bean:write name = "typeDD" property="defectTypeCode" filter="false"/>""
						 <%=rmaForm.getDefectType().equals(typeDD.getDefectTypeCode())?"selected":""%>><bean:write name = "typeDD" property="defectTypeDesc" filter="false"/></OPTION>	
				</logic:iterate>
		</SELECT>
		
		          
		
		<SELECT name="defectCode" onchange="storeCode(this)"> 
			<OPTION value="">Select Defect Code</OPTION>
			   	<logic:iterate name = "rmaForm" property = "defectCodeDD" id="codeDD" type="com.bestchairs.model.RmaWCI">
					<OPTION value="<bean:write name = "codeDD" property="defectCodeCode" filter="false"/>" SELECTED><bean:write name = "codeDD" property="defectCodeDesc" filter="false"/></OPTION>	
				</logic:iterate>
		</SELECT>
		</td>
	</tr>	
	<tr>
		<td >Description of Problem: </td>
	</tr>
	<tr>
		<td >
			<textarea name="problemDesc" rows="5" cols="70" wrap="hard"><bean:write name="rmaForm" property="problemDesc" filter="false"/></textarea>
		</td>
	</tr>
	<tr>
		<td  class="detail_center"> </td>
	</tr>
	<tr>
	<td  >
	<table >
	<tr>
		<td >Unit Boxed and Available for Pickup:</td>
		<td ><html:radio property="boxed" value="Y">Yes</html:radio>     <html:radio property="boxed" value="N">No</html:radio></td>
	</tr>	
	<tr>
		<td >Digital Picture Available:</td>
		<td ><html:radio property="picture" value="Y" onmousedown="toggleDiv('mydiv','Y');">Yes</html:radio>     <html:radio property="picture" value="N" onmousedown="toggleDiv('mydiv');">No</html:radio></td>
	</tr>	
	<tr>
		<td >
			<div id="mydiv" style="display:none"><a href="mailto:pictures@bestHF.com?subject=Picture for RMA Number <bean:write name="rmaForm" / rel="nofollow">" class="link">Email picture here.</a></div>
		</td>
	</tr>
	<tr>
		<td >Quality Inspection Required:</td>
		<td ><html:radio property="quality" value="Y">Yes</html:radio>     <html:radio property="quality" value="N">No</html:radio></td>
	</tr>
	</table>
	</td>
	</tr>	
	<tr>
		<td  class="detail_center"> </td>
	</tr>
	<tr>
		<td  class="detail_center"><html:submit></html:submit></td>
	</tr>	
</table>
</html:form>
</div>
<div id="resultTable">

</div>

<%-- /tpl:put --%>
		</div>
	</div><%-- /tpl:insert --%> 	
	
	<%-- /tpl:put --%>
		<div id="footerWrapper">
			<jsp:include page="/common/footer.jsp" flush="true" />
		</div>			 
	</div>
</div>
 
</body>
</html>
<%-- /tpl:insert --%>

And here's ajaxObject.js, just in case you need to reference it.

/**
 * ajaxObject.js
 *
 * Collection of Scripts to allow page communication from browser to (struts) server
 * ie can reload part instead of full page
 *
 * How to use
 * ==========
 * 1) Call retrieveURL from the relevant event on the HTML page (e.g. onclick)
 * 2) Pass the url to contact (e.g. Struts Action) and the name of the HTML form to post
 * 3) When the server responds ...
 *		 - the script loops through the response , looking for <span id="name">newContent</span>
 * 		 - each <span> tag in the *existing* document will be replaced with newContent
 *
 * NOTE: <span id="name"> is case sensitive. Name *must* follow the first quote mark and end in a quote
 *		 Everything after the first '>' mark until </span> is considered content.
 *		 Empty Sections should be in the format <span id="name"></span>
 */
 
//global variables
var actionFwd = null;
var actionForm = null;
var url2 = null;
var req2;
var acNo=null;
var ssmIdNo=null;
var ordNo = null;
var lineNo = null;
var seqNo = null;
var dftCode=null;
 
function ajaxAction(action)
{
	actionFwd = action;
	acNo = document.getElementById("acctNo").value;
	ssmIdNo = document.getElementById("ssmIdNo").value;
	url2 = "ajax2.do?action="+action+"&acctNo="+acNo+"&ssmIdNo="+ssmIdNo+"&ajaxId="+ new Date().getTime();
	
//alert(" ajaxObject.js action="+action); 
//alert("url2:"+url2);
	retrieveAjaxURL(url2);
}

function idAjaxAction(action, form)
{
	actionFwd = action;
	actionForm = form;
	ordNo = document.getElementById("orderNo").value;
	lineNo = document.getElementById("lineNo").value;
	seqNo = document.getElementById("seqNo").value;
	
	url2 = "ajax2.do?action="+action+"&orderNo="+ordNo+"&lineNo="+lineNo+"&seqNo="+seqNo+"&form="+form+"&ajaxId="+ new Date().getTime();
	
//alert(" ajaxObject.js action="+action); 
//alert("url2:"+url2);
	retrieveAjaxURL(url2);
}

function ddCodeAction(action)
{
	actionFwd = action;
	code = document.getElementById("defectType").value;
	dftCode = document.getElementById("deftCde").value;
	url2 = "ajax2.do?action="+action+"&defectType="+code+"&deftCde="+dftCode+"&ajaxId="+ new Date().getTime();
	
//alert(" ajaxObject.js action="+action); 
//alert("url2:"+url2);
	if(code!=""){
	retrieveAjaxURL(url2);
	} 
}

/**  
  * Get the contents of the URL via an Ajax call
  * url - to get content from (e.g. /struts-ajax/sampleajax.do?ask=COMMAND_NAME_1) 
  * nodeToOverWrite - when callback is made
  * nameOfFormToPost - which form values will be posted up to the server as part 
  *					of the request (can be null)
  */
function retrieveAjaxURL(url2) 
{
    // Do the Ajax call
    if (window.XMLHttpRequest) { 
    	// Non-IE browsers
      	req2 = new XMLHttpRequest(); 
       	try {
      		req2.open("GET", url2, true); //was get
       	} 
       	catch (e)  	{
        	alert("Problem Communicating with Server\n"+e);
       	}

req2.onreadystatechange = acctNameStateChange;
       	req2.send(null);
	} else if (window.ActiveXObject) { 
		// IE
      	req2 = new ActiveXObject("Microsoft.XMLHTTP");
      	if(req2) { 
        	req2.open("GET", url2, true);
        	req2.onreadystatechange = acctNameStateChange;
        	req2.send();
      	}
	}
}

/*
 * Set as the callback method for when XmlHttpRequest State Changes 
 * used by retrieveUrl
 */
function acctNameStateChange() 
{
	if (req2.readyState == 4) { // Complete
    	if (req2.status == 200) { // OK response                 
        	//Split the text response into Span elements
        	getFormFieldText();
      	}else {
        	alert("Problem with server response:\n " + req2.statusText);
      	}
	}
}

function getAcInfoTxt()
{
		if (req2.responseText != ""){	
	 		fullT = req2.responseText;
	 		//alert(fullT);
	 		if(fullT=="notAuthorized"){
	 			alert("You are not authorized for this customer.\n\nIf you still require this RMA to be created, contact Customer Service.\n\nExiting RMA creation process.");
	 			window.location = "rma.do?firstRun=list";
	 		}
	 		else{
	 		var mySplitResult = fullT.split("|");
	 			
	 		document.rmaForm.acctName.value=mySplitResult[0];
	 		document.rmaForm.addOne.value=mySplitResult[1];
	 		document.rmaForm.addTwo.value=mySplitResult[2];
	 		document.rmaForm.addCity.value=mySplitResult[3];
	 		document.rmaForm.addState.value=mySplitResult[4];
	 		document.rmaForm.addZip.value=mySplitResult[5];
	 		document.rmaForm.addCountry.value=mySplitResult[6];
	 		document.rmaForm.phoneNo.value=mySplitResult[7];
	 		}

}
	 	else{
	 		fullT = "";
			alert("Account name not found.");  		
	 	}
}

/*function getCodeInfo()
{
		if (req2.responseText != ""){	
	 		fullArray = req2.responseText;
	 		
	 		alert("fullArray: "+fullArray);
	 		
	 		//var mySplitResult = fullT.split("|");
	 			
	 		//document.rmaForm.acctName.value=mySplitResult[0];
	 		//document.rmaForm.addOne.value=mySplitResult[1];
	 		//document.rmaForm.addTwo.value=mySplitResult[2];
	 		//document.rmaForm.addCity.value=mySplitResult[3];
	 		//document.rmaForm.addState.value=mySplitResult[4];
	 		//document.rmaForm.addZip.value=mySplitResult[5];
	 		//document.rmaForm.addCountry.value=mySplitResult[6];
	 		//document.rmaForm.phoneNo.value=mySplitResult[7];

}
	 	else{
	 		fullArray = "";
			alert("Codes not found.");  		
	 	}
}*/

Thanks!
-Terri

well I am not going to go through all of that code, but I have a feeling that id != name

Eric

It's reasons like this I am thankful for Javascript libraries, JSON, forEach loops and css classes.