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;
        }
    }
});

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;
        }
    }
});

• javascript
• jquery
• raty

• Why make it synchronous (async: false)? Why not an async call? Like this: jsfiddle/8kcu8qsr/2 – Abhitalks Commented Jun 25, 2015 at 9:22
• Have you seen the fiddle I linked to? – Abhitalks Commented Jun 25, 2015 at 9:40
• @abhitalks I don't really know details about async. If set true, actionResult gets undefined. So the code after ajax block continues to run even the result is not pleted. And this is not something I want. – HasanG Commented Jun 25, 2015 at 9:40
• 1 And to know more about AJAX, Async and how to use the return value, please see this canonical QA: stackoverflow./q/14220321/1355315 – Abhitalks Commented Jun 25, 2015 at 9:44
• Good to know. Thank you. I'll fix my code blocks. – HasanG Commented Jun 25, 2015 at 9:50

3 Answers 3

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.

You can do

$(".rating").raty('setScore', score);

See it working

http://codepen.io/anon/pen/qdVQyO

According to the documentation, you can simply do $('#selector').raty({score: 3}) to set the score. So in the callback, you can call $(".rating").raty({score: actionResult.Message}) like so:

$(".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);
            $(".rating").raty({score: actionResult.Message});
        } else { // cancel rating
            alert(actionResult.Message);
            return false;
        }
    }
});