Section 5.4. 2. Send the order to the server


5.4. 2. Send the order to the server

Code Magnets

Next on the Break Neck task list is writing the submitOrder() JavaScript function. This function needs to get the customer's phone number, address, and pizza order from the order form, and send them to the placeOrder.php script on the Break Neck server. The callback function you'll write will be named showConfirmation(), so be sure to tell the browser to run that function when it gets a response from the server.

And, to add a little twist to this puzzle, you can use each code magnet as many times as you need... or not at all. You may also have to use more than one magnet on the same line.

     function submitOrder() {       var phone = __________________________("phone")._______;       var ________ = ________.getElementById("________").value;       var order = _________.getElementById("order")._______;       var _____ = "placeOrder.php?phone=" + _______(phone) +                            "&address=" + _______(address) +                            "&order=" + ________(order);       url = ____ + "&dummy=" + ______________________;*Hint: The same person, with the same phone and address, might place the exact same order more than once.       ___________.open("GET", _____, ______);       request._____________________ = _________________;       request.send(______);     }     esc     document     new Date     address     onClick     value     getElementById     url     order     escape     Code     Magnets     getTime     doc     request()     onready     state     null     showConfirmation     submitOrder     submit     change     true 


Code Magnets Solution

Next on the Break Neck task list is writing the submitOrder() JavaScript function. Here's where you should have placed the magnets to get this function working. Be sure you don't have any extra parentheses on your callback functions, and double-check all your dots between terms like "document" and "getElementByld".

     function submitOrder() {       var phone = document . getElementById ("phone")._Value;       var address = document.getElementById("address").value;       var order = document.getElementById("order").value;       var _url = "placeOrder.php?phone=" + escape(phone) +                            "&address=" + escape(address) +                            "&order=" + escape(order);       url = url + "&dummy=" + new date (). getTime ()_;Did you get this? We want to prevent browsers like Opera and IE from caching a response, in case customers want to order the same thing more than once.       __request.open("GET", _url, true);       request.onready state change = showConfirmation;Make sure you didn't add any parentheses at the end of the name of your callback function.       request.send(null);     } 


Just Do It

It's time to make Break Neck an even better place for ordering pizza. Look in the chapter05/breakneck/ folder in the book's examples, and you'll find the latest version of the Break Neck app, complete with HTML, CSS, and PHP. You'll need to open up pizza.html, and change the form to run submitOrder() when "Order Pizza" is clicked, instead of submitting directly to the placeOrder.php script on the Break Neck server.

As long as you're making improvements to Break Neck, go ahead and move all of the JavaScript out of pizza.html. You can use ajax.js, which you wrote in Chapter 3, for creating the request object. Then, create a new JavaScript file called pizza.js. Move your Break Neck functions- getCustomerInfo(), updatePage(), and submitOrder()-into this file. Don't forget to add <script> elements that link to these files in your HTML!

Once you've done all of this, flip to the back of this chapter, and check page 314 to make sure your files look the same as ours do. Once you've got that done,


Be sure you uses the version of ajax.js you created with just one request object... we don't need two request objects in this chapter.




Head Rush Ajax
Head Rush Ajax (Head First)
ISBN: 0596102259
EAN: 2147483647
Year: 2004
Pages: 241

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net