Implementing my own rating AJAX widget

It’s amazing that I was able to implement my very own rating AJAX widget. It certainly helped me to better understand what kind of work is needed to make this simple widget work. You can certainly study other existing implementations by click on view source on your favorite browser. Here is one implementation that I know:

The execution flow starts with the definition of the img tag. You will need to define onclick action to call a submission JavaScript function, onmouseover action to call a JavaScript function to show appropriate number of stars when mouse over, and onmouseout action to call a JavaScript function to show appropriate number of dim stars or selected stars when mouse out. For the function that get called on onclick event, it just needs to make an AJAX call back to the server to submit rating value for a particular item. For the function that receives a call on onmouseover, it needs to change the src property of each img node based on which image the user moused over. You may need to label each star img node with a class property so you can check for it while iterating through star nodes and their peers on the same level in the DOM tree. For the function that receives a call on onmouseout, it needs to either reset all star image to dim version or reset the image to show the selection that the user submitted during the same page load. This means that once a user click on a star, that star and the stars left of it will remain lit after mouse out.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s