Jquery star rating plugin and cancel rating button

Question

Using this plugin: http://www.fyneworks.com/jquery/star-rating/#tab-Testing

I have a simple callback function that picks up the id from the radio buttons:

<input type="radio" class="auto-submit-star {split:2}" id="myid" value="1" />

$('.auto-submit-star').rating({ 
  callback: function(value, link){ 
   alert($(this).attr('id'));
  } 
});

This works fine, but if the user clicks on the cancel button, then it can't read the id of it.

In the js, I think the cancel button is added dynamically with:

control.cancel = $('<div class="rating-cancel"><a title="' + control.cancel + '">' + control.cancelValue + '</a></div>')

If I add an id to it like this:

control.cancel = $('<div class="rating-cancel"><a id="someid" title="' + control.cancel + '">' + control.cancelValue + '</a></div>')

How could I read the id? This would be undefined. I can set a class and use $('.myclass').attr('id') but I will have multiple ratings on one page so I'll need something similar to "this". Or is it possible for the cancel button to pick up the id of the corresponding radio buttons?

Answer 1

If the id is undefined, then you know they clicked the cancel button. No need to set an id for it.

if (typeof $(this).attr('id') == 'undefined') {...}

Answer 2

Ok Roger - I found this because I was facing the same EXACT issue. Here is how I solved it for the time being. I do hope the plugin gets fixed in the future. My sense is that you don't need the issue resolved at this point, but it may help out other folks. Obviously, it relies on structure of the DOM elements, hence not a very elegant solution.

//RYAN OBEROI: A big hack, since the cancel callback does not have the appropriate information
name = $(this).parent().next().attr('name')

// click callback, as requested here: http://plugins.jquery.com/node/1655
if(control.callback) control.callback.apply(input[0], [input.val(), $('a', control.current)[0], name]);// callback event

Answer 3

Thanks Ryan! I added the click event to rating-cancel class which worked for me

jQuery(".rating-cancel").click(function() {
        var name = jQuery(this).parent().next().attr('name');
        if (name != "") {
           //added the custom code here to handle rating cancel event
        }
      });