Trouble debugging (Type error possibly)

[SamuelLockyer]

Hello,
I'm a student web developer. I'm debugging some JavaScript code I just created that simply extracts a table, reorders it and replaces it when the user clicks on a button ('Order results' - top right of the table). (It's a small script).

It's for a PHP based polling application, completely of my own creation, which is under construction (only the JavaScript doesn't work).
You can see all the code if you use Firebug. Go to the following link and vote for something; that will take you to a page the JavaScript is located.
http://www.samuellockyer-development...s/examples.php
(I'm linking because I think the context of the page may help.)

(Notice the type error alert.) (Update: Not anymore.)
(There are NO syntax errors.)

You will find the area of the bug quickly by looking at the comments.
(Marked by !!BUG!!)(Update: Not anymore, look at the posts below to find them now.)

I am very new to JavaScript, but I wrote all the code, so I will be able to answer questions easily.
This is a last resort by the way, I need this to work within about two days and I would be SO grateful for any help!!

You can vote as many times as you like - I can just zero everything before I demo the app.

[devnull69]

The TypeError is coming from the use of the "this" keyword inside a JSON object. "this" is usually used as a reference to the current object instance. But a JSON object is not really an object instance but rather a "static" object. And the reference to the static object is not "this" but rather the name of the object.

So replace "this" with "orderResults" and it should work.

You are using "this" inside a self-calling anonymous function inside a JSON object. In this case "this" is always identical to the windows object and not the JSON object.

[SamuelLockyer]

I replaced all the 'this's with orderResults and it's still throwing that type error. I'm at a loss as what is causing it. I may have to isolate the section of code, make some fake variables for it to work with and find the problem that way.
Also, any changes I make will be instant if you want to review the code again.

Does anyone have advice about debugging in JavaScript?

[SamuelLockyer]

I found the problem.

You can refer to an object literal internally with this OR its name. BUT you can NOT refer to an object internally from within a self invoking function. Such as this:

var object = {
    foo: 'bar',
    baz: (function () {
         alert(this.foo); //WILL NOT WORK.
    }()) 
}

This is because the self-invoking function is invoked BEFORE the object has been created.

I will need to re-structure my object now. Hopefully that will be useful for others!!

[devnull69]

You can use "this" but it is NOT a reference to the object literal but rather to the window object

Try this simple example

var myObject = {
   myFoo : [1,2,3,4],
   myBar : this
}

alert(myObject.myBar===window);

You will get "true"

[SamuelLockyer]

You can use "this" but it is NOT a reference to the object literal but rather to the window object

Try this simple example

var myObject = {
   myFoo : [1,2,3,4],
   myBar : this
}

alert(myObject.myBar===window);

You will get "true"

Is there a practical difference at all?

Also, is there a better way of structuring my code? I attempted to create a prototype, but I just didn't have time to research it properly to make it work.

I'm now getting a reference error instead of a type error since I've invoked the orderVotes function normally.
(UPDATE: I solved the reference error - I didn't place the object name before the 'rows' property. I can't see any errors in that section, so on to the next (since the code as a whole still isn't doing what I want it to… yet.))
And Firebug is giving me the silent treatment, which isn't helpful.

[devnull69]

In Firebug, make sure you turned on the checkboxes for the errors/warnings you want to see. Go to the small arrow next to "Console" and check all the required errors/warnings there.

Is there a practical difference at all?

Yes, it is. It will result in

var myObject = {
   myArray : [1,2,3,4],
   myBar : this.myArray.length
};

giving a TypeError (because there is no window.myArray)

One thing you are correct about: If you use self-invoking functions like this, the object literal will not yet exist when the functions are already being executed.

[SamuelLockyer]

In Firebug, make sure you turned on the checkboxes for the errors/warnings you want to see. Go to the small arrow next to "Console" and check all the required errors/warnings there.

Yes, it is. It will result in

var myObject = {
   myArray : [1,2,3,4],
   myBar : this.myArray.length
};

giving a TypeError (because there is no window.myArray)

One thing you are correct about: If you use self-invoking functions like this, the object literal will not yet exist when the functions are already being executed.

I see. Well, that's weird becasue this works just fine:

var object = {
	bar: 'foo',
	baz: function () {
		$('body').text(this.bar); //JQuery
	}
}
object.baz();

And yeah, I figured out that Firebug was useless in Safari and amazing in Firefox.

Also, I am still having problems with my app. If anyone wants to help, follow the instructions in the original post - the orderVotes method isn't working from line 69 onwards. I have no idea why, there are no syntax errors and Firebug is acting all coy about it (it gives an error, but is not particularly useful).
I think I sered a hole through my screen by staring at that area for so long… might have to get that fixed.

Update:
If all else fails, instead of using an object's key/values to sort the row, I will use an array with each value being an array with two values in itself - the key/value equivalent to the object. That will eliminate the looping and naming problems.

var array = [[(number of votes), (row)], … ]

[Goos]

Uncaught exception: ReferenceError: Undefined variable: orderVotes
Error thrown at line 102, column 3 in <anonymous function: replaceTable>() in http://www.samuellockyer-development...-pollorder.js:
$('.pollResults_tableClass').text(orderVotes);

replaceTable: function () {
	$('.pollResults_tableClass').text([COLOR="DarkRed"]orderVotes[/COLOR]);
//Should be orderResults.orderVotes
restoreTable: function () {
	$('.pollResults_tableClass').replaceWith([COLOR="DarkRed"]orderVotes.tableOriginal[/COLOR]);
//Should be orderResults.tableOriginal

[SamuelLockyer]

Uncaught exception: ReferenceError: Undefined variable: orderVotes
Error thrown at line 102, column 3 in <anonymous function: replaceTable>() in http://www.samuellockyer-development...-pollorder.js:
$('.pollResults_tableClass').text(orderVotes);

replaceTable: function () {
	$('.pollResults_tableClass').text([COLOR="DarkRed"]orderVotes[/COLOR]);
//Should be orderResults.orderVotes
restoreTable: function () {
	$('.pollResults_tableClass').replaceWith([COLOR="DarkRed"]orderVotes.tableOriginal[/COLOR]);
//Should be orderResults.tableOriginal

Well yeah, that's because orderVotes isn't working - starting from 130 (the following loop). I commented out my previous effort and now I'm tackling it from a different angle. Still not working though.

And I am capable with Firebug now y'know, I'm aware of the errors being thrown.
I will comment the loop and make it easier to understand my logic.

Thanks for the interest by the way.

[SamuelLockyer]

Error is now at line 152, I want to turn ordered (an array) into a string (orderedTable):

var orderedTable = ''; //line 152
       //Turn orderVotes into a string.
	for (var i = 0; i < ordered.length; i++) {
		orderedTable = orderedTable + ordered[i][1];
	}	
			
return orderedTable;

[Goos]

I just noticed your table doesn't have TBODY. They are a must when you're manipulating tables. Adding one, and changing the following lines should make a difference.
[/code]
var tableOriginal = $('.pollResults_tableClass tbody').clone();
...

function replaceTable() {
$('.pollResults_tableClass').html('<tbody>');
for (var i = orderVotes.length; i >= 0; i--) {
$('.pollResults_tableClass tbody').append(orderVotes[i]);
}
...

function restoreTable() {
$('.pollResults_tableClass').html(tableOriginal);
...
[/code]