Head Rush Ajax

168

Chapter 3

Setting the text in a <div>

Now that you know how to get the text in the coffee maker status

<div>s, you just need to be able to set the text in those status

<div>s. You can use another utility function in text-utils.js

for this, called replaceText().

changing a <div>’s text

JavaScript

PHP script

HTML form

function orderCoffee() {

var name = document.getElementById(“name”).value;

var beverage = getBeverage();

var size = getSize();

var coffeemakerStatusDiv1 =

document.getElementById(“coffeemaker1-status”);

var status = getText(coffeemakerStatusDiv1);

if (status == “Idle”) {

replaceText(coffeemakerStatusDiv1, “Brewing “ +

name + “‘s “ +

size + “ “ + beverage);

var url = “coffeemaker.php?name=” + escape(name) +

“&size=” + escape(size) +

“&beverage=” + escape(beverage) +

“&coffeemaker=1”;

sendRequest(url);

}

}

If the rst coffee maker is

idle, this will update the coffee

maker’s status to indicate that

it’s making a drink...

...and these send the request to

the coffee-making PHP script.

text-utils.js

getText()

replaceText()

getText() will return the text

within a <div>, or any other

element that you give it.

reaplaceText() takes an element,

and the text to put within that

element. This will clear out any

existing text, so that the text

you supply becomes the only text

in the element.

you’re on your way 4

169

asynchronous applications

...at ...