CODEWITHSUNDEEP
javascriptjqueryrating-system
user1896653
user1896653

Reputation: 3327

How to show rating value after clicking on the rating icons

I've used this jQuery rating. Here is my fiddle. You'll see that if you hover on the rating star icons, value of the icons will be showed at the right side(red mark on the screenshot).

But, after clicking on the icons, that value will be gone. I want that value will be kept after clicking on the icon too. How can I make this?

jQuery:

$('.hover-star').rating({
  focus: function(value, link){
    var tip = $('.hover-test');
    tip[0].data = tip[0].data || tip.html();
    tip.html(link.title || 'value: '+value);
  },
  blur: function(value, link){
    var tip = $('.hover-test');
    $('.hover-test').html(tip[0].data || '');
  }
});

Upvotes: 0

Views: 1150

Answers (2)

Radley Sustaire
Radley Sustaire

Reputation: 3399

The blur function is removing the text from the label. You can stop that by simply using an if statement.

  if ( type[0].data != '' )  {
      $('.hover-test').html(tip[0].data);
  }

Fiddle: http://jsfiddle.net/tvn4Ldmn/10/

If you want it so the value only stays after you click, you'll need to check if you have clicked as well.

  if ( type[0].data != '' || has_clicked == false )  {
      $('.hover-test').html(tip[0].data || '');
  }

Note: has_clicked is just an example. The "click" logic is not included in your code or fiddle. You might look at the stars for the class star-rating-on to determine if the user has clicked. I believe that would work.

Update (based on comment by author)

If you want the text to preserve the value that was originally clicked on, you'll want to use a variable. The variable should be the "fall back" that was mentioned above (replacing the empty string, '').

You need a variable that is within the scope of your other functions. You could use a global variable (window.variable_name), but that's not very clean. You can also just put the variable before the other functions. Read about variable scope for more info.

var selected_rating = '';

Next, use that variable as the "fall back" for when no hover text is being displayed. Until you click on a star, this will be blank.

$('.hover-test').html(tip[0].data || selected_rating);

Finally, a couple of functions that will remember which star was previously clicked on, as well as support for the reset button.

 // Reset the selected rating:
 $('.rating').on('click', 'div.rating-cancel', function() {
   selected_rating = '';
   $('.hover-test').html('');
});

 // Remember a rating when it is selected:
 $('.rating').on('click', 'div.star-rating', function(e) {
   selected_rating = jQuery(this).find('a').attr('title');
   $('.hover-test').html(selected_rating);
 });

Fiddle / Demo: http://jsfiddle.net/tvn4Ldmn/16/

Upvotes: 1

madborn
madborn

Reputation: 504

Have a look at this modified JSFiddle: http://jsfiddle.net/tvn4Ldmn/1/:

blur: function (value, link) {
    var tip = $('.hover-test');
    var select = $('.rating').find('.star-rating-on:last');
    if (select.length > 0) {
        tip.html(select.find('a')[0].title);
    }
}

What your previous code was doing (just as RadGH mentioned), was removing the text in the blur function. By looking for a clicked (selected) rating, and taking the last star element with the 'star-rating-on' class, you could effectively leave the chosen value after the mouse pointer left the rating area.

Upvotes: 0

Related Questions