How can I simulate click event in Stars Rating Widget
I am trying to integrate the Stars Rating Widget- http://orkans-tmp.22web.net/star_rating/
(I am using widget from demo 6, after 3)
after the stars are get click, the event raised with ui object
callback: function (ui, type, value) {
var arr = ui.$stars.find("a");
...
//and the html form is:
<form id="rat" action="" method="post">
<input type="radio" name="rate" value="1" title="Poor" />
<input type="radio" name="rate" value="2" title="Ahh" />
<input type="radio" name="rate" value="3" title="Good" />
<input type="radio" name="rate" value="4" title="Very Good" />
<input type="radio" name="rate" value="5" title="Superb"/>
<input type="submit" value="Rate it!" />
</form>
When the user click on the stars, it is working for me, What I am trying to do, is to 'fake' the click behavior, e.g inside my code, to click on the stars,
As far as I understand it, I have two options 1)To fake click (I tried it, but it generate post to me, which I don't like) 2)To get the ui object, and call the same logic as the click event
Can you help me solve my problem?
(I need to simulate the click event, just because I want to improve the usability b开发者_如何转开发y selecting the rating by the keyboard..)
Thanks.
Edit:
I tried combination of the following, non of them started the animation..
//$("#rat").stars("select", 5);
//$("#rat").click();
//$("#rat:first").trigger("submit");
// document.forms[0].submit();
//jQuery('#rat').rating();
//$('#rat').rating('select', 1);
//$('#rat').show();
Edit2: I am able to select the stars with the following code, but not to start the animation
$("#rat").stars("select", 0);
$("#rat").show();
Edit3 I did work around, but I still don't get the fancy animation
function blinkStars(value) {
$("#rat").stars("select", value);
$("#rat").show();
setTimeout(function () { $("#rat").stars("select", 0); $("#rat").show(); }, 600);
}
Edit4 - I was asked to give more details about the ajax call, so it look like
$(function () {
$("#rat").children().not(":radio").hide();
// Create stars
$("#rat").stars({
cancelShow: false,
callback: function (ui, type, value) {
var arr = ui.$stars.find("a");
arr.slowEach(100,
function () { $(this).animate({ top: "28px" }, 300) },
function () {
$.post("/Home/Vote", { rate: value}, function (data) {
//do some work here..
}, "json");
$("#loader").fadeIn(function () {
$("#loader").fadeOut(function () {
arr.slowEach(100, function () { $(this).animate({ top: 0 }, 300) });
});
});
});
}
});
I will be more than glade to make the animation working..
<form id="rat" action="" method="post">
<input type="radio" id="rate1" name="rate" value="1" title="Poor" />
<input type="radio" id="rate2" name="rate" value="2" title="Ahh" />
<input type="radio" id="rate3" name="rate" value="3" title="Good" />
<input type="radio" id="rate4" name="rate" value="4" title="Very Good" />
<input type="radio" id="rate5" name="rate" value="5" title="Superb"/>
<input type="submit" value="Rate it!" />
</form>
<script>
$("#rate4").click(); //clicks the 'Very Good' star
</script>
a couple things on the site link u provided:
"NOTE: With the newest jQuery (1.6) the rating control doesn't work properly, due to the changes to the attr() handling for the "disabled" attribute. The fix will be included in new release, as soon as jQuery UI team officialy include jQuery 1.6 to download.
With that being said, you are now able to download a <> shared by Colin Guthrie, thanks! :) Optionally, you can download a <> right away. "
so if you are using after 1.6 you need to make sure to have the patch and use this:
$('input[name="rate"][value="3"]').prop("checked",true);
$('#rat input[type="submit"]').click();
if you are using before 1.6 use
$('input[name="rate"][value="3"]').attr("checked",true);
$('#rat input[type="submit"]').click();
a few more options to trigger the event you would like:
.change()
;
.trigger()
;
.trigger('click')
;
.trigger('change')
;
$('#rat').get(0).selectedIndex = 2
;
unfortunatelly i wont be able to test until monday.
all yours :)
精彩评论