Question

I am trying to implement a ratings plugin. I am able to get the ratings plugin to work fine. I am trying to extend it. So each time the rating is clicked it puts the label under the rating itself. Currently it binds to a css id elsewhere on the page.

The scenario is a twitter message and cant seem to get a selector to update on the message itself. It puts the message on all of them because its not unique.

How can I make the item unique. The documentation for the plugin is http://rateit.codeplex.com/documentation.

 $(document).ready(function () {

      //we bind only to the rateit controls within the products div

      $(".rateit").bind('over', function (event, value) { $(this).attr('title', value); });
      $(" .rateit").bind('rated reset', function (e) {

          var ri = $(this);

          //if the use pressed reset, it will get value: 0 (to be compatible with the HTML range control), we could check if e.type == 'reset', and then set the value to  null .
          var value = ri.rateit('value');
        var ratingid = ri.data('ratingid');           



          //maybe we want to disable voting?
          ri.rateit('readonly', true);

          $.ajax({
              url: '/Home/GetRating', //your server side script
              data: { id: ratingid, value: value }, //our data
              type: 'POST',
              success: function (data) {
                  $('#ratemsg').html(data);

              },
              error: function (jxhr, msg, err) {
                  $('#response').append('<li style="color:red">' + msg + '</li>');
              }
          });
      });

  });

</script>

 @foreach (var item in Model)
{ 
 <div id="TwitterMessageBox@(item.StatusId.ToString())" class="TwitterMessageBox">

    <ol>
        <li class="TweetLineBody">
            @Html.Hidden("Statusid", item.StatusId)
            <div class="TwitProfileImage">
                <img src=@Url.Content(item.ImageUrl) alt="@item.ScreenName" />
            </div>
            <div class="TwitRealName">
                @item.User
            </div>
            <div class="TwitNickName">
                @MvcHtmlString.Create(@Html.Namify(@item.ScreenName))
            </div>
            <div class="TweetText">
                @MvcHtmlString.Create(@item.Tweet)</div>
            <div class="TweetTime">
                @Html.RelativeDate(@item.Created)</div>

            <div id="TweetMessageRating@(item.StatusId.ToString())" name="TweetMessageRating@(item.StatusId.ToString())"  class="TweetRating">

               // This is where the rating widget goes and records and updates              
                <div data-ratingid="@item.StatusId"   class="rateit"></div>
         // this is where i want to go but i cant figure out a way
                 <span id ="ratemsg" name="TweetRating@(item.StatusId.ToString())"  class="ratemsg"> </span>
             </div>

        </li>
    </ol>

  </div>
 }

As you can see above, I am trying to set a unique key by adding the message id which is a status id to the selector but I can’t seem to select it using wildcards. I tried some of the examples on the jquery site and I just can’t seem to get it.

Answer 1

Instead of using an id, just save the sibling of the current .rateit element.

var ri = $(this),
    msg = ri.next();

 ...

    success: function (data) {
        msg.html(data);
    },