0

I'm using Raty for my reviews. I want to show the average score per Product in a loop.

If I just use <%= product.average_user %>, then each product will show the correct average number/rating. If I connect the field by id to an embedded script to fetch the stars, then it only 5 empty stars for the first object and nill for the others. This same script does work in my Product-view.

Here's my view's-code WITHOUT the script:

<div class="row">
<br/>
<%= will_paginate @products %>
<% @products.each do |product| %>
    <%= link_to product do %>   
    <div class="col s6 m4 l2">
            <div class="card" style="height: 50px">     
                <div class="row">
                    <div class="col s4 m4 l4">                              
                        <% if !product.external_image.nil? %>
                        <div class="card-image waves-effect waves-block waves-light valign-wrapper">
                            <%= image_tag product.external_image, class: "valign" %>
                        </div>  
                        <% else %>                              
                        <div class="card-image waves-effect waves-block waves-light valign-wrapper">
                            <%= image_tag product.image, class: "responsive-img" %>
                        </div>
                        <% end %>                                       
                    </div>
                    <div class="col s8 m8 l8">
                        <div class="grey-text text-darken-4 truncate valign" style="height: 25px">
                            <%= product.name %>
                        </div>
                        <div class="divider"></div>
                        <span style="height: 25px">
                        <%= product.average_rating %>
                        </span>             
                    </div>
                </div>
            </div>
        </div>  
    <% end %>
<% end %>
<%= will_paginate @products %>

Here's my view's-code WITH the script:

<div class="row">
<br/>
<%= will_paginate @products %>
<% @products.each do |product| %>
    <%= link_to product do %>   
    <div class="col s6 m4 l2">
            <div class="card" style="height: 50px">     
                <div class="row">
                    <div class="col s4 m4 l4">                              
                        <% if !product.external_image.nil? %>
                        <div class="card-image waves-effect waves-block waves-light valign-wrapper">
                            <%= image_tag product.external_image, class: "valign" %>
                        </div>  
                        <% else %>                              
                        <div class="card-image waves-effect waves-block waves-light valign-wrapper">
                            <%= image_tag product.image, class: "responsive-img" %>
                        </div>
                        <% end %>                                       
                    </div>
                    <div class="col s8 m8 l8">
                        <div class="grey-text text-darken-4 truncate valign" style="height: 25px">
                            <%= product.name %>
                        </div>
                        <div class="divider"></div>
                        <span id="average_rating" style="height: 25px">
                        </span>             
                    </div>
                </div>
            </div>
        </div>
        <script>
            $('#average_rating').raty({
                path: '/assets',
                readOnly: true,
                score: <%= product.average_rating %>
            });
        </script>   
    <% end %>
<% end %>
<%= will_paginate @products %>

Any thoughts on what I'm doing wrong here and how to fix it?

Solution:

@user2856118 provided the basis for my answer. I just had to tweak it a little (compare with the answer below for the tweaks). Here's my working code:

Span:

<span id="average_rating_<%= product.id %>" style="height: 25px"></span>

Script:

        <script>
            $('#average_rating_<%= product.id %>').raty({
                path: '/assets',
                readOnly: true,
                score: <%= product.average_rating %>
            });
        </script>   
  • If a product does not have a rating, meaning if the rating is nil, then does average_rating handle that? Can you do something like product.reject{|p| p.rating.nil?}.average_rating I dont really know your association so im just guessing here. – Doctor06 Nov 02 '15 at 15:47
  • Maybe product.average_rating retuns an object and raty wont know how to handle that. if you do average_rating on console, what does its spit out? would you need to do .to_f to it? – Doctor06 Nov 02 '15 at 15:53
  • @user2856118 The script does work in the Product show view and also handles `nill`, that doesn't seem to be the problem. – Sebastian Plasschaert Nov 02 '15 at 15:53
  • my other guess would be changing the #average_rating id to a class. you would only have one id with the same name. Jquery knows that and will only take effect to the first one on the loop. or make them uniq. use product.id so the script can find the right span – Doctor06 Nov 02 '15 at 15:56
  • @user2856118 in case of changing the id into a class: the loop shows the average rating for my first product in the `array` and it isn't correct (`nill`). Shouldn't show the correct one it would only show the first object wit an `id`? – Sebastian Plasschaert Nov 02 '15 at 16:02

1 Answers1

0

change <span id="average_rating" style="height: 25px"> to <span id="average_rating_#{product.id}" style="height: 25px"> and then in your script do

$('#average_rating_<%=product.id%>').raty({
            path: '/assets',
            readOnly: true,
            score: <%= product.average_rating %>
        });
Doctor06
  • 677
  • 1
  • 13
  • 28
  • I already tried this earlier (and actually it seems like the best solution to me) but it returns nothing (at least no stars and I assume that `nill` should return empty stars) – Sebastian Plasschaert Nov 02 '15 at 16:15
  • yes, nil should return empty stars. Good luck in solving this. If this was the best solution, please mark as answers. if you find a better solution later on, also post here so to save for later references. – Doctor06 Nov 02 '15 at 16:18
  • empty stars or no stars? – Sebastian Plasschaert Nov 02 '15 at 16:19
  • Im not sure, i dont know how raty works. but i would assume it should return empty stars. maybe its a bug, and if it does not have a rating, it does not show the stars at all. Maybe you'll have to give it an initial rating of 0 to each one. – Doctor06 Nov 02 '15 at 16:25
  • I've added some extra code for which Raty returns empty stars when `nil`. So it should work, shouldn't it? – Sebastian Plasschaert Nov 02 '15 at 16:37
  • yeah, sounds great. Good job. – Doctor06 Nov 02 '15 at 16:38