jQuery Raty set score inside click event

Question

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

Why make it synchronous (`async: false`)? Why not an async call? Like this: http://jsfiddle.net/8kcu8qsr/2/ — Abhitalks, Jun 25 '15 at 09:22
@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 completed. And this is not something I want. — HasanG, Jun 25 '15 at 09:40
And to know more about AJAX, Async and how to use the return value, please see this canonical QA: http://stackoverflow.com/q/14220321/1355315 — Abhitalks, Jun 25 '15 at 09:44

skobaljic · Accepted Answer · 2015-06-25T09:31:00.753

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.

Both $(this).raty("setScore", actionResult.Message); and $(this).raty("score", actionResult.Message); worked, but the problem was selected value is being set after this code line. So I added return false; to prevent further assignments. Thanks. — HasanG, Jun 25 '15 at 09:24

score 4 · Answer 2 · answered Jun 25 '15 at 08:39

4

You can do

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

See it working

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

answered Jun 25 '15 at 08:39

tomtastico

6,136
2
23
28

score 2 · Answer 3 · answered Jun 23 '15 at 06:06

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

When I use this or $(this).raty({score: actionResult.Message}); the elemen(s) reinitialize. So I can't use this. — HasanG, Jun 23 '15 at 06:10
@HasanGürsoy What is the problem with the element reinitializing? — Cymen, Jun 23 '15 at 06:10

jQuery Raty set score inside click event

3 Answers3