Home/ Questions/Q 796941
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-14T22:43:14+00:00

I am looking for a way to debug what a jquery selector returns. I

  • 0

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>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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 );
        }
    });
});
    • 0