Five basic Ajax tutorials

Are you a PHP developer and an Ajax newbie?

This post is a collection of five basic and most required Ajax tutorials with PHP. It inlcudes login, insert record into a database table, search engine, autosuggest and Edit in Place.

Login using AJAX and PHP
This tutorial explains how to implement a simple user login with Ajax and PHP.

Using prototype.js to add record into database with ajax
How to use prototype.js framework to enable a simple ajax request which add a new record (an user name) into a database table using PHP like server side language.

A simple search engine in Ajax and PHP
How to realize a simple search engine with Ajax and PHP that search an user name inside a db table "USER" and return results while you type into the input field.

Search with autosuggest feature
This tutorial explains how to implement a simple PHP ajax search with autosuggest feature using some lines of code.

Edit in place with Scriptaculous and PHP
How to implement a simple Edit in Place effect (Flickr-like) using Scriptaculous and PHP.

Related content
Table of content

Five basic Ajax tutorials

Are you a PHP developer and an Ajax newbie?

This post is a collection of five basic and most required Ajax tutorials with PHP. It inlcudes login, insert record into a database table, search engine, autosuggest and Edit in Place.

Login using AJAX and PHP
This tutorial explains how to implement a simple user login with Ajax and PHP.

Using prototype.js to add record into database with ajax
How to use prototype.js framework to enable a simple ajax request which add a new record (an user name) into a database table using PHP like server side language.

A simple search engine in Ajax and PHP
How to realize a simple search engine with Ajax and PHP that search an user name inside a db table "USER" and return results while you type into the input field.

Search with autosuggest feature
This tutorial explains how to implement a simple PHP ajax search with autosuggest feature using some lines of code.

Edit in place with Scriptaculous and PHP
How to implement a simple Edit in Place effect (Flickr-like) using Scriptaculous and PHP.

Related content
Table of content

Search with autosuggest feature (Coldfusion)

Are you a Coldfusion developer? This tutorial help you to implement autosuggest feature for your website using Ajax.

Some days ago I wrote a post about this topic using PHP like server-side language and some readers asked to me how to implement the same ajax search with auto-suggest feature using Coldfusion.


Download this tutorial

How it works
The package contains:

- index.cfm (search form)
- search.cfm (Coldfusion code to execute query)
- ajax_framework.js (javascript functions to enable ajax feature)

When an user type a string in the input field with id "search-q" (in index.cfm) the function autosuggest() searches the current string into a database table...

<input name="search-q" id="search-q" type="text" onkeyup="javascript:autosuggest()"/>
<div id="results"></div>

... and the script shows search results into the <div> layer with id "result".

All files are fully customizable and ready to use in your coldfusion project. Remeber to change SQL code and datasource name in search.cfm using your correct datasource name.

Download this tutorial

Search with autosuggest feature (Coldfusion)

Are you a Coldfusion developer? This tutorial help you to implement autosuggest feature for your website using Ajax.

Some days ago I wrote a post about this topic using PHP like server-side language and some readers asked to me how to implement the same ajax search with auto-suggest feature using Coldfusion.


Download this tutorial

How it works
The package contains:

- index.cfm (search form)
- search.cfm (Coldfusion code to execute query)
- ajax_framework.js (javascript functions to enable ajax feature)

When an user type a string in the input field with id "search-q" (in index.cfm) the function autosuggest() searches the current string into a database table...

<input name="search-q" id="search-q" type="text" onkeyup="javascript:autosuggest()"/>
<div id="results"></div>

... and the script shows search results into the <div> layer with id "result".

All files are fully customizable and ready to use in your coldfusion project. Remeber to change SQL code and datasource name in search.cfm using your correct datasource name.

Download this tutorial

Split text string using Coldfusion

This tutorial explains how to split an input text string (with some values comma separed) using Coldfusion.


The code is very simple (you can use insted of input string tag_source equal to 'database, mysql, tutorial, how-to' another value such as a #FORM# variable):

<!--- String to split --->
<cfset tag_source = 'database, mysql, tutorial, how-to'>

<cfset comma_pos = -1>
<cfset index = 1>
<cfset tag_array = ArrayNew(1)>
<cfloop condition= "comma_pos NEQ 0 AND len(tag_source) GT 0">
<cfset comma_pos = #find(",", tag_source)#>
<cfif comma_pos NEQ 0>
<cfif comma_pos EQ 1>
<cfset tag_source_n = #left(tag_source, comma_pos)#>
<cfelse>
<cfset tag_source_n = #left(tag_source, comma_pos-1)#>
</cfif>
<cfset tag_source = #removechars(tag_source, 1, comma_pos)#>
<cfset tagArray[index] = trim(tag_source_n)>
<cfelseif comma_pos EQ 0 AND len(tag_source) GT 0>
<cfset tagArray[index] = trim(tag_source)>
</cfif>
<cfset index = index+1>
</cfloop>

<!--- Do something with splittet tags --->
<cfloop from="1" to="#arrayLen(tagArray)#" index="i">
<cfquery name="insertTag" datasource="aigers">
INSERT INTO TAG (tag)
VALUES (
'#tagArray[i]#'
)
</cfquery> </cfloop>

Split text string using Coldfusion

This tutorial explains how to split an input text string (with some values comma separed) using Coldfusion.


The code is very simple (you can use insted of input string tag_source equal to 'database, mysql, tutorial, how-to' another value such as a #FORM# variable):

<!--- String to split --->
<cfset tag_source = 'database, mysql, tutorial, how-to'>

<cfset comma_pos = -1>
<cfset index = 1>
<cfset tag_array = ArrayNew(1)>
<cfloop condition= "comma_pos NEQ 0 AND len(tag_source) GT 0">
<cfset comma_pos = #find(",", tag_source)#>
<cfif comma_pos NEQ 0>
<cfif comma_pos EQ 1>
<cfset tag_source_n = #left(tag_source, comma_pos)#>
<cfelse>
<cfset tag_source_n = #left(tag_source, comma_pos-1)#>
</cfif>
<cfset tag_source = #removechars(tag_source, 1, comma_pos)#>
<cfset tagArray[index] = trim(tag_source_n)>
<cfelseif comma_pos EQ 0 AND len(tag_source) GT 0>
<cfset tagArray[index] = trim(tag_source)>
</cfif>
<cfset index = index+1>
</cfloop>

<!--- Do something with splittet tags --->
<cfloop from="1" to="#arrayLen(tagArray)#" index="i">
<cfquery name="insertTag" datasource="aigers">
INSERT INTO TAG (tag)
VALUES (
'#tagArray[i]#'
)
</cfquery> </cfloop>

Edit in place with Scriptaculous and Coldfusion

After my previous post about this topic (but with PHP instead of Coldfusion) I received some requests about how to implement "Edit in place" Scriptaculous effect using Coldfusion. The structure of this tutorial is the same seen in the previous post with PHP.

Step 1: index.cfm
Create a new blank page, index.cfm. The file's structure is the following:

It contains a link to prototype.js and to scriptaculous framework. The will contains just some lines of code with a layer which contains the text you want to modify with "Edit in Place". So, open index.cfmand add this code into tag:

<div id="myText">This is my text to modify with edit in place</div>
<script>
new Ajax.InPlaceEditor($('myText'), 'javascript:saveText("myText")', {
ajaxOptions: {method: 'get'}
});
</script>

DIV layer (with ID myText) contains text you want to modify using edit in place effect using Scriptaculous. You can also use other tags like <span>, <h1>, to contain the text to modify with edit in place. The code into <script> tag enables Edit in Place function for the content of the layer with ID myText. You can apply the same code to other HTML elements just changing the ID reference "myText" (in bold).

Step 2: ajax_framework.js
In the Step 2 of the PHP tutorial change this code's line into the function saveText():

http.open('get', 'save_text.php?newText='+textId_n+'&nocache = '+nocache);

... with:

http.open('get', 'save_text.cfm?newText='+textId_n+'&nocache = '+nocache);

Step 3: save_text.cfm
Create a new file called save_text.cfm and copy and paste this code inside itself:

<cfif isDefined('URL.newText')>
<cfquery datasource="mydatasource">
INSERT INTO MYTABLE (newText)
VALUES(#URL.newText#)
</cfquery>
<cfoutput>#URL.newText#</cfoutput>
<cfelse>
Error, please fills all fields!
<cfif>

If new value is blank, you have a message error, otherwise the new value will be saved into our database.

Edit in place with Scriptaculous and Coldfusion

After my previous post about this topic (but with PHP instead of Coldfusion) I received some requests about how to implement "Edit in place" Scriptaculous effect using Coldfusion. The structure of this tutorial is the same seen in the previous post with PHP.

Step 1: index.cfm
Create a new blank page, index.cfm. The file's structure is the following:

It contains a link to prototype.js and to scriptaculous framework. The will contains just some lines of code with a layer which contains the text you want to modify with "Edit in Place". So, open index.cfmand add this code into tag:

<div id="myText">This is my text to modify with edit in place</div>
<script>
new Ajax.InPlaceEditor($('myText'), 'javascript:saveText("myText")', {
ajaxOptions: {method: 'get'}
});
</script>

DIV layer (with ID myText) contains text you want to modify using edit in place effect using Scriptaculous. You can also use other tags like <span>, <h1>, to contain the text to modify with edit in place. The code into <script> tag enables Edit in Place function for the content of the layer with ID myText. You can apply the same code to other HTML elements just changing the ID reference "myText" (in bold).

Step 2: ajax_framework.js
In the Step 2 of the PHP tutorial change this code's line into the function saveText():

http.open('get', 'save_text.php?newText='+textId_n+'&nocache = '+nocache);

... with:

http.open('get', 'save_text.cfm?newText='+textId_n+'&nocache = '+nocache);

Step 3: save_text.cfm
Create a new file called save_text.cfm and copy and paste this code inside itself:

<cfif isDefined('URL.newText')>
<cfquery datasource="mydatasource">
INSERT INTO MYTABLE (newText)
VALUES(#URL.newText#)
</cfquery>
<cfoutput>#URL.newText#</cfoutput>
<cfelse>
Error, please fills all fields!
<cfif>

If new value is blank, you have a message error, otherwise the new value will be saved into our database.

Simple newsletter system using Coldfusion

If you have a website it can be useful to mantain contacts with your users and send periodically some news from your site. Image you have a database with a table USER and some fileds like name and email. This lesson explains how to implement a simple newsletter system using Coldfusion and <cfmail> tag.

Download Tutorial


Step 1: Add form fields
Create a coldfusion blank page and add the following code to the new page:

<form name="insert" id="insert" method="post" action="newsletter.cfm">
<input name="mailObject" type="text" id="title" size="60">
<textarea name="mailText" cols="60" rows="10" wrap="soft" ></textarea>
<input name="submit" type="submit" value="Submit">
</form>

This code adds a field to insert the object and a textarea to insert the text for your message.

Step 2: Coldfusion code to send the message to all users
Add the following code before the <form> tag seen in the previous step:

<cfif isDefined('FORM.submit')>
<!---Set error = 1 if object field and text field are empty--->
<cfif FORM.mailObject EQ ' ' OR FORM.mailText EQ ' '>
<cfset error = 1>
<cfelse>
<cfquery name="getEmail" datasource="myDatasource">
SELECT *
FROM USER
</cfquery>
<!---If error is not = 1, send the message to all users --->
<cfloop query="getEmail">
<cfmail
to="#getEmail.email#"
from="myemail@mysite.com"
subject="#FORM.mailObject#"
replyto="myemail@mysite.com">

Hello #getEmail.name#,

#FORM.mailText#

*********************

Add other infos here like site address, email to contact you...

</cfmail>
</cfloop>
<!---Set error = 0 if object field and text field are not empty--->
<cfset error = 0>
</cfif>
</cfif>

When you submit the form in the step 1, the code execute a query which gets all email address and names of the users stored in your database and execute a loop to send, to each of them, your message. Remember, you have to change datasource name with your datasource name and <cfmail> parameters from nad replyto with your email address.

Simple newsletter system using Coldfusion

If you have a website it can be useful to mantain contacts with your users and send periodically some news from your site. Image you have a database with a table USER and some fileds like name and email. This lesson explains how to implement a simple newsletter system using Coldfusion and <cfmail> tag.

Download Tutorial


Step 1: Add form fields
Create a coldfusion blank page and add the following code to the new page:

<form name="insert" id="insert" method="post" action="newsletter.cfm">
<input name="mailObject" type="text" id="title" size="60">
<textarea name="mailText" cols="60" rows="10" wrap="soft" ></textarea>
<input name="submit" type="submit" value="Submit">
</form>

This code adds a field to insert the object and a textarea to insert the text for your message.

Step 2: Coldfusion code to send the message to all users
Add the following code before the <form> tag seen in the previous step:

<cfif isDefined('FORM.submit')>
<!---Set error = 1 if object field and text field are empty--->
<cfif FORM.mailObject EQ ' ' OR FORM.mailText EQ ' '>
<cfset error = 1>
<cfelse>
<cfquery name="getEmail" datasource="myDatasource">
SELECT *
FROM USER
</cfquery>
<!---If error is not = 1, send the message to all users --->
<cfloop query="getEmail">
<cfmail
to="#getEmail.email#"
from="myemail@mysite.com"
subject="#FORM.mailObject#"
replyto="myemail@mysite.com">

Hello #getEmail.name#,

#FORM.mailText#

*********************

Add other infos here like site address, email to contact you...

</cfmail>
</cfloop>
<!---Set error = 0 if object field and text field are not empty--->
<cfset error = 0>
</cfif>
</cfif>

When you submit the form in the step 1, the code execute a query which gets all email address and names of the users stored in your database and execute a loop to send, to each of them, your message. Remember, you have to change datasource name with your datasource name and <cfmail> parameters from nad replyto with your email address.

Coldfusion VS PHP part 1

I love Coldfusion. I think, it is the more simple and powerful language to develop web application, but in some cases, expecially when you have to develop a "dynamic" site - let me pass this term... - for a small client, it can't be the better solutions in terms of cost if compared with PHP. This is a first post that evidences some basic differences between two programming languages such as variables and queries for all programmers that, for necessity, have to migrate from Coldfusion to PHP.

Variables
Coldfusion variables are set with <cfset> tag. In PHP, a variable is set inside a <?php ...?> block of code with a "$" char before the var name. For example:

Coldfusion: <cfset myVar = 0>
PHP: <?php $myVar = 0?>

Differences between URL variables:

Coldfusion: #URL.myVar#
PHP: $_GET['myVar'];

Differences between POST variables:

Coldfusion: #POST.myVar#
PHP: $_POST['myVar'];

Execute a query
Coldfusion queries are "beautiful" :) and very simple to define with <cfquery> tag. You have only to specify a datasource name (database you use in your application) and a query name:

<cfquery datasource="myDatasource" name="getUser">
SELECT * FROM USER
</cfquery>

If you use PHP, when you add a query, you have to include in your page all the parameters to connect to database. I suggest to read this post to have more info about this topic. A tipical query in PHP is structured in this way:

<?php
// Connection's Parameters
$db_host="localhost";
$db_name="database_name";
$username="database_username";
$password="database_password";
$db_con=mysql_connect($db_host,$username,$password);
$connection_string=mysql_select_db($db_name);
// Connection
mysql_connect($db_host,$username,$password);
mysql_select_db($db_name);

// Query
$sql = 'SELECT * FROM USER';
$getUser = mysql_query($sql);
?>

How you can see, I defined a variable $sql (with the query SQL code). mysql_query($sql) execute the query.

Query results
After the execution of a query you would show the query results. With coldfusion you ca use <cfouptut> tag and add the "query" parameter to specify what query's result you want to display.

<cfoutput query="getUser">
#name#, #email#, #city#
</cfoutput>

You can also use this dotted code if inside a <cfoutput> code you want to display results from different queries:

<cfoutput>
#getUser.name#, #getUser.email#, #getCity.city#
</cfoutput>

With PHP you have use mysql_fetch_array() method inside a while statement:

<?php
while ($row = mysql_fetch_array($getUser)){
echo $row['name'] . ',' ;
echo $row['email'] . ',' ;
echo $row['city'] . ',' ;
}
?>

I hope this post about this topic can be useful to all PHP/Coldfusion beginner developers. I will add other infos in the next posts.

Coldfusion VS PHP part 1

I love Coldfusion. I think, it is the more simple and powerful language to develop web application, but in some cases, expecially when you have to develop a "dynamic" site - let me pass this term... - for a small client, it can't be the better solutions in terms of cost if compared with PHP. This is a first post that evidences some basic differences between two programming languages such as variables and queries for all programmers that, for necessity, have to migrate from Coldfusion to PHP.

Variables
Coldfusion variables are set with <cfset> tag. In PHP, a variable is set inside a <?php ...?> block of code with a "$" char before the var name. For example:

Coldfusion: <cfset myVar = 0>
PHP: <?php $myVar = 0?>

Differences between URL variables:

Coldfusion: #URL.myVar#
PHP: $_GET['myVar'];

Differences between POST variables:

Coldfusion: #POST.myVar#
PHP: $_POST['myVar'];

Execute a query
Coldfusion queries are "beautiful" :) and very simple to define with <cfquery> tag. You have only to specify a datasource name (database you use in your application) and a query name:

<cfquery datasource="myDatasource" name="getUser">
SELECT * FROM USER
</cfquery>

If you use PHP, when you add a query, you have to include in your page all the parameters to connect to database. I suggest to read this post to have more info about this topic. A tipical query in PHP is structured in this way:

<?php
// Connection's Parameters
$db_host="localhost";
$db_name="database_name";
$username="database_username";
$password="database_password";
$db_con=mysql_connect($db_host,$username,$password);
$connection_string=mysql_select_db($db_name);
// Connection
mysql_connect($db_host,$username,$password);
mysql_select_db($db_name);

// Query
$sql = 'SELECT * FROM USER';
$getUser = mysql_query($sql);
?>

How you can see, I defined a variable $sql (with the query SQL code). mysql_query($sql) execute the query.

Query results
After the execution of a query you would show the query results. With coldfusion you ca use <cfouptut> tag and add the "query" parameter to specify what query's result you want to display.

<cfoutput query="getUser">
#name#, #email#, #city#
</cfoutput>

You can also use this dotted code if inside a <cfoutput> code you want to display results from different queries:

<cfoutput>
#getUser.name#, #getUser.email#, #getCity.city#
</cfoutput>

With PHP you have use mysql_fetch_array() method inside a while statement:

<?php
while ($row = mysql_fetch_array($getUser)){
echo $row['name'] . ',' ;
echo $row['email'] . ',' ;
echo $row['city'] . ',' ;
}
?>

I hope this post about this topic can be useful to all PHP/Coldfusion beginner developers. I will add other infos in the next posts.

Simple 5 stars rating script using AJAX and Coldfusion

This lesson explains how to implement a simple 5 stars rating script using Ajax and Coldfusion. The following picture shows the tutorial structure that we will use to realize this script:

Step 1: Define graphic elements (CSS)

save this image and save it into the pic folder of your website.

Now, create a new css file (default.css) into css folder of your website ad copy and paste this code to create two layer div.star_y (star on), div.star_n(star off):

div.star_y{width:10px; height:10px; background:url(../pic/vote_star.gif); float:left;}
div.star_n{width:10px; height:10px; background:url(../pic/vote_star.gif) 0 10px; float:left;}

Step 2: Define graphic elements: (HTML)
Image you want to use this 5 stars rate script to rate posts in your blog. You have a query that return all posts' titles with the current rate (post rate) and show one or more stars "on" in this way:

5 stars rating script using Ajax
post rate 3/5

First, add a link to the css file adding this line of code into <head> page's tag:

<link href="css/default.css" rel="stylesheet" type="text/css" />

... so, copy and paste this code into index.cfm:

//include ajax_framework.js
<script language="javascript" src="ajax_framework.js">
<cfquery datasource="mydatasource"&gt name="getPosts">
SELECT id_post_pk, post_rate, title
FROM MYPOST
</cfquery>
<cfoutput&gt query="getPosts">
#title# <br/>
<cfloop from="1" to="5" index="i"&gt;
<div class="star_<cfif post_rate GE i>y<cfelse>n</cfif>" id="#id_post_pk#_#i#" onmouseover = "javascript:overstar(#id_post_pk#,#i#)" onmouseout = "javascript:outstar(#id_post_pk#,#post_rate#)">
// use a spacer image into the layer
<a href="javascript:ratestar(#id_post_pk#,#i#)">
<img src="pic/spacer.gif"/>
</a><br/>
</cfloop>
post rate: <strong>
<span id="rate_#id_post_pk#">#post_rate#</span>/5
<strong>
</cfoutput>

Step 3: Javascript Functions
Create a new javascript file ajax_framework.js and add the following code.
This is the code of javascript functions overstar() and outstar():

/* star "on" on mouse over */
function overstar(idElement,rate){
for(i=1; i<=5; i++){
if(i <= rate){
document.getElementById(idElement+'_'+i).style.backgroundPositionY = "20px";
} else {
document.getElementById(idElement+'_'+i).style.backgroundPositionY = "10px";
}
}
}
/* star "off" on mouse out */
function outstar(idElement,rate){
if(outstar_check == 0){
rate = rate;
} else {
rate = rateN;
}
for(i=1; i<=5; i++){
if(i<=rate){
document.getElementById(idElement+'_'+i).style.backgroundPositionY = "30px";
} else {
document.getElementById(idElement+'_'+i).style.backgroundPositionY = "10px";
}
}
}

... and this is the code to use AJAX functionality to save vote and calculate the new rate:

var idElementN=0;
var rateN=0;
var nocache=0;
var outstar_check=0;

function rateStar(idElement,rate){ // idElement is the id_post_pk
idElementN=idElement;
rateN=rate;
outstar_check=1;
nocache=Math.random();
http.open('get', 'ratePost.cfm?idElement='+idElement+'&rate='+rateN+ '&nocache='+nocache);
http.onreadystatechange = ratestarReply;
http.send(null);
}
function rateStarReply() {
if(http.readyState == 4){
var response = http.responseText;
document.getElementById('rate'+idElementN).innerHTML = response;
} }

Step 4: Coldfusion code: ratePost.cfm
rateStar() function send data to ratePost.cfm page to calculate the new rate after a vote. So create this page and copy and paste this code:

<cfset element = #URL.idElement#>
<cfset rate = #URL.rate#>
// get total votes and current rate
<cfquery datasource="mydatasource"&gt name="getTotalVotes">
SELECT total_votes, total_value, post_rate
FROM MYPOST
WHERE id_post_pk = #element#
</cfquery>
// calculate new rate
<cfset newRate = (#getTotalVotes.total_value# + #rate#)/(#getTotalVotes.total_votes# + 1)>
// update rate
<cfquery datasource="mydatasource"&gt name="updateRate">
UPDATE MYPOST
SET post_rate = #newRate#,
total_value= (#getTotalVotes.total_value#+#rate#),
total_votes= (#getTotalVotes.total_votes# + 1)
WHERE id_post_pk = #element#
</cfquery>
// return new rate

<cfoutput>#newRate#</cfoutput>

Save all and try it!

Simple 5 stars rating script using AJAX and Coldfusion

This lesson explains how to implement a simple 5 stars rating script using Ajax and Coldfusion. The following picture shows the tutorial structure that we will use to realize this script:

Step 1: Define graphic elements (CSS)

save this image and save it into the pic folder of your website.

Now, create a new css file (default.css) into css folder of your website ad copy and paste this code to create two layer div.star_y (star on), div.star_n(star off):

div.star_y{width:10px; height:10px; background:url(../pic/vote_star.gif); float:left;}
div.star_n{width:10px; height:10px; background:url(../pic/vote_star.gif) 0 10px; float:left;}

Step 2: Define graphic elements: (HTML)
Image you want to use this 5 stars rate script to rate posts in your blog. You have a query that return all posts' titles with the current rate (post rate) and show one or more stars "on" in this way:

5 stars rating script using Ajax
post rate 3/5

First, add a link to the css file adding this line of code into <head> page's tag:

<link href="css/default.css" rel="stylesheet" type="text/css" />

... so, copy and paste this code into index.cfm:

//include ajax_framework.js
<script language="javascript" src="ajax_framework.js">
<cfquery datasource="mydatasource"&gt name="getPosts">
SELECT id_post_pk, post_rate, title
FROM MYPOST
</cfquery>
<cfoutput&gt query="getPosts">
#title# <br/>
<cfloop from="1" to="5" index="i"&gt;
<div class="star_<cfif post_rate GE i>y<cfelse>n</cfif>" id="#id_post_pk#_#i#" onmouseover = "javascript:overstar(#id_post_pk#,#i#)" onmouseout = "javascript:outstar(#id_post_pk#,#post_rate#)">
// use a spacer image into the layer
<a href="javascript:ratestar(#id_post_pk#,#i#)">
<img src="pic/spacer.gif"/>
</a><br/>
</cfloop>
post rate: <strong>
<span id="rate_#id_post_pk#">#post_rate#</span>/5
<strong>
</cfoutput>

Step 3: Javascript Functions
Create a new javascript file ajax_framework.js and add the following code.
This is the code of javascript functions overstar() and outstar():

/* star "on" on mouse over */
function overstar(idElement,rate){
for(i=1; i<=5; i++){
if(i <= rate){
document.getElementById(idElement+'_'+i).style.backgroundPositionY = "20px";
} else {
document.getElementById(idElement+'_'+i).style.backgroundPositionY = "10px";
}
}
}
/* star "off" on mouse out */
function outstar(idElement,rate){
if(outstar_check == 0){
rate = rate;
} else {
rate = rateN;
}
for(i=1; i<=5; i++){
if(i<=rate){
document.getElementById(idElement+'_'+i).style.backgroundPositionY = "30px";
} else {
document.getElementById(idElement+'_'+i).style.backgroundPositionY = "10px";
}
}
}

... and this is the code to use AJAX functionality to save vote and calculate the new rate:

var idElementN=0;
var rateN=0;
var nocache=0;
var outstar_check=0;

function rateStar(idElement,rate){ // idElement is the id_post_pk
idElementN=idElement;
rateN=rate;
outstar_check=1;
nocache=Math.random();
http.open('get', 'ratePost.cfm?idElement='+idElement+'&rate='+rateN+ '&nocache='+nocache);
http.onreadystatechange = ratestarReply;
http.send(null);
}
function rateStarReply() {
if(http.readyState == 4){
var response = http.responseText;
document.getElementById('rate'+idElementN).innerHTML = response;
} }

Step 4: Coldfusion code: ratePost.cfm
rateStar() function send data to ratePost.cfm page to calculate the new rate after a vote. So create this page and copy and paste this code:

<cfset element = #URL.idElement#>
<cfset rate = #URL.rate#>
// get total votes and current rate
<cfquery datasource="mydatasource"&gt name="getTotalVotes">
SELECT total_votes, total_value, post_rate
FROM MYPOST
WHERE id_post_pk = #element#
</cfquery>
// calculate new rate
<cfset newRate = (#getTotalVotes.total_value# + #rate#)/(#getTotalVotes.total_votes# + 1)>
// update rate
<cfquery datasource="mydatasource"&gt name="updateRate">
UPDATE MYPOST
SET post_rate = #newRate#,
total_value= (#getTotalVotes.total_value#+#rate#),
total_votes= (#getTotalVotes.total_votes# + 1)
WHERE id_post_pk = #element#
</cfquery>
// return new rate

<cfoutput>#newRate#</cfoutput>

Save all and try it!