Search code examples
javascriptjqueryraty

jQuery Raty set score inside click event


I'm trying to use this rating plugin but I was unable to set the new score on click.

I'm making an ajax request on click event and get new calculated score. I wanted to set the new score inside the click event. What is the right way to do it?

<div class="rating" data-id="some-int" data-score="0.5"></div>

Javascript:

$(".rating").raty({
    score: function () { return $(this).attr("data-score"); },
    click: function (score, evt) {
        $.ajax({
            type: "POST",
            contentType: "application/json; charset=utf-8",
            url: "./ajax.asmx/RateImage",
            data: "{ ImgId: " + $(this).attr("data-id") + ", Score: " + score + "}",
            dataType: "json",
            async: false,
            success: function (result) { actionResult = result.d; }
        });

        if (actionResult.Success) {
            console.log("Score: " + actionResult.Message);
            score = actionResult.Message;
        } else { // cancel rating
            alert(actionResult.Message);
            return false;
        }
    }
});

Solution

  • There is a built in method to set new score, so just use:

    $('.rating').each(function(i) {
        var thisRating = $(this);
        thisRating.raty({
            score: function () {
                return $(this).data('score');
            },
            click: function (score, evt) {
                $.ajax({
                    type: 'post',
                    contentType: 'application/json; charset=utf-8',
                    url: './ajax.asmx/RateImage',
                    data: {
                        ImgId: thisRating.data('id'),
                        Score: score
                    },
                    dataType: "json",
                    success: function (result) {
                        thisRating.raty('score', result.d.Message);
                    }
                });
                return false;
            }
        });
    });
    

    Under docs - Functions you will find:

    $('#star').raty('score');

    Get the current score. If there is no score then undefined will be returned.

    $('#star').raty('score', number);

    Set a score.