Using star rating plugin with page loaded with ajax

[GoogleCodeExporter]

Where can we see the problem?
> URL:http://webrecipemanager.com/wrm-new

ps: http://jsfiddle.net/ is the best way for us to debug your issue

What steps will reproduce the problem?
> 1.Log in with user demo p/w demo99
> 2.hover over the star rating

What is the expected output? What do you see instead?
> the rating should remain. Instead the stars all turn gray. I believe this 
issue is because the page is dynamically loaded via ajax, because after you 
click on a star then the rating behaves as it should

What version of the plugin/jQuery are you using?
> PLUGIN VERSION:v4.11
> JQUERY VERSION:1.11.0
> BROWSER(S) VERSION(S):Firefox 28, chrome Version 35.0.1916.153 m

Feel free to provide any additional information below.

Original issue reported on code.google.com by barbara....@outlook.com on 8 Jul 2014 at 3:24

[GoogleCodeExporter]

I looked at your code and you're not telling the plugin which input is 
initially checked.
http://i.imgur.com/9nCSnXr.png

Original comment by diego.a...@gmail.com on 8 Jul 2014 at 7:43

• Changed state: Invalid

[GoogleCodeExporter]

It's added with javascript like so

if(rating>0) {
$("input[name='rating']").val(rating).addClass('hasval');
if (rating==1) {
$('.star_1').addClass('star-rating-on').prop('checked',true);
}
if (rating==2) {
$('.star_1').addClass('star-rating-on');
$('.star_2').addClass('star-rating-on').prop('checked',true);;
}
if (rating==3) {
$('.star_1').addClass('star-rating-on');
$('.star_2').addClass('star-rating-on');
$('.star_3').addClass('star-rating-on').prop('checked',true);;
}
if (rating==4) {
$('.star_1').addClass('star-rating-on');
$('.star_2').addClass('star-rating-on');
$('.star_3').addClass('star-rating-on');
$('.star_4').addClass('star-rating-on').prop('checked',true);;
}
if (rating==5) {
$('.star_1').addClass('star-rating-on');
$('.star_2').addClass('star-rating-on');
$('.star_3').addClass('star-rating-on');
$('.star_4').addClass('star-rating-on');
$('.star_5').addClass('star-rating-on').prop('checked',true);;
}
} 

Original comment by barbara....@outlook.com on 8 Jul 2014 at 8:07

[GoogleCodeExporter]

Do you not control the code which generates the HTML?
Can you not simply populate the checked="checked" property in the HTML itself?

The plugin will understand that the input with the "checked" property is the 
current value and draw the widget accordingly.

OR

If you *must* do it via Javascript,
Just use a class selector like this: $('.star_'+rating).prop('checked',true);

But then you'll have to make sure that code is executed before the plugin is.

So I would recommend you remove the "star" class (which the plugin sniffs 
automatically) and so something like, "my-stars" instead, then you can do this:
$('.star_'+rating).prop('checked',true);
$('.my-stars').rating();

Original comment by diego.a...@gmail.com on 8 Jul 2014 at 9:55

[GoogleCodeExporter]

I have to use js, so I decided to remove the star class and use this approach

$('.star_'+rating).prop('checked',true);
$('.my-stars').rating();However it only works for the first ajax load, then for 
subsequent loads the rating stays the same

So I tried the following

$('.my-stars').prop('checked',false);
if(rating>0) {
            $('.star_' + rating).prop('checked',true);
            $("input[name='rating']").val(rating).addClass('hasval');   
}
$('.my-stars').rating();

Then I always get a null rating. So I'm guessing I have to kill the rating some 
other way?

Original comment by barbara....@outlook.com on 9 Jul 2014 at 1:34

[GoogleCodeExporter]

Are you doing this after the rating have been initiated?
Where is the rating value coming from?

It just seems that when the page load you don;t have the right value for your 
rating variable. No value at all in fact.
http://i.imgur.com/7ZX1cGF.png

Something just doesn't make sense...
This file: http://webrecipemanager.com/wrm-new/js/my.rating.js

Looks like you're trying to redraw the stars one step at a time every time you 
save or clear a rating. You don't need to do any of that. Let the plugin take 
care of how the stars are displayed.

All you should need is something like this:
http://jsfiddle.net/spinal007/4ZNYm/

Original comment by diego.a...@gmail.com on 9 Jul 2014 at 7:44

[GoogleCodeExporter]

I am loading the page with just skeleton html including the star rating inputs 
without class star and then I am loading the whole content of the page 
including the actual rating via ajax from the database.

Then if a new recipe is selected from the left menu then the page content is 
reloaded in the same way without reloading the page itself.

Does that make sense?

And about my.rating.js I also have to save the rating in the database and then 
calculate the new rating based on any ratings entered by other users that are 
stored in the database

Original comment by barbara....@outlook.com on 9 Jul 2014 at 7:52

[GoogleCodeExporter]

Now I almost have it working by allowing the rating plugin to initiaqlise at 
page load and then just using 

$('.star:first').rating('select',srating);

To set the rating each time a recipe is loaded.

I only have one more question - how would I set the rating to no rating just in 
case there is a recipe with no rating recorded?

Original comment by barbara....@outlook.com on 9 Jul 2014 at 8:34

[GoogleCodeExporter]

Great!

And that's a good question. There's no API hook for that. I will add it to the 
next version. But for now can you use $('.rating-cancel').click(); ?

ps.: but you may need to change your selector if you ever have more than one 
rating controls on the page, something like $('#recipe_1 
.rating-cancel').click();

Original comment by diego.a...@gmail.com on 9 Jul 2014 at 8:46

[GoogleCodeExporter]

No because I am just pulling an empty value from the database. How long for the 
 new version?

Original comment by barbara....@outlook.com on 9 Jul 2014 at 8:54

[GoogleCodeExporter]

Not for a while. Sorry.

Does $('.rating-cancel').click(); not work?

Original comment by diego.a...@gmail.com on 9 Jul 2014 at 10:53

[GoogleCodeExporter]

It works, but it changes all my null values to 0 in the db, which is a bit of a 
pain and means recoding stuff. I guess I can live with it if there is no other 
option.

Original comment by barbara....@outlook.com on 10 Jul 2014 at 1:24

[GoogleCodeExporter]

Is there any way I can be notified when the new version is out?

Original comment by barbara....@outlook.com on 10 Jul 2014 at 1:24