Question

I have built a jQuery 5 star rating system, ratings are inserted/stored in database along with no of hits, I am having a problem in inserting rating into database when any star is clicked repeatedly.

I.e., if a star is continuously clicked the rating does not get inserted but hits get inserted which then effect the new resulting rating.

I need to add some delay or stop the click function to fire again, it would be better if a delay can be added to click function.

I am trying stop click function to fire again this way but its not working.

jQuery:

        $('.u-rating').click(function (e){
    var id = $(this).parent().attr('id');
    var rating = ($(this).index()+1)/2;
        $.ajax({
        type: "POST",
        url:"rating.php",
        data: {rating:rating, id:id},
        cache: false,
        success: function(data1)          
           {
            get_rating();
            $('#u-rating p').html('Rating Submitted');
           }            
         });
            e.preventDefault();
            e.stopImmediatePropagation();
            return false;
     });

How do I stop people from rating multiple times?

Answer 1

I would suggest that your real issue that your backend is registering just the hits but not the ratings – and you should probably focus on fixing the issue, not covering it with a band-aid.

Nevertheless, to address your question: You can use one() to bind the click handler just one, and then re-bind on every success (and error). See this jsfiddle for an example. Here is the code:

HTML:

<button id="button">Vote!</button>​

JS:

var postClick = function () {
    console.log('click fired!!');
    el = $(this);
    el.prop('disabled', true);
    //var id = $(this).parent().attr('id');
    //var rating = ($(this).index()+1)/2;
    $.ajax({
        type: "POST",
        url:"/echo/json/",
        //data: {rating:rating, id:id},
        cache: false,
        success: function(data1){
            //get_rating();
            //$('#u-rating p').html('Rating Submitted');
            console.log('ajax success, starting timeout peridod. Clicks will not register now, for the next 5 seconds!');
            setTimeout(function() {
                $('#button').one('click', postClick);
                el.prop('disabled', false);  
                console.log('Clicks are re-enabled!');
            }, 5000);
        } 
    });
}

$('#button').one('click', postClick);

​