...

View Full Version : AJAX with Prototype not working in IE--Please Help



lkj773
09-24-2008, 08:59 PM
Hi everyone,

I inherited a piece of AJAX code, which works in Firefox, Opera, and Safari, but not in IE. Unfortunately, I'm not fluent enough in AJAX to be able to effectively troubleshoot the problem. Could someone please take a look at my code and help me get it working? I would greatly appreciate any assistance.

I'm dealing with a basic "energy calculator," which reads in values from a textbox (average_usage) and outputs them in the region.

A stripped down version of the code is as follows:


<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Calc</title>
<script type="text/javascript" charset="utf-8" src="js/prototype.js"></script>
<script type="text/javascript" charset="utf-8" src="js/prototype.helpers.js"></script>
<script type="text/javascript" charset="utf-8" src="js/calc.js"></script>
</head>
<body>
<form name="average_usage" id="purchaseForm" method="POST" action="#">
<table>
<tr><td>Enter your monthly kWh consumption below:</td><td>Total</td></tr>
<tr><td><input type="text" name="average_usage" id="average_usage" value="" /></td><td><span id="totalBill">Enter kWh usage</span></td></tr>
<tr><td colspan="2">
<input type="radio" name="billing_type" id="billingType1" value="monthly-custom" /> Monthly
<input type="radio" name="billing_type" id="billingType2" value="yearly" checked="checked" /> Yearly (1 Free Month!) </td></tr>
<tr><td><span id="quoteMessage"> </span></td></tr>
<tr><td><input type='submit' name='submit' value='Submit' /></td></tr>
</table>
<script type="text/javascript" charset="utf-8">
Event.observe('average_usage', 'keyup', signup.averageBusinessUsageUpdate);
Event.observe('average_usage', 'keyup', signup.printQuoteMessage);
Event.observe('billingType1', 'click', signup.averageBusinessUsageUpdate);
Event.observe('billingType2', 'click', signup.averageBusinessUsageUpdate);
signup.averageBusinessUsageUpdate();
signup.printQuoteMessage();
</script>
</form>
</body>
</html>



The three files in the js folder are as follows:

calc.js:

var Signup = Class.create();

Signup.prototype = {
initialize: function() {

},

submit: function(e) {
Event.stop(e);
if(Form.check('purchaseForm'))
$('purchaseForm').submit();
},


averageUsageUpdate: function() {
var multiplier = (Form.getRadioValue('purchaseForm', 'billing_type') == 'monthly-custom') ? $F('kwh_multiplier') : 11 * $F('kwh_multiplier');
if(!parseInt($F('average_usage')))
$('totalBill').update('Enter kWh usage');
else
{
var value = Math.round($F('average_usage') * multiplier * 100)/100;
$('totalBill').update('$ ' + value);
}
},

discountAverageUsageUpdate: function() {
var multiplier = (Form.getRadioValue('purchaseForm', 'billing_type') == 'yearly-custom') ? 11 * $F('kwh_multiplier') : $F('kwh_multiplier');
if(!parseInt($F('average_usage')))
$('totalBill').update('Enter Custom kWh Usage');
else
{
var value = Math.round($F('average_usage') * multiplier * 0.8 * 100)/100;
$('totalBill').update('$ ' + value);
}
},

scaleMultiplierUpdate: function() {
var avekwh = $F('average_usage')
if(avekwh <= 2000) {
var scalemultiplier = 0.02;
}
else {
var scalemultiplier = 0.018;
}
$('scale-multiplier').value = scalemultiplier;

},


averageBusinessUsageUpdate: function() {

var avekwh = $F('average_usage')
if(avekwh <= 2000) {
var multiplier = 0.02;
}
else {
var multiplier = 0.018;
}

if(!parseInt($F('average_usage'))) {
$('totalBill').update('Enter kWh usage');
}
else
{
var value = (Form.getRadioValue('purchaseForm', 'billing_type') == 'yearly') ? Math.round($F('average_usage') * multiplier * 11 * 100)/100 : Math.round($F('average_usage') * multiplier * 100)/100;
$('totalBill').update('$ ' + value);
}
},


printQuoteMessage: function () {
var avekwh = $F('average_usage')
if(avekwh > 7499) {
$('quoteMessage').update('Your consumption is fairly high, please get in contact with us directly.');
}
else {
$('quoteMessage').update('Click Submit to proceed.');
}

},

changeRadioValue: function () {
if(parseInt($F('average_usage'))) {
document.purchaseForm.billing_type[4].checked = true;
}
},


showLogin: function() {
new Effect.BlindDown('loginContainer', {duration:0.4});
}

};

var signup = new Signup();

var Calculator = Class.create();

Calculator.prototype = {
initialize: function() {

},

submit: function(e) {

if((Form.getRadioValue('purchaseForm', 'billing_type') == 'yearly-custom')) {
Event.stop(e);
if(Form.checkTwo('purchaseForm'))
$('purchaseForm').submit();
} else if ((Form.getRadioValue('purchaseForm', 'billing_type') == 'monthly-custom')) {
Event.stop(e);
if(Form.checkTwo('purchaseForm'))
$('purchaseForm').submit();
}
}


};

var calculator = new Calculator();



prototype.helpers.js

Form.checkTwo = function(form) {
var isValid = true;
var averageUsage = '';

$(form).getElements().each(function(e) {
if(e.name == 'average_usage')
averageUsage = $F(e);
});

if(!parseInt(averageUsage)) {
isValid = false;
new Effect.Shake($(form)['average_usage']);
}

return isValid;
};


Form.getRadioValue = function(formName, radioName) {
return Form.getInputs(formName,'radio',radioName).find(function(radio) { return radio.checked; }).value;
};



And finally, the prototype.js file is the latest version of the Prototype library (1.6.0.2 found here (http://prototypejs.org/assets/2008/1/25/prototype-1.6.0.2.js)).


If somebody could please help me get this to work in IE, I would be very thankful.

ohgod
09-24-2008, 09:38 PM
does it give an error?

lkj773
09-25-2008, 02:21 PM
Yes it does.

Line: 3519
Char: 5
Error: Object doesn't support this property or method
Code: 0
URL: calc/calc.html

Is that helpful at all?

ohgod
09-25-2008, 02:38 PM
despite it actually working in the other browsers, do any of the others throw any error at all?



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum