Chapter 13
[
229
]
In the code that we just saw, we have created a simple text box and a submit button
to post the data. The following screenshot shows us the output:
Now let's wrap things up and hide the user interface components that we do not
intend to show to the user at this point in time.
function showCommentsForm(){
$('comments-form').style.display="";
$('add-comments').style.display="none";
$('hide-comments').style.display="";
}
Posting comments
OK, so now that we have our comments interface ready, we will post the data to
server the AJAX way. When the user clicks on the submit button, the data is posted
using the
Ajax.Request
feature that we learned in Chapter 2.
This material is copyright and is licensed for the sole use by Richard Ostheimer on 18th June 2009
2205 hilda ave., , missoula, , 59801Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
Common 43: 43 Things, 43 Places, and 43 People Clones
[
230
]
We will add the following piece of JavaScript code to add the comments functionality:
function addComments() {
var your_comments = 'your_comments='+$F('your_comments');
var tutorialID = 'tutorialID='+$F('tutorialID');
var ownerID = 'ownerID='+$F('ownerID');
var pars = your_comments+'&'+tutorialID+'&'+ownerID;

script. So, let's
explore what we will be doing in
GetItem.php
.
A couple of things that we will have to do in sequence at the server side are
as follows:
1. Create an XML le.
2. Insert the data.
3. Read back the recently added comment.
4. Create an XML tree with the data read.
Let's start by creating the XML le. The lines of code that we need to add to create an
XML le are as follows:
header("Content-Type: text/xml");
print'<?xml version="1.0" encoding="UTF-8" standalone="yes"?>';
This material is copyright and is licensed for the sole use by Richard Ostheimer on 18th June 2009
2205 hilda ave., , missoula, , 59801Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
Chapter 13
[
231
]
In this way, we are passing our header information to the PHP compiler and
informing it that the le has XML content.
We need to read the values of
tutorialID
,
ownerID
, and the comments posted by
the user. The code for reading the values is as follows:
$your_comments = $_POST['your_comments'];
$tutorialID = $_POST['tutorialID'];

The code for the
showData()
function is as follows:
function ShowData(originalRequest) {
var xmlDoc = originalRequest.responseXML.documentElement;
var value =
xmlDoc.getElementsByTagName("comment_desc")[0].childNodes[0].
nodeValue;
var value1 =
xmlDoc.getElementsByTagName("commentID")[0].childNodes[0].
nodeValue;
}
This material is copyright and is licensed for the sole use by Richard Ostheimer on 18th June 2009
2205 hilda ave., , missoula, , 59801Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
Common 43: 43 Things, 43 Places, and 43 People Clones
[
232
]
In the function that we just saw, we are reading the response sent by the server. The
response sent is in the XML format. Hence, we will loop through the
childNodes

and read the values.
But wait! We are missing something.
We have read the comments inserted in the database and received the response.
Now, we need to put it in our user interface and display it to the user.
The table rows will be added dynamically using DOM with the data that we received
from the server.
The code for creating dynamic table rows and data is as follows:
var newTR=document.createElement('tr');

delLink.setAttribute("title",'Delete')
This material is copyright and is licensed for the sole use by Richard Ostheimer on 18th June 2009
2205 hilda ave., , missoula, , 59801Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
Chapter 13
[
233
]
delLink.setAttribute("href",'#')
delLink.appendChild(textNode);
newTD3.appendChild(delLink);
newTR.appendChild(newTD);
newTR.appendChild(newTD2);
newTR.appendChild(newTD3);
$('show-comments').appendChild(newTR);
}
The above code might have confused you. But if you look at the code carefully, you
will nd that we are just doing the simplest thing with DOM.
Now, after all this coding, it's time to see what our hard work results in. Check out
the following screenshot:
This material is copyright and is licensed for the sole use by Richard Ostheimer on 18th June 2009
2205 hilda ave., , missoula, , 59801Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
Common 43: 43 Things, 43 Places, and 43 People Clones
[
234
]
Edit or Delete comments
OK, so we have added Edit and Delete options as links with
href="#"
. Here, we
need the two functions

User signup
Log in
Register new user
Log out
•
•
•
•
•
•
•
•
•
•
•
This material is copyright and is licensed for the sole use by Richard Ostheimer on 18th June 2009
2205 hilda ave., , missoula, , 59801Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
Chapter 13
[
235
]
These are the most basic features for any web application. In a real scenario, you
may have to work and tweak the code to add necessary security and other important
features as per the requirement of the projects.
We have created separate classes for
Users
and
Database
that can be extended
further and can easily be used in invoking the objects for the classes.

•
This material is copyright and is licensed for the sole use by Richard Ostheimer on 18th June 2009
2205 hilda ave., , missoula, , 59801Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
Common 43: 43 Things, 43 Places, and 43 People Clones
[
236
]
Effects
One of the most amazing features of script.aculo.us, and my personal favourite, is
effects. Effects can be used to inform users, highlight some key aspect of features, or
just to add beauty to applications. Just about anything and everything can be done
using effects.
We have seen how to use various types of effects. Some of the key effects are
as follows:
Effect.Opacity
Effect.Scale
Effect.Morph
Effect.Move
Effect.Highlight
Effect.Parellel
There are some more effects that can also be used along with applications. We have
explored them in detail in Chapter 4. The application we created in Chapter 4 is
shown in the following screenshot:
•
•
•
•
•
•
This material is copyright and is licensed for the sole use by Richard Ostheimer on 18th June 2009