I'm getting the above error on one page in my Struts web application in IE10, but not in chrome or firefox. Edit: doesn't work in any version of internet explorer
The javascript function that is apparently undefined is defined on the JSP that calls it. I have looked at other questions involving this error, but they all seem to be a problem with .Net or jQuery, which are not used in this page (though jQuery is used elsewhere in the application).
Here is a cut down version of the JSP: (sorry it's still huge, I didn't write it, so couldn't be sure what wouldn't be relevant)
<%@ taglib uri="/tags/struts-bean" prefix="bean" %>
<%@ taglib uri="/tags/struts-html" prefix="html" %>
<%@ taglib uri="/tags/struts-logic" prefix="logic" %>
<%@ taglib uri="/tags/XXX" prefix="XXX" %>
<%@ taglib uri="/tags/struts-tiles" prefix="tiles" %>
<tiles:insert page="/templates/acceptance-layout.jsp" flush="false">
<tiles:put name="pagename" value="paymentdetails" type="String" />
<tiles:put name="errors" type="String"/>
<tiles:put name="body" type="String">
<script language="JavaScript" type="text/javascript">
<!--
autoCompOff('PaymentDetailsForm');
-->
function setShowCard(value){
if(value != ""){
if(value == "F" || value == "O")
document.getElementById("isPageReloaded").value = "Y";
else if(value == "N" || value == "S")
document.getElementById("isPageReloaded").value = "N";
}
}
</script>
<html:form action="PaymentDetails" method="POST">
<input type="hidden" id="redirectLink" name="redirectLink" value=""/>
<input type="hidden" name="totalprice" value="<bean:write name='wrapper' property='totalPrice' />" />
<input type="hidden" name="paymentdetails.recalc" value="" />
<input type="hidden" id="showWaitertPage" name="showWaitertPage" value="md-loading"/>
<section class="content-main">
<div class="inner-content">
<div class="box box-summary">
<div class="box-body">
<label for="cardowner" class="form-label">Whose card is this</label>
<bean:define id="styleClass"><bean:write name="PaymentDetailsForm" property="styleClass" /></bean:define>
<XXX:select property="cardHolder" id="cardowner" styleClass="<%=styleClass %>" onchange="setShowCard(this.value)" required ="required">
<XXX:xxxOptionsCollection name="cardHolderList" />
<input type="hidden" id="isPageReloaded" name="pageReload" value="N" />
</XXX:select>
</div>
</div>
</div> <!-- END .inner-content -->
</section>
<script>
applyCreditCardCharge(document.PaymentDetailsForm,document.PaymentDetailsForm.cardType.value);
</script>
</html:form>
</tiles:put>
</tiles:insert>
And here is the html that I get from the developer tools on IE10:
<!doctype html>
<!-- HTML5 Boilerplate -->
<!--[if lt IE 7]><html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
<!--[if (IE 7)&!(IEMobile)]><html class="no-js lt-ie9 lt-ie8" lang="en"><![endif]-->
<!--[if (IE 8)&!(IEMobile)]><html class="no-js lt-ie9" lang="en"><![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js gt-ie8" lang="en"><!--<![endif]-->
<head>
<meta charset="utf-8">
<base href="http://XXX/pages/paymentdetails.jsp">
<script src="scripts/libs/modernizr-2.6.2.js"></script>
<script src="scripts/util.js?v1.9"></script>
<script src="scripts/libs/jquery-1.10.2.min.js"></script>
<script src="scripts/form.js?v1.0"></script>
<meta name = "format-detection" content = "telephone=no">
</head>
<body id="top" class="annual js-form">
<div id="outer-wrap">
<script language="JavaScript" type="text/javascript">
<!--
autoCompOff('PaymentDetailsForm');
-->
function setShowCard(value){
console.log("got here");
if(value != ""){
if(value == "F" || value == "O")
document.getElementById("isPageReloaded").value = "Y";
else if(value == "N" || value == "S")
document.getElementById("isPageReloaded").value = "N";
}
}
</script>
<form name="PaymentDetailsForm" method="POST" action="/XXX/PaymentDetails.do">
<input type="hidden" id="redirectLink" name="redirectLink" value=""/>
<input type="hidden" name="totalprice" value="1963.66" />
<input type="hidden" name="paymentdetails.recalc" value="" />
<input type="hidden" id="showWaitertPage" name="showWaitertPage" value="md-loading"/>
<section class="content-main">
<div class="inner-content">
<div class="box box-editable editing js-show-hide">
<div class="box-body">
<div class="form-row editable js-ufs">
<label for="cardowner" class="form-label">Whose card is this</label>
<select name="cardHolder" id="cardowner" required="required" onchange="setShowCard(this.value)" class="js-ufs-trigger"><option value="" selected="selected"></option>
<option value="N">User</option>
<option value="S">Partner/Spouse</option>
<option value="F">Family member</option>
<option value="O">Other</option>
<input type="hidden" id="isPageReloaded" name="pageReload" value="N" /></select>
</div>
</div>
</div>
</div> <!-- END .inner-content -->
</section>
<script>
applyCreditCardCharge(document.PaymentDetailsForm,document.PaymentDetailsForm.cardType.value);
</script>
</form>
</div>
<script src="scripts/helpers.js"></script>
<script src="scripts/conditional-loader.js?v0.9"></script>
</body>
</html>
Any help would be very much appreciated.
I just needed to move the autoCompOff method below the method that wasn't being found. If anyone knows I'd love to know why that worked.