Preventing on click event until after database is updated from prior click

This site is best viewed in a modern browser with JavaScript enabled.

Preventing on click event until after database is updated from prior click

BlueGhost

Hello,
I have a div contained in an object that registers for a click event, and once clicked, uses ajax to communicate with the server and update a user rating for an item.

When updating the rating, it checks if the item already exists in the database, if not, I use an INSERT, otherwise I use an UPDATE. My issue is that if the user clicks very quickly, two INSERTS are run and i end up with duplicates in my database. Is there a standard means of preventing this or disabling the onclick and re-enabling it on the ajax call back?

Here is my abbreviated code:

$sql="UPDATE database SET rating=" . $_POST['rating'] . ", status=" . $_POST['status'] . " WHERE user=" . $_POST['user'] . " AND isbn=" . $_POST['isbn'];

$result = mysql_query($sql);       
if (mysql_affected_rows()==0) {
	$sql="INSERT INTO database (user, isbn, rating, status) VALUES (" . $_POST['user'] . ", " . $_POST['isbn'] . ", " . $_POST['rating'] . ", " . $_POST['status'] . ")";
		if (!mysql_query($sql, $connection))
	{
		echo("------Book failed to add------");
	}
	else
	{
		echo("------Book successfully added------");
	}
}
else
{
	echo("------Book successfully updated------");
}

//add event listener
star1.addEventListener('click', function(e){changeYouStars(e, mySelf);}, false);

ReFreezed

You could either remove the event listener when clicking the button and add it again when the request is done, or just set a boolean that keeps track if a request is in progress or not - something like this:

var isRequesting = false;

star1.addEventListener('click', function(e){
    if (!isRequesting) {
        isRequesting = true;
        changeYouStars(e, mySelf);
    }
}, false);

function onRequestComplete() {
    isRequesting = false;
}