Debugging the return value of a jQuery selector

debugging, jquery

Solution

I downloaded the Star Rating Widget (it looks like the same one you are using) and did some digging... the stars plugin completely removes the radio buttons and replaces them with div's and links. When you select a star, it saves the value in a hidden input inside the form.

So, after messing around with it, I found that you can get to the form using `ui.$form`, so try this:

$(function(){
    $(".rating").children().not(":radio").hide();
    $(".rating").stars({
        cancelShow: false,
        callback: function(ui, type, value, event)
        {
            alert( ui.$form.attr('id') );  // alerts the form ID
            ui.$form.ajaxSubmit();
        }
    });
});

Edit: Oh and if you want to access your original radio buttons, they are saved into the ui object as well inside of `ui.$rboxs`. The following snippet will alert the ID of the original radio button:

$(function(){
    $(".rating").children().not(":radio").hide();
    $(".rating").stars({
        cancelShow: false,
        callback: function(ui, type, value, event)
        {
            alert( ui.$rboxs[(value-1)].id );
        }
    });
});

Problem

I am looking for a way to debug what a jquery selector returns. I have tried using `toString()`, but that only ever returns `[object Object]`. What I am actually trying to do is to attach a callback to radio buttons. And `onclick` on one of the buttons, I want to submit the enclosing form. Therefore I try to do something like this: ``` $(".rating").stars({ cancelShow: false, callback: function(ui, type, value, event) { $(this).closest('form').ajaxSubmit(); } }); ``` Unfortunately, nothing happens. Here is a complete example of what I am trying to do: ``` <script type="text/javascript" src="http://localhost:8000/media/js/jquery.js?v=1.4.2"></script> <script type="text/javascript" src="http://localhost:8000/media/js/jquery.form.js?v=2.4.3"></script> <script type="text/javascript" src="http://localhost:8000/media/js/jquery-ui.custom.min.js?v=1.8"></script> <script type="text/javascript" language="javascript" src="http://localhost:8000/media/js/jquery.ui.stars.js?v=3.0.0b38"></script> <link rel="stylesheet" type="text/css" media="all" href="http://localhost:8000/media/css/jquery.ui.stars.css?v=3.0.0b38" /> <body> <script type="text/javascript"> $(function() { $(".rating").children().not(":radio").hide(); $(".rating").stars({ cancelShow: false, callback: function(ui, type, value, event) { alert('NodeName: ' + this.nodeName); $(this).each(function() { alert($(this).html()); }); alert($(this).length); } }); }); </script> <ul class="list"> <li> <form class="rating" id="rating-1" action="/sniphunter/rate/1/" method="post"> <input type="radio" name="score" value="1" id="rating-1-1" /> <input type="radio" name="score" value="2" id="rating-1-2" /> <input type="radio" name="score" value="3" id="rating-1-3" /> <input type="radio" name="score" value="4" id="rating-1-4" /> <input type="radio" name="score" value="5" id="rating-1-5" /> <input type="submit" value="Rate"/> </form> </li> </ul> </body> ```

Original source