ansaurus

Question

Answer 1

A:

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.

Nick Craver 2010-05-21 00:09:13

Thanks this already help that $(this) has length 1 and all my tries of different slectors has length 0.

Fabian 2010-05-21 00:13:49

@Fabian - Try `alert(this.nodeName);` see if it's even the element type you're after?

Nick Craver 2010-05-21 00:14:41

ohh well nodename is undefinded, so I really need a way to debug this properly :-(

Fabian 2010-05-21 00:37:37

@Fabian: Share some HTML and it might help us troubleshoot your problem better

fudgey 2010-05-21 00:38:07

@Fabian - `$(ui).closest('form').ajaxSubmit();` may be what you're after.

Nick Craver 2010-05-21 00:47:16

Just to let you know, I edited my original question with a complete html example.

Fabian 2010-05-21 01:57:18

Answer 2

A:

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

fudgey 2010-05-21 01:37:50

Thanks a million, that worked like a charm. Any hints how I could debug this myself the next time? I tried to use firebug, but still had no clue where I was in the DOM and what my selector was selecting etc...Anyways many thanks for the help!

Fabian 2010-05-21 07:42:01

Actually I used firebug to figure it out. Instead of `alert( ui )` use `console.debug( ui )`. It will display the object (clickable and opens into a tree view) in the console that you can navigate through.

fudgey 2010-05-21 13:05:25

Thanks for the tip with the console, I always got "not defined" and didn't try further. The solution was to open the console Tab and now it works and I see the tree view and the form element :-)

Fabian 2010-05-21 15:25:07

ansaurus

tags:

views:

answers:

debug jquery selector

related questions