Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 12 of 12
  1. #1
    New to the CF scene
    Join Date
    Aug 2011
    Posts
    7
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Exclamation Trouble debugging (Type error possibly)

    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.
    Last edited by SamuelLockyer; 08-24-2011 at 05:38 PM.

  • #2
    Senior Coder
    Join Date
    Dec 2010
    Posts
    2,398
    Thanks
    12
    Thanked 570 Times in 563 Posts
    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.

  • Users who have thanked devnull69 for this post:

    SamuelLockyer (08-24-2011)

  • #3
    New to the CF scene
    Join Date
    Aug 2011
    Posts
    7
    Thanks
    1
    Thanked 0 Times in 0 Posts
    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?
    Last edited by SamuelLockyer; 08-24-2011 at 12:44 AM. Reason: Note

  • #4
    New to the CF scene
    Join Date
    Aug 2011
    Posts
    7
    Thanks
    1
    Thanked 0 Times in 0 Posts
    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:

    Code:
    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!!

  • #5
    Senior Coder
    Join Date
    Dec 2010
    Posts
    2,398
    Thanks
    12
    Thanked 570 Times in 563 Posts
    You can use "this" but it is NOT a reference to the object literal but rather to the window object

    Try this simple example
    Code:
    var myObject = {
       myFoo : [1,2,3,4],
       myBar : this
    }
    
    alert(myObject.myBar===window);
    You will get "true"

  • #6
    New to the CF scene
    Join Date
    Aug 2011
    Posts
    7
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by devnull69 View Post
    You can use "this" but it is NOT a reference to the object literal but rather to the window object

    Try this simple example
    Code:
    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.
    Last edited by SamuelLockyer; 08-24-2011 at 11:02 AM.

  • #7
    Senior Coder
    Join Date
    Dec 2010
    Posts
    2,398
    Thanks
    12
    Thanked 570 Times in 563 Posts
    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
    Code:
    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.

  • #8
    New to the CF scene
    Join Date
    Aug 2011
    Posts
    7
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by devnull69 View Post
    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
    Code:
    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:
    Code:
    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.
    Code:
    var array = [[(number of votes), (row)], … ]
    Last edited by SamuelLockyer; 08-24-2011 at 06:00 PM.

  • #9
    New Coder
    Join Date
    Apr 2011
    Posts
    49
    Thanks
    0
    Thanked 13 Times in 12 Posts
    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);

    Code:
    replaceTable: function () {
    	$('.pollResults_tableClass').text(orderVotes);
    //Should be orderResults.orderVotes
    restoreTable: function () {
    	$('.pollResults_tableClass').replaceWith(orderVotes.tableOriginal);
    //Should be orderResults.tableOriginal

  • #10
    New to the CF scene
    Join Date
    Aug 2011
    Posts
    7
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Goos View Post
    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);

    Code:
    replaceTable: function () {
    	$('.pollResults_tableClass').text(orderVotes);
    //Should be orderResults.orderVotes
    restoreTable: function () {
    	$('.pollResults_tableClass').replaceWith(orderVotes.tableOriginal);
    //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.

  • #11
    New to the CF scene
    Join Date
    Aug 2011
    Posts
    7
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Error is now at line 152, I want to turn ordered (an array) into a string (orderedTable):
    Code:
    var orderedTable = ''; //line 152
           //Turn orderVotes into a string.
    	for (var i = 0; i < ordered.length; i++) {
    		orderedTable = orderedTable + ordered[i][1];
    	}	
    			
    return orderedTable;

  • #12
    New Coder
    Join Date
    Apr 2011
    Posts
    49
    Thanks
    0
    Thanked 13 Times in 12 Posts
    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]


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •