1

I am using the Raty Rating plug-in for jQuery in a webpage as seen below in, my issue is that when I add a comment with my code I can't get the rating as the rating code is generated on the fly by the jQuery code, I assume this is a delegation issue but unsure where to put my comment form submission code to allow it to get the rating value!?

HTML:

<form action="#" method="post" id="comment">
    <div>
        <p>Your comment: </p>
        <script>
        $(document).ready(function() {
            // Generates the Raty Rating code below
            $(".rating").raty({
                hints: ['Poor', 'Fair', 'Good', 'Very Good', 'Excellent'],
                path: "media/images/",
                size: 24
            });
        });
        </script>
        <div class="rating"></div>
    </div>
    <textarea name="message" id="message"></textarea>
    <input type="hidden" value="104" name="tid" id="tid">
    <button type="submit">Add Comment</button>
</form>

Code generated by raty rating:

<div class="rating" style="cursor: pointer; width: 140px;">
    <img src="media/images/star-off.png" alt="1" title="Poor">&nbsp;
    <img src="media/images/star-off.png" alt="2" title="Fair">&nbsp;
    <img src="media/images/star-off.png" alt="3" title="Good">&nbsp;
    <img src="media/images/star-off.png" alt="4" title="Very Good">&nbsp;
    <img src="media/images/star-off.png" alt="5" title="Excellent">
    <input type="hidden" name="score">
</div>

script.js

$("#comment").on("click", "button", function(e)
{
    e.preventDefault();

    var tid = $('#comment #tid').val();
    var rating = $('#comment #score').val();
    var comment = $('#comment #message').val();

    alert(tid+"\n"+rating+"\n"+comment);

});

Made it clear as to what the code is doing at present.

marc_s
  • 732,580
  • 175
  • 1,330
  • 1,459
llanato
  • 2,508
  • 6
  • 37
  • 59
  • You'll have to call `.raty` where your code is getting generated. – Adil Shaikh Feb 01 '14 at 12:01
  • Delegation is only useful for binding event handlers, not initializing widgets. – Barmar Feb 01 '14 at 12:04
  • @Barmar, would it not be delegation as the score element is generated on the fly so the code in script.js will never see the score element? – llanato Feb 01 '14 at 12:09
  • Delegation applies to _events_. This isn't an event, it's a widget initialization. – Barmar Feb 01 '14 at 12:10
  • @Barmar, I get you now, thanks. – llanato Feb 01 '14 at 12:11
  • @Barmar, the click on the button in #comment is an event though?! Which is the problem, I'm trying to get the score element from the raty code once the button is clicked? – llanato Feb 01 '14 at 12:15
  • 1
    Widgets are more than just event handlers. It needs to do stuff when it's initialized, like add the stars to the DOM, and then it adds its own event handlers. But the real point is that the handler bindings are done by the widget itself, not by you -- the widget would have to provide its own API for delegation. – Barmar Feb 01 '14 at 12:18
  • @Barmar, thanks for the explanation, I figured it out, I used the native function from raty to populate a hidden element that already exists on the page and can access the value now, thanks again. – llanato Feb 01 '14 at 12:51

0 Answers0