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 5 of 5
  1. #1
    New to the CF scene
    Join Date
    May 2010
    Location
    Minnesota, USA
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Help with JavaScript Case Problem

    Greetings,

    I am new to these forums, and am wrapping up a JavaScript class for the year.
    I am in desperate need of help (which I usually obtain from my Instructor, but she is away from the office today) with my Tutorial 12, Case Problem 1 : New Perspectives JavaScript and AJAX 2nd Edition( by Patrick Carey). I am running xampp as my testing environment, and using Dreamweaver CS4 to write my code.

    I've completed the code work, however I am having issues with Step 6 code.

    6) Add the retrieveOrders() function. Within this function, do the following:
    a. Create variables named user, pwd, sButton, and orderHistory to refrence the elements on the Web page with ID values of userID, pwd, submitButton, and orderhistory, respectively.

    b. Add and event handler to the sButton object that runs when the button is clicked. Steps c through e should all be done within this event handler.

    c . Create variables named userValue and pwdValue equal to the values entered into the user and pwd input boxes. respectively.

    d. If userValue and pwdValue both are non-empty, create a request object named reqOrders. Using the get method, open the following URL with the request object /cgi-bin/wworders.pl?user=userValue&pwd=pwdValue
    where userValue and pwdValue are the values of userValue and pwdValue variables, respectively.

    e. Send the request and then wait for a complete and error-free response from the server. When the response arrives, store the text of the response in the orderHistory object on the Web page.
    ---
    Here is the code from my html file and my .js file(s)
    NOTE: I had to copy the addEvent function from wwlibrary.js to eliminate an error of addEvent not defined.

    Code:
    <?xml version="1.0" encoding="UTF-8" ?>
    
    <!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>
    <!-- 
       New Perspectives on JavaScript, 2nd Edition
       Tutorial 12
       Case Problem 1
    
       Wizard Works Order History
       Author: Rachael Magnuson          
       Date: May 11th, 2010             
    
       Filename:         orders.htm
       Supporting files: getorders.js, wwlibrary.js, wwlogo.jpg,
                         wworders.pl, wwstyles.css
    
    
    -->
       <title>Check Your Order History</title>
       <link href="wwstyles.css" rel="stylesheet" type="text/css" />
        <script type="text/javascript" src="wwlibrary.js"></script>
    	<script type="text/javascript" src="getorders.js"></script>
      
    </head>
    
    <body>
       <div id="heading"><img src="wwlogo.jpg" alt="Wizard Works" /></div>
    
       <div id="links">
          <ul>
             <li><a href="sblogger.htm">HOME PAGE</a></li>
             <li class="newgroup"><a href="#">Firecrackers</a></li>
             <li><a href="#">Fountains</a></li>
             <li><a href="#">Cones</a></li>
             <li><a href="#">Rockets</a></li>
             <li><a href="#">Sparklers</a></li>
             <li><a href="#">Assortments</a></li>
             <li class="newgroup"><a href="#">Online Store</a></li>
             <li><a href="#">Shopping Cart</a></li>
             <li><a href="#">View Your Account</a></li>
             <li><a href="#">Track Orders</a></li>
             <li><a href="#">Order History</a></li>
             <li class="newgroup"><a href="#">FAQ</a></li>
             <li><a href="#">Tech Support</a></li>
             <li><a href="#">Safety Manuals</a></li>
             <li><a href="#">Customer Service</a></li>
             <li><a href="#">Contact Us</a></li>
             <li class="newgroup"><a href="#">About Us</a></li>
             <li><a href="#">WW History</a></li>
             <li><a href="#">Fireworks Gallery</a></li>
             <li><a href="#">Fireworks Video</a></li>
             <li><a href="#">Reviews</a></li>
             <li><a href="#">Testimonials</a></li>
          </ul>
       </div>
    
       <div id="main">
    
          <h1>Retrieve Your Order History</h1>
    
          <p id="inputPara">
             <label id="userlabel" for="userid">Enter your user ID</label>
             <input type="text" id="userid" name="userid" />
             <label id="pwdlabel" for="pwd">Enter your password</label>
             <input type="password" id="pwd" name="pwd" />
             
             <input type="button" id="submitButton" value = "View Orders" />
          </p>
    
          <div id="orderhistory"></div>
    
       </div>
    
    </body>
    
    </html>
    Code:
    /*
       New Perspectives on JavaScript, 2nd Edition
       Tutorial 12
       Case Problem 1
    
       Filename: wwlibrary.js
    
    
    
       Functions List:
    
       addEvent(object, evName, fnName, cap)
          Adds an event handler to object where object is the object 
          reference, evName is the name of the event, fnName is the
          reference to the function, and cap specifies the
          capture phase.
    
       XMLHttpRequest()
          Creates a custom XMLHttpRequest object for IE browsers that
          do not support the native XMLHttpRequest object (chiefly
          IE5 and IE6)
    
    
    */
    
    function addEvent(object, evName, fnName, cap) {
       if (object.attachEvent)
           object.attachEvent("on" + evName, fnName);
       else if (object.addEventListener)
           object.addEventListener(evName, fnName, cap);
    }
    
    if (typeof XMLHttpRequest === "undefined") {
       XMLHttpRequest = function() {
          try { return new ActiveXObject("Msxml2.XMLHTTP.6.0"); } 
          catch(e) { 
             try { return new ActiveXObject("Msxml2.XMLHTTP.3.0"); } 
             catch(e) {
                try { return new ActiveXObject("Msxml2.XMLHTTP"); }
                catch(e) {
                   try { return new ActiveXObject("Microsoft.XMLHTTP"); } 
                   catch(e) {
                      throw new Error("Unable to create your request object"); 
                   }
                }
             }
          }
       }
    }
    Code:
    /*
       New Perspectives on JavaScript, 2nd Edition
       Tutorial 12
    
       Case Problem 1
    
       Author: Rachael Magnuson
       Date: May 11th, 2010   
    
       Filename: getorders.js
    
    
    
       Functions List:
    
       retrieveOrders()
          Retrieves the orders from the Web server and displays
          the HTML code in the orderhistory section of the
          document
    
    */
    addEvent(window, "load", retrieveOrders, false);
    
    function addEvent(object, evName, fnName, cap) {
       if (object.attachEvent)
           object.attachEvent("on" + evName, fnName);
       else if (object.addEventListener)
           object.addEventListener(evName, fnName, cap);
    }
    
    
    
    function retrieveOrders(){
    	var user = document.getElementById("userid");
    	var pwd = document.getElementById("pwd");
    	var sButton = document.getElementById("submitButton");
    	var orderHistory = document.getElementById("orderhistory");
    	
    	sButton.onclick = function() {
    		var userValue =escape(user.value);
    		var pwdValue = escape(pwd.value);
    		
    		if (userValue && pwdValue != ""){
    			
    			var reqOrders = new XMLHttpRequest();
    			var reqURL ="/cgi-bin/wworders.pl?skey=" + userValue&pwdValue;
    			reqOrders.open("GET", reqURL);
    			reqOrders.send(null);
    			
    			reqOrders.onreadystatechange=function() {
    				if (this.readyState ==4) {
    					if (this.status == 200) {
    						orderHistory.innerHTML = this.responseText;
    					}
    			} 
    			}
    		}
    		}
    	}

  • #2
    Senior Coder Spudhead's Avatar
    Join Date
    Jun 2002
    Location
    London, UK
    Posts
    1,856
    Thanks
    8
    Thanked 110 Times in 109 Posts
    What's it doing wrong? Are you getting an error?

  • Users who have thanked Spudhead for this post:

    rlmagnus (05-12-2010)

  • #3
    New to the CF scene
    Join Date
    May 2010
    Location
    Minnesota, USA
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts
    I load the HTML file in my browser and type the username and password

    RachelWilson/kaboom

    It's supposed to bring up an order history when I hit the submit button.

    Nothing is happening, however the error console in Firefox is not showing any errors.

    I have the wworders.pl inside my cgi-bin folder, so I do not think that is an issue.

    I'm simply not able to "retreive" the data in the browser.

  • #4
    New to the CF scene
    Join Date
    May 2010
    Location
    Minnesota, USA
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Here's the wworders.pl file:
    Code:
    #!"C:\xampp\perl\bin\perl.exe"
    
    # Confirm that perl is located in the /usr/bin/perl folder on the server
    
    #All perl scripts should use strict
    use strict;
    
    use CGI;
    my $cgi_object = new CGI();
    
    # Print out the http header 
    print $cgi_object->header();
    
    
    # Retrieve the value of the skey parameter 
    my $user = $cgi_object->param('user');
    my $pwd  = $cgi_object->param('pwd');
    
    # This is the hashtable storing a sample of archived orders in HTML format 
    my @orders = (
        { username => "RachelWilson",
          password => "kaboom",
          orderhistory => 
            "<table id='orderinfo'>
             <thead>
             <tr>
                <th>Date</th>
                <th>Item</th>
                <th>Description</th>
                <th>Qty</th>
                <th>Price</th>
                <th>Total</th>
             </tr>
             </thead>
             <tbody>
              <tr>
                <td class='tdtext' rowspan='5'>6/16/2013</td>
                <td class='tdtext'>1)</td>
                <td class='tdtext'>Long Sparklers (box 20)</td>
                <td>1</td>
                <td>19.95</td>
                <td>19.95</td>
             </tr>
             <tr>
                <td class='tdtext'>2)</td>
                <td class='tdtext'>Goblin Fountain</td>
                <td>2</td>
                <td>29.95</td>
                <td>59.90</td>
             </tr>
             <tr>
                <td class='tdtext'>3)</td>
                <td class='tdtext'>Dragon Fountain</td>
                <td>2</td>
                <td>25.50</td>
                <td>51.00</td>
             </tr>
             <tr>
                <td class='tdtext'>4)</td>
                <td class='tdtext'>Nighteyes (box 10)</td>
                <td>1</td>
                <td>29.95</td>
                <td>29.95</td>
             </tr>
             <tr>
                <td class='tdtext'>5)</td>
                <td class='tdtext'>Assorted items Box #1</td>
                <td>1</td>
                <td>19.95</td>
                <td>19.95</td>
             </tr>
             <tr>
                <th class='sub' colspan='3'>Subtotal</th>
                <td class='sub'>7</td>
                <td class='sub' />
                <td class='sub'>\$180.75</td>
             </tr>
             <tr>
                <td class='tdtext' rowspan='4'>6/11/2013</td>
                <td class='tdtext'>1)</td>
                <td class='tdtext'>Assorted items Box #2</td>
                <td>1</td>
                <td>29.95</td>
                <td>29.95</td>
             </tr>
             <tr>
                <td class='tdtext'>2)</td>
                <td class='tdtext'>Phoenix Fountain</td>
                <td>2</td>
                <td>34.42</td>
                <td>68.84</td>
             </tr>
             <tr>
                <td class='tdtext'>3)</td>
                <td class='tdtext'>Firecracker 80 Strings of 16</td>
                <td>4</td>
                <td>7.50</td>
                <td>30.00</td>
             </tr>
             <tr>
                <td class='tdtext'>4)</td>
                <td class='tdtext'>Bottle rockets with stars and report (box 20)</td>
                <td>5</td>
                <td>13.99</td>
                <td>69.95</td>
             </tr>
             <tr>
                <th class='sub' colspan='3'>Subtotal</th>
                <td class='sub'>12</td>
                <td class='sub' />
                <td class='sub'>\$198.74</td>
             </tr>
             <tr>
                <th class='grand' colspan='3'>Grand Total</th>
                <td class='grand'>19</td>
                <td class='grand' />
                <td class='grand'>\$379.49</td>
             </tr>
             </tbody>
             </table>"
        },
        { username => "BernardAdams",
          password => "sparkler",
          orderhistory => 
            "<table id='orderinfo'>
             <thead>
             <tr>
                <th>Date</th>
                <th>Item</th>
                <th>Description</th>
                <th>Qty</th>
                <th>Price</th>
                <th>Total</th>
             </tr>
             </thead>
             <tbody>
             <tr>
                <td class='tdtext' rowspan='3'>6/17/2013</td>
                <td class='tdtext'>1)</td>
                <td class='tdtext'>Pyro blast Assortment #2</td>
                <td>1</td>
                <td>79.95</td>
                <td>79.95</td>
             </tr>
             <tr>
                <td class='tdtext'>2)</td>
                <td class='tdtext'>Screaming Dragons</td>
                <td>2</td>
                <td>29.95</td>
                <td>59.90</td>
             </tr>
             <tr>
                <td class='tdtext'>3)</td>
                <td class='tdtext'>Whistling Artillery (case)</td>
                <td>2</td>
                <td>93.50</td>
                <td>187.00</td>
             </tr>
             <tr>
                <th class='sub' colspan='3'>Subtotal</th>
                <td class='sub'>5</td>
                <td class='sub' />
                <td class='sub'>\$326.85</td>
             </tr>
             <tr>
                <th class='grand' colspan='3'>Grand Total</th>
                <td class='grand'>5</td>
                <td class='grand' />
                <td class='grand'>\$326.85</td>
             </tr>
             </tbody>
             </table>"
        }
    );
    
    # Keep track of the number of hits using the count variable
    my $count = 0;
    
    foreach my $row (@orders) {
       if ($row->{username} =~ /^$user$/ && $row->{password} =~ /^$pwd$/) {
          $count++;
          print "$row->{orderhistory}";
          last;
       }
    }
    
    
    # If no hits, print this fact
    if ($count == 0) {
       print "<p>We have no records for your user ID and password</p>";
    }

  • #5
    New to the CF scene
    Join Date
    May 2010
    Location
    Minnesota, USA
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Thumbs up Case Problem (Resolved)

    I resolved this issue myself, and no longer need any assistance. I'm taking 3 coding classes at the moment, and had some issues with some of the short hand code I was using.

    The 2 lines in red were my mistake, and should have been:

    if (userValue != "" && pwdValue !="" ){


    and:

    var reqURL ="/cgi-bin/wworders.pl?user=" + userValue + "&pwd=" + pwdValue;



    Old Code w/ mistakes highlighted:
    Code:
    /*
    
    
    function retrieveOrders(){
    	var user = document.getElementById("userid");
    	var pwd = document.getElementById("pwd");
    	var sButton = document.getElementById("submitButton");
    	var orderHistory = document.getElementById("orderhistory");
    	
    	sButton.onclick = function() {
    		var userValue =escape(user.value);
    		var pwdValue = escape(pwd.value);
    		
    		if (userValue && pwdValue != ""){
    			
    			var reqOrders = new XMLHttpRequest();
    			var reqURL ="/cgi-bin/wworders.pl?skey=" + userValue&pwdValue;
    			reqOrders.open("GET", reqURL);
    			reqOrders.send(null);
    			
    			reqOrders.onreadystatechange=function() {
    				if (this.readyState ==4) {
    					if (this.status == 200) {
    						orderHistory.innerHTML = this.responseText;
    					}
    			} 
    			}
    		}
    		}
    	}


  •  

    Posting Permissions

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