Be Creative with CSS

Here we’ll add CSS to add more interactivity with user. Before the explanation, let’s modify handleHttpResponse() and UpdateVote() functions into the following:

[js]function handleHttpResponse() {
if (http.readyState == 1) {
document.getElementById(’statusText’).style.display = “block”;
} else if (http.readyState == 4) {
if (http.status == 200) {
// Split the comma delimited response into an array
results = http.responseText.split(”,”);
var result = results[0];
if (result == “failed”) {
window.alert(”Voting Failed”);
} else {
document.getElementById(’voteResult’).value = result;
var s = “”;
for (var i=1;i< =result;i++)
s = s + '‘;
for (var i=result+1;i< =5;i++)
s = s + '‘;
document.getElementById(’voteResult’).innerHTML = s;
document.getElementById(’voteResult’).style.display = “block”;
}
} else {
window.alert(”Voting Failed”);
}
stillWorking = false;
document.getElementById(’statusText’).style.display = ‘none’;
}
}

function updateVote() {
if (stillWorking == true) {
window.alert(”Voting sedang diproses. Harap tunggu sebentar”);
} else {
var voteValue = document.getElementById(”voteValue”).value;
var voteId = document.getElementById(”voteId”).value;
http.open(”GET”, url + voteId + delurl + voteValue, true);
stillWorking = true;
document.getElementById(’statusText’).style.display = ‘block’;
http.onreadystatechange = handleHttpResponse;
http.send(null);
}
}[/js]

and also the main body part of vote.php

[html]

[/html]

Our first modification is replace the boring textbox result with the graphical icon. First, have 2 image/icon ready, one for the “on” state (named it “star_on.gif” or just change the above code to reflect the filename) and one for the “off” state (and named this one “star_off.gif” or again, change the above code). Now when you click on the Vote button, the result is no longer displayed on textbox, instead, you’ll get a nice series of icon reflecting the current average vote result.

Second modification, we add a GMail-liked loading status bar on top right of the page. When any request is still processed, a blinking “Loading…” text will appear to indicate a request still in progress. We simply use XMLDOM to change the CSS display attribute, from “none” to “block” (to display status) and another way (to hide status).

Live Demo: http://www.funponsel.com/dev/ajax_vote/vote3.php

And that’s the end of this tutorial :)) There’re a lot of interesting stuff you can make with Ajax approach, try to explore and broaden your Ajax knowledge. Good luck!