jQuery Star Rating でスターをクリック時にデータをPostする

javascript

CGM系のサイトでは特におなじみの「スターレイティング」を実現するjQueryプラグインhttp://www.fyneworks.com/jquery/star-rating/で、スターをクリックしたときにレートをPostする方法を紹介します。

ファイルの入手

http://www.fyneworks.com/jquery/star-rating/のdownloadからzipファイルをダウンロードします。現時点でのバージョンはv3.12です。

展開したstar-ratingに必要なファイルがそろっています。

使い方

中にもサンプルがありますが、starをclickしたときにハンドラを呼ぶ、という例が見当たらず、探してみたところjquery.ratings.jsに、コントロールをオーバーライドできる、とコメントがありました。


たとえば、Cancelマークをマウスオーバーしたときのポップアップメッセージは以下のように変更できます。

$.fn.rating.options.cancel = 'Clear';

同様に、callbackをオーバーライド(デフォルトで定義されてないからオーバーライドって言うのは変かな？)すればstarのクリック時にハンドラが呼ばれます。

サンプルコード

star-ratingと同階層に下記htmlを作成します。

<html>
<head>
  <link href="star-rating/jquery.rating.css" rel="stylesheet" type="text/css" />  
  <script src="star-rating/jquery.js" type="text/javascript"></script>  
  <script src="star-rating/jquery.rating.js" type="text/javascript"></script>  
  <script type="text/javascript">
//  $.fn.rating.options.cancelValue = '0';
    $.fn.rating.options.callback = function(value){
      if (!value) {
        value = 0;
      }
      $.post("./test", {rating : value}, function(){console.debug("posted");, 'JSON');
    };
  </script>  
</head>  
<body>  
  <input name="star" type="radio" class="star" value="1" />
  <input name="star" type="radio" class="star" value="2" />
  <input name="star" type="radio" class="star" value="3" />
</body>
</html>

メモ

スタークリック時の動作
$.fn.rating.options.callback = function(value){};

functionのパラメータにはラジオボタンのvalueが渡ってきます。

Clearがクリックされたとき
$.fn.rating.options.cancelValue = '0';

でClear時に value = 0 が渡ってくるかと思ったけど変化なかったので、callback内でチェックしています。

クリック連打問題

この実装ではスターのクリック時に毎回postしているので、連続クリックされると毎回通信してしまいます。これを回避するためか、付属のサンプルではスターでレートを決めて、submitするという方法をとっています。
通信中はスターを変更できないようにできればいいのですが、

$.fn.rating.options.readOnly

は動的には設定できませんでした。


以上です。