Sidebar Sidebar
Become a MacRumors Supporter for $50/year with no ads, ability to filter front page stories, and private forums.

Javascript help needed... quickly

tominated

tominated

macrumors 68000
Original poster
Jul 7, 2006
1,723
0
Queensland, Australia
I'm making a simple price calculator for where my dad works that calculates prices for some customized mail thing. I am doing it in JS/HTML/CSS because it is for the customer, so they wont have to install anything to run it. Here is the JS code (it uses jQuery):

Code: 
$(function(){
	
	var job
	var a = $("#numRecords").val()
	var b = $("#mailpackQuantity").val()
	var c = $("#simplexImpressions").val()
	
	$('#jobName').change(
		function() {
			job = $("#jobName").val()
			$.ajax({
				type: "GET",
				url: "jobs/" + job + ".xml",
				dataType: "xml",
				success: function(xml) {
			    	
					$(xml).find('hours').each(function(){
			        	var d = $(this).attr('value')
			    	});
			
					$(xml).find('programming').each(function(){
			        	var e = $(this).attr('cost')
			    	});
			
					$(xml).find('processing').each(function(){
			        	var f = $(this).attr('cost')
			    	});
			
					$(xml).find('printing').each(function(){
			        	var g = $(this).attr('cost')
			    	});
			
					$(xml).find('inserting').each(function(){
			        	var h = $(this).attr('cost')
			    	});
			
					$(xml).find('lodgement').each(function(){
			        	var i = $(this).attr('cost')
			    	});
				}
			});
			
			var result = ( parseInt(d) * parseInt(e) ) + ( parseInt(a) * parseInt(f) / 1000 ) + ( parseInt(c) * parseInt(g) / 1000 ) + ( parseInt(b) * parseInt(h) / 1000 ) + parseInt(i)
			
			$('#result').text( result );

	});
	
});

Firebug says that the variable d is not defined. I have a feeling it's because it's using an each loop. I don't know how to fix this, because i sort of 'borrowed ' some code. Please help quickly, because my dad needs it very soon. If you need my html or xml file, i'd be happy to post it, as long as you don't copy it ;)
Thanks, Tominated
 
Looks like a simple scope issue. Just predefine them like so,
Code: 
$(function(){
	var job
	var a = $("#numRecords").val()
	var b = $("#mailpackQuantity").val()
	var c = $("#simplexImpressions").val()
        var d, e, f, g, h, i;
.
.
.
And take away the var statements from those letters in each of those xml sections.

Also an aside, I know JavaScript doesn't require semicolons at the end of lines, but I still consider it a good idea, and good programming practice.
 
thanks angelwatt, that fixed that problem. Now there is a new one. in the output div, it is saying that it isn't a number. Isn't that what the parseInt() bit should fix though?
 
tominated said:
thanks angelwatt, that fixed that problem. Now there is a new one. in the output div, it is saying that it isn't a number. Isn't that what the parseInt() bit should fix though?
Click to expand...

parseInt works as long as there are numbers. I've never used jQuery so can't make head or tail of your code, but I would use alerts to make sure the data is being read as you think,

Code: 
alert("a='"+a+"'\nb='"+b ...);
 
tominated said:
i don't get it. should i use alerts to verify that the variables are numbers?
Click to expand...

Right, this just makes sure you're really using numbers by letting you see them. You can also setup try blocks and use parseInt earlier on each variable to get specific error message per variable, that would take longer to setup.
 
for the variables d and onwards, the alert says that it is undefined. BUT, when I change the drop down box back to the please select option, the alert shows the correct value. Any ideas?
 
tominated said:
for the variables d and onwards, the alert says that it is undefined. BUT, when I change the drop down box back to the please select option, the alert shows the correct value. Any ideas?
Click to expand...

Could you supply some of the HTML that the JavaScript is accessing?
 
here is the html
Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Price Calculator</title>
<script src="js/jquery-1.2.3.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/javascript.js" type="text/javascript" charset="utf-8"></script>
<link href="css/reset.css" rel="stylesheet" type="text/css" />
<link href="css/generic.css" rel="stylesheet" type="text/css" />
<link href="css/styles.css" rel="stylesheet" type="text/css" />
<!--[if lte IE 6]> <link href="css/ie.css" rel="stylesheet" type="text/css" /> <![endif]-->
</head>

<body>
<div id="container">
	<div id="header">
		<h1>Salmat Price Calculator</h1>
		<a href="#" id="switchToAdmin">Administration</a>
	</div>
	<div id="content">
		<form id="userEditable" method="post" action="">
			<label>
				Job Name
				<select name="jobName" id="jobName">
					<option value="">Please Select</option>
					<option value="Test">Test</option>
				</select>
			</label>
			<label>
				Number of Records
				<input name="numRecords" id="numRecords" type="text" />
			</label>
			<label>
				Quantity of Mail-packs
				<input name="mailpackQuantity" id="mailpackQuantity" type="text" />
			</label>
			<label>
				Number of Simplex Impressions
				<input name="simplexImpressions" id="simplexImpressions" type="text" />
			</label>
		</form>
		
		<p id="result"></p>
	</div>
</div>
</body>
</html>

here is the xml file
Code: 
<?xml version="1.0" encoding="iso-8859-1"?>
<job>
	<hours value="5" var="d" /> 
	<programming cost="120" per="hour" var="e" />
	<processing cost="15" per="thousand records" var="f" />
	<printing cost="28" per="thousand impressions" var="g" />
	<inserting cost="30" per="thousand mailpacks" var="h" />
	<lodgement cost="50" var="i" />
</job>
 
I'm going to make a guess (educated guess hopefully). I think result is being calculated before the Ajax portion is done running, and since it hasn't run those variables are null. You can test this by placing an alert inside the Ajax portion and one right before result is calculated and see which one pops up first.

This could be happening because the 'A' in Ajax means asynchronous and the JavaScript will continue on while that runs (not sure if jQuery can do synchronous calls, SJAX?). If this turns out to be what is happening you can place that code inside the success portion of the Ajax section.
 
i just found out by making all the variables have the parseInt thing that it's he first 3 variables from the form that are the problem. So is there any way I can fix this? BTW: sorry for all the questions, my dad said it would be much better as a web app than a VB app for winblows.
 
tominated said:
i just found out by making all the variables have the parseInt thing that it's he first 3 variables from the form that are the problem. So is there any way I can fix this? BTW: sorry for all the questions, my dad said it would be much better as a web app than a VB app for winblows.
Click to expand...

Alright, I'll try a different educated guess ;)

I can't tell from the code you've provided how/when the JavaScript gets activated (didn't see a submit button). Is it possible that those first three variables are trying to be accessed before the page loads? If you do alerts after those variable assignments are done do they show the expected answers (from what you enter in the form)? Do you use the Error Console in the browser to monitor if any erros or warning pop while you use the page? It can be handy.
 
tominated said:
good point. I'll try and set the variables inside the function.

Hold on, after doing that, it works!! Thank you!!
Click to expand...

Sweet. That was an odd problem. I'm actually working through a similar one dealing with getting image attributes before its displayed. That's kind of why I came up with that idea.
 
You must log in or register to reply here.
Register on MacRumors! This sidebar will go away, and you'll see fewer ads.
Top Bottom
Back