What is this, and why doesn't it work??

scotty2540

Okay, I know what it is... It's JQuery :
var row;
row = itemTable.$('tr.row_selected');
And it is crashing, telling me "Uncaught TypeError: undefined is not a function"
Of course "undefined" doesn't tell me anything, but after a few days, I managed to figure out it was referring to the '$'
I replaced it with the actual word "JQuery", but that still doesn't help.

See, the problem is that it doesn't work in project B, but worked in project A.
Same script includes before my code. Same order. Same everything.

My initialization code looks like this, and works fine. I manually add a rows with "itemTable.fnAddData(..) " :

var itemTable;         //  global... no prob....   

$(document).ready(function() {
    //  other stuff....  
 InitializeTable();
    $('#scannedItemsList').find('tbody').on('click','tr',RowSelect);   //   add my click event to select a row

});


/*  The Table has 7 columns */
function InitializeTable() {
      var tableInit = {};      /* Build an initialization object */
                                        /* Now, insert all the other settings needed for the initialization object */
    tableInit.sPaginationType = "full_numbers";
    tableInit.oLanguage = {
        "sLengthMenu": "Display _MENU_ items per page",
        "sZeroRecords": "No entries to display",
        "sInfo": "Showing _START_ to _END_ of _TOTAL_ Items",
        "sInfoEmpty": "Showing 0 to 0 of 0 items ","sInfoFiltered": "(filtered from _MAX_ Total items)"
    };
>    tableInit.aoColumns = [<br>
        null, null, null,null, null, null, { "sClass" : "leftJust" }              /* all 7 columns*/
    ];
                                           /*  And init the table, returning the table object into a global */
    itemTable = $('#scannedItemsList').dataTable( tableInit);
}

!!!!!!!!!!!!!!!!! ODD... THE ABOVE JQUERY CODE WORKS, BUT THE ONE IN MY "RowSelect" CRASHES !!!!!!!!!!!

            /*  This was derived from the samples on this site... 
                                   and works in project A, but now, 3 months 
                                  later in project B,  it is crashing  JS  */
function RowSelect() {
         // remove ALL 'row_selected' end 'edit_mode' classes from the table
        var row;
        row = itemTable.$('tr.row_selected');
  !!!!!!  CRASH  !!!!!!!!!

Does anyone have any idea why one works, and the other doesn't? Why it knows what "$" means on line 44 in my code, but suddenly doesn't know what "$" means on line 52, a function later?

This is really driving me to drink!

-Scotty

scotty2540

In fact.... Just look here. It's stripped down version of the issue.
http://www.csweber.com/BrokenTables/broken.html

Just open up the page, open a JS debugger session, and click on the row that was manually added. It traps at the

 row = itemTable.$('tr.row_selected');

With

Uncaught TypeError: undefined is not a function broken.js:55

allan

Version: 1.8.2

That's a properly old version of DataTables. The $ method you are trying to use wasn't in that version it would appear. I'd suggest updating.

Allan

scotty2540

Upgraded to 1.9, as the other apps use it. Seemed to solve it. I'm not sure how 1.8 leaked in. Our source control is supposed to have it locked down

We can't just randomly upgrade without weeks of regression testing.
We tried that once, and going from JQuery 1.7 to 1.8 broke a bunch of stuff.

scotty2540

I spoke too soon. Now it broke something else.

The page buttons are now just a smear...
Here are two screen shots I spliced together.
Same everything, except swapping out the JS from 1.8 to 1.9

http://www.csweber.com/broken/screenshots.jpg

tangerine

Are you referencing the appropriate CSS files in your HTML?

scotty2540

? The 'appropiate' ?
The CSS is unchanged. All I did was replace the jquery.,datatable.js from 1.8 to 1.9

And where can I find the support tutorials, demos, etc for 1.9? There used to be support info for it. Now it's all gone.

tangerine

Maybe 1.9 has different CSS.

First page of the manual links to legacy docs.
http://datatables.net/manual/index

allan

If you need to keep use 1.8, use fnGetNodes which will be in the very old versions and run your jQuery selector on the returned array.

Maybe 1.9 has different CSS.

Yup. You need to use the same version of the CSS as your Javascript. See also the upgrade notes for each major version:

• 1.8
• 1.9
• 1.10

Allan

scotty2540

Well, I am trying to implement a new app based on the already approved version of 1.9 that we are using. We don't have months and months to regression test an updated version.

All through the JS and CSS code are comments (what a novel idea!!) that explain what it is doing, and links to the material.

All the links are now dead.

/*  This tools uses the hardcoded name "dataTables".
      See:   http://datatables.net/styling/ids_classes
/*  "Length" is the "Number of entries per page" */

Oh well.

allan

Actually, most of the old links should redirect to the new pages, but there was an error in the redirect configuration. Thanks for flagging that up.

The specific one you link to isn't quite the same as before and I've still to write that new page. Until then the legacy site contains that information.

Allan