Menu
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>
513
The jQuery Object: The Wrapped Set: Selectors return a jQuery object known as the "wrapped set," which is an array-like structure that contains all the selected DOM elements. You can iterate over the wrapped set like an array or access individual elements via the indexer ($(sel)[0] for example).
The console. log() method outputs a message to the web console. The message may be a single string (with optional substitution values), or it may be any one or more JavaScript objects.
A jQuery object is created from the array elements in the order they appeared in the array; unlike most other multi-element jQuery operations, the elements are not sorted in DOM order. Elements will be copied from the array as-is and won't be unwrapped if they're already jQuery collections.
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.
76
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
