Nested tables with ajax service - oSettings is null

jnedzel

I'm trying to build a table that has expandable/collapsible rows. When expanded, the detail is another table. Both the main table and the detail tables are populated from ajax services.

I've tried to follow the various examples that I've found, but when I expand a row, I see the following in the error console:

Error: TypeError: oSettings is null
Source File: ...jquery.dataTables.js Line 6094

I've put the page up so that you can see it break. Go to url: http://www.broadinstitute.org/gtex?page=newSearchEqtls
In the "Browse Significant eQTLs" box, select a tissue -- e.g., Adipose Subcutaneous. Hit the "Significant eQTLs" button. Then you will see the table. Click on the + image and you will get the error.

I'm sure there is something basic that I'm missing, but at this point I'm stuck.

Thanks, Jared Nedzel

allan

Hi Jared,

Thanks for posting the link to your page!

I think the problem basically comes down to this line in the `generateSubTable` function:

[code]
oTable.fnSort([ [4, 'asc'] ]);
[/code]

The problem with that is that `oTable` is not a DataTables object - its your jQuery reference to the table. From a few lines before:

[code]
var oTable = $(this.subTableId);
[/code]

If you were to change your initialisation from:

> oTable.dataTable({

to:

[code]
var oTable = $(this.subTableId).dataTable( {
[/code]

I think it will work. oTable is then your DataTables enhanced jQuery object.

Two other comments I'd make:

1. All subtables appear to have the same ID: `sigByGeneSubTable` . That's going to break things as soon as you have more than one table on the page. The IDs must be unique, so you might want to add a unique counter that will just keep incrementing with each new table, or use a class name rather than an ID which might be easier.

2. You currently have:

[code]
"bDestroy" : true,
"bRetrieve" : true,
[/code]

Using them together can cause unexpected things to occur. Additionally you should actually need them here since you have a new table to work with!

Regards,
Allan

jnedzel

Alan: I've made the changes that you have suggested, but that doesn't solve the problem. The sort command still throws the same error. I've temporarily removed the sort command. Removing the sort command removes that error, but the table still doesn't populate.

I'm aware of the issue that you discuss about all the tables having the same ID. My goal was to just get it working once and then tackle that issue. I was planning on only allowing one row to be expanded at a time, and to recreate the table each time, but I'm open to suggestions on this.

allan

Hi,

I'm actually getting an error just before it builds the sub-table now:

> var selectedGeneName = row.children[2].firstChild.data;

I giving a undefined object warning.

What you could do is have:

[code]
var row = this.parentElement;
var data = oTable.fnGetData( row );
[/code]

at the top of the function - then you'd be able to simply do `data.geneSymbol` to get the gene symbol for the row in question.

Regards,
Allan

jnedzel

That's very odd. I'm running in Firefox 22.0 on the Mac, using firebug, and I get no errors in the error console, and the selectedGeneName is correctly initialized.

What browser are you using?

jnedzel

Also, when I run in firebug with a breakpoint, I see that selectedGeneName is properly being passed into the function generateSubTable, so I don't think that is the problem.

jnedzel

I've made the changes that you suggested and tested with both Firefox and Chrome. I see no difference. In both, the selectedGeneName is properly set and passed to generateSubTable. In both, I don't see errors in the error console. In both, when I look at the Net tab (in Firebug or Chrome developer tools), the subtable never calls the server to retrieve the table contents.

allan

I'm not sure what was going on the other day - I was using Safari, but it seems to be okay now! Very odd. However, I think I see the issue now - you have:

[code]
oTable = $(this.subTableId).dataTable({
[/code]

where `this.subTableId` is `sigByGeneSubTable` . That needs a `#` on the front to make it an ID selector - since at the moment it isn't matching anything:

[code]
oTable = $('#'+this.subTableId).dataTable({
[/code]

should do it :-)

Regards,
Allan

jnedzel

Doh!

That change and a fix to sAjaxDataProp fixed the problems. Now I have to tackle the issues about tableid.

Thanks again,

Jared

jnedzel

Allan:

I've made more progress. The subtable now opens and closes properly. If I open a primary table row and then open another primary table row, the first primary table row is closed properly, as I want. So that part is good.

But I've got some issues with the subtable. First, the navigation buttons for the subtable don't work properly. The page numbers (1, 2, 3) work, but next and last don't work -- they close the subtable. The same is true for sorting the subtable. If I click on one of the headers in the subtable, it closes the subtable.

The problem is in my method generateEqtlSignificantTable in script new-eqtl.js. Specifically, it is in the click handler that starts on line 423. This click handler is getting called even though it is the subtable that is being clicked. So either I need to change the selector so this click handler doesn't get called, or I need to somehow distinguish that the clicks are for subtable-related items and somehow delegate the clicks to them. Do you have any suggestions?

Finally, I need to have the subtable sorted when it is opened. I tried doing that by adding an fnSort call on like 562, but that isn't working. Any ideas?

I've got the latest code in production, so the URL above still works.

Thanks,

Jared

jnedzel

Allan:

OK, I've solved the issue in the previous post by changing my selector -- I added a class to the img tag and select on that. So that solved the navigation buttons and clicking on the headers to sort.

The only remaining problem is that the subtable doesn't come up sorted.

jnedzel

Allan:

I've solved the sort issue -- fnSort uses 0-based column indicies. So I think I'll set for now.

Jared

allan

Hi Jared,

Sounds like you've made great progress! Using a refined selector as you are now doing sounds like an ideal way of doing it. The other way is to check event.srcElement and see what was actually clicked on, but the selector I would say is the preferred way.

Also yes, DataTables uses 0 based indexes for both columns and rows.

Regards,
Allan