CODEWITHSUNDEEP
jqueryasp.net-mvc
Robert Ladd
Robert Ladd

Reputation:

jquery star rating plugin help needed

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

Upvotes: 0

Views: 3491

Answers (3)

Tom
Tom

Reputation: 1223

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

});

Upvotes: 1

Andr&#233; van Toly
Andr&#233; van Toly

Reputation: 565

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

Upvotes: 2

red777
red777

Reputation: 354

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.

Upvotes: 1

Related Questions