Geek Answers Handbook

Debugging jQuery selector return value

I am looking for a debugging method that returns a jquery selector. I tried using toString() , but that only ever returns [object Object] .

What I'm actually trying to do is connect a callback to the switches. And onclick on one of the buttons, I want to submit the attached form.

So I am trying 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'm 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>
+6
jquery debugging
source share
3 answers

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

So, after messing with it, I found that you can go to the form using ui.$form , so try the following:

 $(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 switches, they are stored in the ui object, as well as inside ui.$rboxs . The following snippet displays the identifier of the source switch:

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

You can use .length to find out if they found something (the most common case), for example:

 $(".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 want to iterate each of them and spit out its 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 from dozens, but usually .length shows a problem, for example. this not what you want it to be in this callback.

+3
source share

Debug / Show jQuery selection using jQuery.alert ()

I am learning jQuery and it is a tool that I made to help me debug my options. You can associate it with the code and see what choice is at that moment.

.alert () => RAISES THE FIRST HTML TAG OF EACH ELEMENT IN THE CHOICE.

See the example below. Pay attention to .alert () after .find (): => JsFiddle

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

The warning field may look like this: (I can not send the image until I get 10 points)

[provide a warning box listing some items]

Here is the tool:

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

I am new to this, so any constructive comments are welcome ...

0
source share

More articles:


All Articles