JQuery star rating plugin - disable after vote submission

Question

Hi,

I'm using the JQuery star rating plugin (v2.61) from http://www.fyneworks.com/jquery/star-rating/. Everything's going well, but I'd like to disable the stars when a user has voted.

Currently my users select their rating and click the mouse. This updates my database through an AJAX call. The star rater changes to show the user's selection, with the stars displayed in red. However if the user rolls their mouse over the stars they are still active and they can submit another vote. I'm stopping this duplicate voting server side, but from a usability point of view I'd like the stars to be disabled after the user's click.

(I guess I could reload the div or something with JQuery to show a read only version of the stars, but I was hoping there was some more elegant and simpler solution).

Thanks.

Answer 1

What you'd really want is to revert the elements to radio buttons, then adding readonly and then making them look good again. Reverting doesn't seem to be possible, but you could unbind all events on post to the server. $("...").unbind();

Answer 2

This may be similar to your 'reload the div' solution, but I think the best solution may be to simply disable the input items after you have done your AJAX request. If you are using jQuery.ajax you can specify a callback function to run after the request is completed.

jQuery.ajax({
    type: "POST",
    url: ...
    data: ...
    contentType: "application/json; charset=utf-8",
    dataType: "json",
    success: function(msg) {
        jQuery('.star').attr('disabled', true);
    },
    error: function(XMLHttpRequest, textStatus, errorThrown) {
        displayError();
    }
});

From their website:

Use the disabled property to use a control for display purposes only

<input name="star3" type="radio" class="star" disabled="disabled"/> 
<input name="star3" type="radio" class="star" disabled="disabled"/> 
<input name="star3" type="radio" class="star" disabled="disabled" checked="checked"/> 
<input name="star3" type="radio" class="star" disabled="disabled"/> 
<input name="star3" type="radio" class="star" disabled="disabled"/>

Answer 3

Why not allow a user to update their rating? Perhaps their first rating was hasty and they'd like to change it, or may be they simply clicked the wrong star.

Of course, you'd need some way to identify each user, and somewhere to store each users rating of each item.

(I don't actually know how to do any of this, but from a usability point of view, it seems a better approach than make sure you get it right first time because you can't change it afterwards.)

Answer 4

Hi,

The problem has been solved in the latest release of the plugin. Now on the callback you can simply do:

this.rating('disable');

Yey!

Answer 5

Hi, I'm the author of the plugin and I've just (literally just) released a new version (3.1) that should take care of the issues you've been discussing here.

@ planetjones, note that this.rating('disable'); is not the same as this.rating('readOnly'); this.rating('readOnly') will stop the control from changing the current selection whereas this.rating('disable') will prevent the value from being submitted altogether.

@ svinto, the plugin used to remove the radio boxes, but now it hides them. in order to revert, all you have to do is 1. remove the stars 2. show the radio boxes 3. remove the plugin's data from the radio boxes - $().data('rating') and $().data('rating.star') 4. unbind the 'change' event from the radio boxes

By the way, updates will be announced here: http://twitter.com/fyneworks