StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

POHow can I simulate click event in Stars Rating Widget
text
Body
copied!<p>I am trying to integrate the Stars Rating Widget- <a href="http://orkans-tmp.22web.net/star_rating/" rel="nofollow">http://orkans-tmp.22web.net/star_rating/</a></p> <p>(I am using widget from demo 6, after 3) <br /></p> <p>after the stars are get click, the event raised with ui object</p> <pre><code> callback: function (ui, type, value) { var arr = ui.$stars.find("a"); ... </code></pre> <p>//and the html form is:</p> <pre><code> <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> </code></pre> <p>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, </p> <p>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</p> <p>Can you help me solve my problem?</p> <p>(I need to simulate the click event, just because I want to improve the usability by selecting the rating by the keyboard..)</p> <p>Thanks.</p> <p>Edit:</p> <pre><code>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(); </code></pre> <p>Edit2: I am able to select the stars with the following code, but not to start the animation</p> <pre><code> $("#rat").stars("select", 0); $("#rat").show(); </code></pre> <p>Edit3 I did work around, but I still don't get the fancy animation</p> <pre><code> function blinkStars(value) { $("#rat").stars("select", value); $("#rat").show(); setTimeout(function () { $("#rat").stars("select", 0); $("#rat").show(); }, 600); } </code></pre> <p>Edit4 - I was asked to give more details about the ajax call, so it look like</p> <pre><code> $(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) }); }); }); }); } }); </code></pre> <p>I will be more than glade to make the animation working..</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