Databases
StackOverflow2013
Postsdbo
POPHP five star rating - stars don't remain clicked
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POPHP five star rating - stars don't remain clicked
    text
    copied!<p>I have used the five star rating system(Based on jquery and PHP) provided <a href="http://net.tutsplus.com/tutorials/html-css-techniques/building-a-5-star-rating-system-with-jquery-ajax-and-php/" rel="nofollow">in this link</a> for one of my clients. Now, they want that if the user rates a product those many number of stars should remain highlighted but in the current scenario, once the user moves out his mouse the stars no longer remain highlighted. </p> <p>I have tried a lot but the <code>mouseout</code> functions conflicts with the <code>click</code> function. So far, i'm using this :</p> <p><strong>HTML</strong></p> <pre><code> &lt;div id="r1" class="rate_widget"&gt; &lt;div class="star_1 ratings_stars" id="1"&gt;&lt;/div&gt; &lt;div class="star_2 ratings_stars" id="2"&gt;&lt;/div&gt; &lt;div class="star_3 ratings_stars" id="3"&gt;&lt;/div&gt; &lt;div class="star_4 ratings_stars" id="4"&gt;&lt;/div&gt; &lt;div class="star_5 ratings_stars" id="5"&gt;&lt;/div&gt; &lt;div class="total_votes"&gt;vote data&lt;/div&gt; &lt;/div&gt; </code></pre> <p><strong>JS</strong> - I have tweaked this a bit on my own but to no success.</p> <pre><code> $(document).ready(function() { $('.ratings_stars').hover( // Handles the mouseover function() { $(this).prevAll().andSelf().addClass('ratings_over'); $(this).nextAll().removeClass('ratings_vote'); }, // Handles the mouseout function() { $(this).prevAll().andSelf().removeClass('ratings_over'); // can't use 'this' because it wont contain the updated data set_votes($(this).parent()); } ); // This actually records the vote $('.ratings_stars').bind('click', function() { var star = this; var widget = $(this).parent(); count = $(star).attr('id'); var clicked_data = { clicked_on : $(star).attr('class'), widget_id : $(star).parent().attr('id') }; $.post( 'ratings.php', clicked_data, function(INFO) { widget.data( 'fsr', INFO ); set_votes(widget); //$(this).prevAll().andSelf().addClass('ratings_over'); // $(this).nextAll().removeClass('ratings_vote'); $('#msg').hide().html("you have rated this product with "+count+" stars.").fadeIn(1500); //alert("you have rated this product with"+count); }, 'json' ); }); }); function set_votes(widget) { var avg = $(widget).data('fsr').whole_avg; var votes = $(widget).data('fsr').number_votes; var exact = $(widget).data('fsr').dec_avg; window.console &amp;&amp; console.log('and now in set_votes, it thinks the fsr is ' + $(widget).data('fsr').number_votes); $(widget).find('.star_' + avg).prevAll().andSelf().addClass('ratings_vote'); // $(widget).find('.star_' + avg).nextAll().removeClass('ratings_vote'); $(widget).find('.total_votes').text( votes + ' votes recorded (' + exact + ' rating)' ); } </code></pre> <p>In the current situation, once the stars are clicked it shows the updated average rating returned from the PHP calculation script.</p> <p>I want the stars to remain highlighted after clicked upon and even after <code>mouseout</code> and if they are not clicked the <code>mouseout</code> should function as it is i.e. unhighlight the stars. </p> <p>Please help, i am desperate.</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload