Shawngo.com

Nothing fancy here. Just padding out the anchor tag to fit the image and setting font attributes.

.thumbs{
font-family: "Trebuchet MS";
font-size:15px;
font-weight:bold;
border: 3px solid #eee;
padding:0 5px 10px 5px;
width:150px;
text-align:center;
}
.thumbs ul{
padding:0;
margin:0;
}
.thumbs ul li{
display:inline;
}
.thumbs a{
text-decoration:none;
padding:0 5px;
border: 3px solid #feb;
}
a.thumberup{
background:url(up.jpg) top right no-repeat;
padding-right:20px;
}
a.thumberdown{
background:url(down.jpg) top left no-repeat;
padding-left:20px;
}
.thumbs a:hover{
border: 3px solid #feb300;
}

The Voter Class in voter.js.

Clicking on the link, which fires onclick = "Voter.vote('blog1.up');", determines if there is a cookie set for this widget.

If not, the request parameters, pars, are sent to Prototype’s Ajax.Request function.

Otherwise, a message is sent to the client that they have voted.

When the function is complete, it calls Voter.showResponse function which could either substitue for $(what_in).innerHTML = parseInt($(what_in).innerHTML)+1; this line. We could return all sorts of information to relay to the user, but that is beyond the scope of this tutorial. Don’t you hate that?

Voter = {
vote : function(what_in){
    var what = what_in.substring(0,what_in.indexOf("."));
    var up_down = what_in.substring(what_in.indexOf(".")+1,what_in.length);

    var voted = Cookies.read(what);
    if(voted == null){
	$(what_in).innerHTML = parseInt($(what_in).innerHTML)+1;
	this.voted=true;
	pars="vote="+up_down+"&what="+what;
	Cookies.create(what,"voted",1);
	var myAjax = new Ajax.Request( 'vote.php', { method: 'get', parameters: pars, onComplete: this.showResponse })
    }else{
	$(what+'.msg').innerHTML="You already voted";
    }
  },
  showResponse : function(originalRequest){
	$('result').innerHTML = originalRequest.responseText;
  }
}

The message sent to the client can also be split into an array. This could be useful for updating several different parts of the page.

To do this in the PHP script, simply separate the response with a bar |, example echo $response1."|".$response2;.

The Cookies Class in cookies.js.

This is a basic javascript cookie utility class. I found it online and just rewrote it using Object Notation.

Cookies = {
  create : function (name,value,days){
    if (days){
      var date = new Date();
      date.setTime(date.getTime()+(days*24*60*60*1000));
      var expires = "; expires="+date.toGMTString();
    }else var expires = "";
    document.cookie = name+"="+value+expires+"; path=/";
  },

  read : function read(name){
    var nameEQ = name + "=";
    var ca = document.cookie.split(';');
    for(var i=0;i < ca.length;i++){
      var c = ca[i];
      while (c.charAt(0)==' ') c = c.substring(1,c.length);
	if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
      }
      return null;
  },

  erase : function (name){
    this.create(name,"",-1);
  }
}

I didn’t do very much on the PHP-side. This just returns the $_GET variables for demonstrative purposes.

This script was intented to be used wherever you want. Just assign the name of the item in the 2nd parameter when calling Voter.vote().

You’ll also need to use PHP (or whichever server-side language you choose) to set the initial value for ‘number of votes’. For this tutorial I have the example set to 10 for both.

Ideally you’d write a simple database query function with a bit of error checking for fun.

<?

// do database stuff here

// i threw this in here for fun
print_r($_GET);

// you could also send multiple responses separated by, oh, say, a
// then split the response in the javascript.. demonstrated

?>