DOM element as details using fnOpen
DOM element as details using fnOpen
What a great piece of work DataTables is! Thank you Allan!
I am a fairly green programmer who has frequented this site heavily and up till now the forums have served me well without needing to ask for help. With cooler features come more complex problems...
What I have is a dataTable built on ASP.NET using server-side processing, automatic updating, custom filters using server parameters, row selection w/state saving cookie -all due to these forums. Again, Thank you all!
Here is my current dilema:
When a row is clicked I postback to update and databind a details panel which is located in an Ajax UpdatePanel in order that the postback itself doesn't affect the datatable. The Panel DOM is updated correctly on-click and all my server-side ASP stuff (detail-editing, emailing, ajax control toolkit controls) plays well with the datatable. What I really want is to relocate this hidden DOM element inside an fnOpen details row and unhide.
This works one time only:
[code]
var detailspanelnode = document.getElementById('detailsPanelDOM');
oTable.fnOpen(theParentNode, detailspanelnode, "");
[/code]
A second click on another row seems to show that the DOM element has been destroyed and is no longer available? There must be a way to keep my DOM element alive to move to another row if clicked... Can anyone help?
I am a fairly green programmer who has frequented this site heavily and up till now the forums have served me well without needing to ask for help. With cooler features come more complex problems...
What I have is a dataTable built on ASP.NET using server-side processing, automatic updating, custom filters using server parameters, row selection w/state saving cookie -all due to these forums. Again, Thank you all!
Here is my current dilema:
When a row is clicked I postback to update and databind a details panel which is located in an Ajax UpdatePanel in order that the postback itself doesn't affect the datatable. The Panel DOM is updated correctly on-click and all my server-side ASP stuff (detail-editing, emailing, ajax control toolkit controls) plays well with the datatable. What I really want is to relocate this hidden DOM element inside an fnOpen details row and unhide.
This works one time only:
[code]
var detailspanelnode = document.getElementById('detailsPanelDOM');
oTable.fnOpen(theParentNode, detailspanelnode, "");
[/code]
A second click on another row seems to show that the DOM element has been destroyed and is no longer available? There must be a way to keep my DOM element alive to move to another row if clicked... Can anyone help?
This discussion has been closed.
Replies
Great to hear you are enjoying using DataTables.
I think in order to answer your question a bit more information might be required, but as an educated guess, are you calling fnClose to hide any open rows, before you then open a row with the details panel?
The reason I ask is that DataTables will remove the TR element from the document when you call fnClose, thus document.getElementById(...) will not be able to find your element, since it is no longer there!
Assuming this to be the case, there are two options off the top of my head:
1. Before you call fnClose, move the details panel somewhere else in the document (presumably with display:none)
2. When the page loads, init a variable as a reference to the details panel and always use that variable when working with the panel, rather than trying to get it from the DOM again - thus you will always be able to reference it.
Allan