Star ratings in a JQuery UI Dialog
Hi all,
I am using this jQuery star rating system: (http://orkans-tmp.22web.net/star_rating) successfully on my site.
Now, I am trying to get a bit more fancy.
I want to put the star rating control into a jQuery UI dialog that pops up.
I invoke the dialog with:
- var $dialog = $('<div></div>')
- .html($('#dialog_source').html())
- .dialog({
- dialogClass: 'hidetitle',
- autoOpen: false,
- draggable: false,
- resizable: false,
- modal: true,
- width: 450,
- buttons: {
- "next": function() {
- $(this).dialog("close");
- doNext();
- },
- "results": function() {
- $(this).dialog("close");
- $("#results_button").click();
- }
- }
- });
- $dialog.dialog('open');
A simplified version of my dialog looks like this (where PHP has been exploded to HTML):
- <div id="dialog_source" style="display: none;">
- <div>Text</div>
- <div>
- Rate this:
- <span id="myrating_pickresults">
- <input name="star3" type="radio" class="star" value="1" />
- <input name="star3" type="radio" class="star" value="2" checked="checked" />
- <input name="star3" type="radio" class="star" value="3" />
- </span> <!-- /id myrating_pickresults -->
- </div>
- </div>
I create the star rating with this:
- $('#myrating_pickresults').stars({
- callback: ratingCallback
- });
- $("#myrating_pickresults").data("stars").$cancel.remove();
where ratingCallback updates the server.
When the dialog is invoked, it successfully renders the star rating correctly. However, that star rating is completely read only. I cannot click into it at all.
I believe the jQuery dialog is consuming the input in some way, but I really don't know where to look.
Thanks in advance for the suggestions.
jsdf