Nested tables with ajax service - oSettings is null
Nested tables with ajax service - oSettings is null
jnedzel
Posts: 28Questions: 4Answers: 0
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
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
This discussion has been closed.
Replies
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
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.
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
What browser are you using?
[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
That change and a fix to sAjaxDataProp fixed the problems. Now I have to tackle the issues about tableid.
Thanks again,
Jared
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
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.
I've solved the sort issue -- fnSort uses 0-based column indicies. So I think I'll set for now.
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