Search jQuery

jQuery Forum

Debugging Jquery

in Getting Started • 12 years ago

Hi,

I am a bit new to Jquery and would like to know how you guys debug it. (I am reasonably good with Java and C# - but I dont know much of JavaScript and jQuery.) I use FireBug right now - but I dont have much experinence with it.

For example, I have a HTML table, where one column is a button. I attempted to delete the row containing the button that was clicked according to the discussions at http://stackoverflow.com/questions/170997/what-is-the-best-way-to-remove-a-table-row-with-jquery

In doing so, I attempted to try the following

function deleteRow() {
$(this).parent().parent().remove();
}

This does not work. I think I might be selecting something wrong. I attempted to debug this by modifying my original function doing something like:

function deleteRow() {
var $t = $(this);
alert($t);
var $t1 = $(this).parent();
alert($t1);
$(this).parent().parent().remove();
}

and I tried stepping through the method, and in the watch window in FireBug I just see $t and $t1 as [Window temp.html] (temp.html is the name of the file). This does not tell me the object that is contained in either $t or $t1. I am comparing this to debugging Java, where we can see the type of object associated with each variable.

The alert boxes above use useless too. I just get an [object Object] – which does not give me any useful information other than that the variable is not null.

I am wondering if someone can provide me some clues.

Thanks,

O.O.

Replies(5)

malsup

Re: Debugging Jquery

12 years ago

Firebug is the tool to use, not doubt about it. And it *is* telling you the object - Window. Widow is the global object in client-side JavaScript. Also, no need to alert. Write to console.log instead and firebug will let you inspect the object you wrote. ie: console.log( $t );

o_olson

Re: Debugging Jquery

12 years ago

Thanks Malsup for responding and providing me the tip that I can use the console.log();

It seems that the console.log(); provides the same information that the Watch Window currently does. So if Window is a global object in client-side JavaScript, what is the way to know where in the hierarchy of HTML I am?

It seems to me that the only information I have is if the current variable is null or not.

To rehash my original question: I have a button in a table column trigger a click event, and I am trying to debug where in the Table hierarchy I am. Whats a good way to get this information?

Thanks a lot,

O.O.

1uka.z

Re: Debugging Jquery

12 years ago

To know where are you in the hierarchy, use the DOM tab of the Firebug, or just looking in the HTML tab you can make a good idea of the DOM ... In fact this forum is not intented to be a place where to learn how to use Firebug. Search for a tutorial; there are thousands on the web. No offense.

Going back to your original question; if you have an ID on the button or just a class, you can "run" in the Firebug's console, a line of code to know who is the parent of the element; the console will tell you, if you provide a class, the parent of the first occurence of the matching class; or the direct parent if you provide the ID:

$(".buttonClass").parent();

On the other hand, in order to perform your task, the best way to do it; is to assign directly the event handler to the button, and not by hardcodding the call to a function on the "onClick" event in the HTML, you should do something like this. I did it this way and works like a charm. Probably are other ways too:

$("#buttonId").live("click", function(ev){
$($(this).closest("tr")).fadeOut(function (){ $(this).remove(); });
return false;
});

This will work since the browsers don't care if you have multiple elements with the same ID ... And in this case where is an event handler I benefict of this "bug" ... Magic :-P

Of course you could provide instead a button class, and jQuery will iterate among them to assign the event handler.

Or you could beside providing the button class, iterate yourself with the each() method to assign the event handler.

Any way you want it, the important line is this:

$($(this).closest("tr")).fadeOut(function (){ $(this).remove(); });

But REMEMBER that must be triggered withing an event context; i.e: THE CLICK

Hope it helps. If not let us know.

Cheers

o_olson

Re: Debugging Jquery

12 years ago

Thanks 1uka.z. After Malsup’s response I realized that my problem was more related to my lack of knowledge of both JavaScript and FireBug. I would re-post a similar question to one of their forums.

Thanks to all you guys who responded.

O.O.