最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - jQuery Raty set score inside click event - Stack Overflow

programmeradmin2浏览0评论

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;
        }
    }
});
Share asked Jun 23, 2015 at 5:33 HasanGHasanG 13.2k31 gold badges102 silver badges159 bronze badges 5
  • 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
Add a ment  | 

3 Answers 3

Reset to default 5 +200

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;
        }
    }
});
发布评论

评论列表(0)

  1. 暂无评论