Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New to the CF scene
    Join Date
    Sep 2008
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    AJAX with Prototype not working in IE--Please Help

    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:

    Code:
    <!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:
    Code:
    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
    Code:
    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).


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

  • #2
    Regular Coder ohgod's Avatar
    Join Date
    Jun 2008
    Location
    Ohio
    Posts
    579
    Thanks
    6
    Thanked 69 Times in 69 Posts
    does it give an error?

  • #3
    New to the CF scene
    Join Date
    Sep 2008
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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?

  • #4
    Regular Coder ohgod's Avatar
    Join Date
    Jun 2008
    Location
    Ohio
    Posts
    579
    Thanks
    6
    Thanked 69 Times in 69 Posts
    despite it actually working in the other browsers, do any of the others throw any error at all?


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •