Javascript help needed... quickly

Discussion in 'Web Design and Development' started by tominated, Feb 17, 2008.

  1. tominated macrumors 68000

    tominated

    Joined:
    Jul 7, 2006
    Location:
    Queensland, Australia
    #1
    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
     
  2. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #2
    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.
     
  3. tominated thread starter macrumors 68000

    tominated

    Joined:
    Jul 7, 2006
    Location:
    Queensland, Australia
    #3
    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?
     
  4. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #4
    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 ...);
     
  5. tominated thread starter macrumors 68000

    tominated

    Joined:
    Jul 7, 2006
    Location:
    Queensland, Australia
    #5
    i don't get it. should i use alerts to verify that the variables are numbers?
     
  6. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #6
    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.
     
  7. tominated thread starter macrumors 68000

    tominated

    Joined:
    Jul 7, 2006
    Location:
    Queensland, Australia
    #7
    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?
     
  8. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #8
    Could you supply some of the HTML that the JavaScript is accessing?
     
  9. dalvin200 macrumors 68040

    Joined:
    Mar 24, 2006
    Location:
    Nottingham, UK
    #9
    can't you debug and set some breakpoints?

    easier to find out the values of your variables..
     
  10. tominated thread starter macrumors 68000

    tominated

    Joined:
    Jul 7, 2006
    Location:
    Queensland, Australia
    #10
    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>
     
  11. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #11
    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.
     
  12. tominated thread starter macrumors 68000

    tominated

    Joined:
    Jul 7, 2006
    Location:
    Queensland, Australia
    #12
    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.
     
  13. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #13
    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.
     
  14. tominated thread starter macrumors 68000

    tominated

    Joined:
    Jul 7, 2006
    Location:
    Queensland, Australia
    #14
    good point. I'll try and set the variables inside the function.

    Hold on, after doing that, it works!! Thank you!!
     
  15. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #15
    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.
     

Share This Page