views:

716

answers:

3

I'm adding the star rating plugin from www.fyneworks.com/jquery/star-rating/ and I'm finding the documentation rather obscure. It may just be that I'm looking in the wrong places, which wouldn't be that unusual for me.

We are on an asp.net MVC application, and I would like to add the star rating object in 3 different pages. On the "create rating" page I would like to implement a 5-star rating, but I would like to hide or eliminate the "delete" icon. In other words, when I give a user the opportunity to rate something I'd like to default it to 3-stars and only allow them to vote 1 - 5. I don't want them to be able to submit the rating with zero. The concept behind radiobuttons would handle this except the "delete" choice overrides this.
Here is the code I currently have.

        <td>
            <strong>
                <label for="Rating">
                    Rating:</label></strong>
        </td>
        <td valign="top" width="180">
            <input name="rating" type="radio" class="star" value="1" />
            <input name="rating" type="radio" class="star" value="2" />
            <input name="rating" type="radio" class="star" value="3" checked="checked" />
            <input name="rating" type="radio" class="star" value="4" />
            <input name="rating" type="radio" class="star" value="5" />
        </td>

This is my first post so I hope this is within protocol, I also have another question about this same jquery and I don't know if I should create a separate question or add it here. For now I will add it here, and if this is wrong, let me know and I'll create it as a separate question.

On another page of the application I want to display multiple reviews for each entity along with the rating. I can't see how this should be done. I have a foreach loop that displays each review with the star rating, but my loop puts all the stars for all of the ratings at the top of the review list. In other words, if there are 6 ratings for a specific entity, 30 stars are displayed (6 x 5) followed by 6 summary lines. I'm assuming that I have to somehow dynamically change the name of the input name within my loop, to get the different objects associated with their summary lines. Here is the code for that:

<table>
<% foreach (var review in Model.Reviews)
   { %>
       <tr>
        <% if (!Model.IsSingleBusiness)
           { %>
               <td> 
                   <%= Html.ActionLink(Html.Encode(review.Title), "Details", new { id = review.ReviewId, eId = Model.Entity.EntityId })%>   
               </td>
         <% } %>
           <td valign="top">
               <%= Html.ActionLink("Details", "Details", new { id = review.ReviewId, eId = Model.Entity.EntityId })%>
               <br />Rating: <%= Html.Encode(review.Rating)%>
                    <input name="rating" type="radio" class="star" disabled="disabled" />
                    <input name="rating" type="radio" class="star" disabled="disabled" />
                    <input name="rating" type="radio" class="star" disabled="disabled" />
                    <input name="rating" type="radio" class="star" disabled="disabled" />
                    <input name="rating" type="radio" class="star" disabled="disabled" />
               <br />By: <%= Html.Encode(review.Reviewer.FullName)%>
           </td>
           <td valign="top">
               <%= Html.ActionLink(Html.Encode(review.Title), "Details", new { id = review.ReviewId, eId = Model.Entity.EntityId })%>
           </td>
       </tr>
<% } %>

</table>

Thanks in advance for the help.

Bob

+1  A: 

Look in the code of the plugin , in first object you have function .each() in it you have code for creating cancel button it's commented "// Create 'cancel' button" - comment code below . Should turn off the cancel button .To set as default 3 stars see how this code behaves by running it in firebug and change whats you need.

red777
Thanks red. That does get rid of the 'cancel' button, but later in the code, the draw: function(), particularly at the comment "// Show/hide 'cancel' button", seems to be expecting the cancel button to be there to set it to show or hide. I'm not sure what firebug is, but it appears to me that it is something I should know, so I'll look it up. Thanks for the help.
I commented out the control.cancel ternary statement at the Show/hide 'cancel' button and it worked great. Thank you for your help. I am still having problems with the second question, but I will resubmit that part as a separate question. I'm not sure how to give you credit for your answer, but it was detailed enough that I was able to complete my task. Thank you.
I just noticed something, if you comment the line that creates the Cancel Button, it also disables the callback function. I recommend using André van Toly solution once it works great without side effects: $.fn.rating.options = { required: true };
Fábio Antunes
+3  A: 

You could use the settings parameter of the plugin to disable the cancel button:

$.fn.rating.options = { required: true };

To enable the plugin on all your radiobuttons with the class 'star' on your page but without the cancel button:

$(function(){
    $.fn.rating.options = { required: true };
    $('.star').rating({
        callback: function(value, link) {
            // To submit the form automatically:
            // this.form.submit();
            // To submit the form via ajax:
            $(this.form).ajaxSubmit();
        }
    });
});
André van Toly
had to edit the default from the original js plugin file, but works.
Agos
A: 

Also this:

$(function(){
$('.star').rating({
    required: true,
    callback: function(value, link) {
        // To submit the form automatically:
        // this.form.submit();
        // To submit the form via ajax:
        $(this.form).ajaxSubmit();
    }
});

});

Tom