CODEWITHSUNDEEP
jquerydebugging
Fabian
Fabian

Reputation: 5650

Debugging the return value of a jQuery selector

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>

Upvotes: 7

Views: 4548

Answers (3)

StormDog
StormDog

Reputation: 91

Debug / Show jQuery Selection with jQuery.alert()

I'm learning jQuery and this is the tool I made to help me debug my selections. You can chain it in with your code and see what the selection is at that point.

.alert() => LISTS THE FIRST HTML TAG OF EACH ELEMENT IN THE SELECTION.

See the example below. Notice .alert() after the .find(): => JsFiddle

$(".item-b").find("li").alert("MY MESSAGE").css("color", "red");

The alert box might look like this:
(can't post image until I get 10 points)

    [imagine an alert box listing some elements]

Here is the tool:

(function ($) {
    // Lists out each element's first tag in alert box, chainable
    $.fn.alert = function (message) {
        if (typeof message === 'undefined') message = "";
        this.each(function () {
            message += "\n" + this.outerHTML.match(/<[a-z]+\b(?:[^'">]*|"[^"]*"|'[^']*')*>/)[0];
        });
        console.log(message);
        alert(message);
        return this;
    };
}(jQuery));

I'm new at this, so any constructive comments are welcome ...

Upvotes: 0

Mottie
Mottie

Reputation: 86443

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

Upvotes: 2

Nick Craver
Nick Craver

Reputation: 630569

You can use .length to see if they found anything (the most common case), like this:

$(".rating").stars({
  cancelShow: false,
  callback: function(ui, type, value, event) {
    alert($(this).closest('form').length);
    $(this).closest('form').ajaxSubmit();
  }
});

There are other options, for example if you wanted to iterate each one and spit out it's html so you know what it found you can use .each() and .html():

$(".rating").stars({
  cancelShow: false,
  callback: function(ui, type, value, event) {
    $(this).closest('form').each(function() {
      alert($(this).html());
    });
    $(this).closest('form').ajaxSubmit();
  }
});

These are two quick examples out of dozens, but usually .length shows the issue, e.g. this not being what you want it to be in that callback.

Upvotes: 4

Related Questions