Search code examples
jquerydjangorating-system

Lock Star Rating System After User Votes - RateIt jQuery Plugin

I have the RateIt jQuery Plugin working on a Django application. I'm using Ajax to capture the values and send them to the server and update the values on the page.

Currently, each time the user clicks the stars, I calculate the average and total number of clicks and display those next to the stars. Since this project is in development, I've been more interested in getting it working and displaying lots of data.

But from a usability point of view, I think allowing the user to set the rating once, twice or, in my case, 5 times seems like a better way to go. I am using something from the docs that almost does what I want:

$(ri).rateit('readonly', !$(ri).rateit('readonly'));

I bump a counter in the script (eg, counter++;) and inside an if statement, I set to readonly. The problem is if the user clicks the stars again, it toggles write mode (non-readonly).

Each click after this simply toggles readonly mode.

UPDATE

With the help from @Gidon (creator of RateIt, I believe), I have solved this issue. Here is the bit in the Ajax script. I started a counter outside the Ajax call with counter = 0; and then iterated it with counter++; and used this to test:

if (counter >= 3) {
    $(ri).rateit('readonly', true);
    $('.rateit').off('click');
}

I put it into readonly mode and removed the click binding with jQuery's off().

Thanks for the help @Gidon. This works OK. The user can refresh the page and get more votes, but I have some ideas about using sessions to prevent this...

Solution

  • The toggle happens because of this part: !$(ri).rateit('readonly'). This is build from two parts ! and $(ri).rateit('readonly'). The exclamation mark (!) is the logical not operator, and negates whatever comes after it, ($(ri).rateit('readonly').

    So it says, take the current value of the readonly property, and flip it, thus creating the toggle effect.

    What you want to do is:

    $(ri).rateit('readonly', true);

    Which forces it into readonly mode.