Show/hide details in a richfaces datatable.
I'm trying to create a datatable which will be populated from a database using richfaces/jsf. A list of records will be produced and clicking on an image in row will provide further info on that record. I've used the Datatables jquery plugin before for php/html/mysql pages which looked really well. I'd like to implement something similar here but 1) having trouble implementing jquery in jsf and 2) that plug related to HTML tables so don't think it can be used here. I can populate my datatable and clicking on the image will produce more info, but it's in the same column as my image. I'd like to creat a new panel under the row where I can display all my info relatin g to the record. It may be something to do with how I'm nesting things. this is a snapshot of what I'm doing:
<rich:dataTable id="musicBoxList"
value="#{accountsBean.musicboxes}"
var="currentMusicBox">
<f:facet name="header">
<rich:columnGroup>
<rich:column><h:outputText value="" /></rich:column>
<rich:column><h:outputText value="Status" /></rich:column>
<rich:column><h:outputText value="Musicbox Name" /></rich:column>
<rich:column><h:outputText value="Username" /></rich:column>
<rich:column><h:outputText value="Password" /></rich:column>
<rich:column><h:outputText value="Serial Number" /></rich:column>
<rich:column><h:outputText value="Last Access Date" /></rich:column>
<rich:column><h:outputText value="Contact" /></rich:column>
<rich:column><h:outputText value="Address" /></rich:column>
<rich:column><h:outputText value="Location" /></rich:column>
<rich:column><h:outputText value="Phone" /></rich:column>
<rich:column><h:outputText value="Installer Name" /></rich:column>
<rich:column><h:outputText value="Install Date" /></rich:column>
<rich:column><h:outputText value="Account Status" /></rich:column>
</rich:columnGroup>
</f:facet>
<rich:column>
<h:graphicImage id="expand" value="../AccountsForms/images/details_open.png" onclick="toggleNotes(this);" />
<h:dataTable id="notesTable"
value="#{currentMusicBox.notes}"
var="currentNote"
style="display: none;"
>
<rich:column>
<h:outputText value="#{currentNote.body}" />
</rich:column>
<rich:column>
<h:outputText value="#{currentNote.dateAdded}" />
</rich:column>
<rich:column>
<h:outputText value="#{currentNote.note_type}" />
</rich:column>
</h:dataTable>
</rich:column>
<rich:column sortBy="#{currentMusicBox.status}">
<h:outputText value="#{currentMusicBox.status}" />
</rich:column>
<rich:column sortBy="#{currentMusicBox.name}">
<h:outputText value="#{currentMusicBox.name}" />
</rich:column>
<rich:column sortBy="#{currentMusicBox.username}">
<h:outputText value="#{currentMusicBox.username}" />
</rich:column>
<rich:column sortBy="#{currentMusicBox.password}">
<h:outputText value="#{currentMusicBox.password}" />
</rich:column>
<rich:column sortBy="#{currentMusicBox.serial_no}">
<h:outputText value="#{currentMusicBox.serial_no}" />
</rich:column>
<rich:column sortBy="#{currentMusicBox.last_access_date}">
<h:outputText value="#{currentMusicBox.last_access_date}"
converter="customDateTimeConverter"/>
</rich:column>
<rich:column sortBy="#{currentMusicBox.proprietor}">
<h:outputText value="#{currentMusicBox.proprietor}" />
</rich:column>
<rich:column sortBy="#{currentMusicBox.address}">
<h:outputText value="#{currentMusicBox.address}" />
</rich:column>
<rich:column sortBy="#{currentMusicBox.location}">
<h:outputText value="#{currentMusicBox.location}" />
</rich:column>
<rich:column sortBy="#{currentMusicBox.phone}">
<h:outputText value="#{currentMusicBox.phone}" />
</rich:column>
<rich:column sortBy="#{currentMusicBox.installerName}">
<h:outputText value="#{currentMusicBox.installerName}" />
</rich:column>
<rich:column sortBy="#{currentMusicBox.install_date}">
<h:outputText value="#{currentMusicBox.install_date}" />
</rich:column>-->
<rich:column sortBy="#{currentMusicBox.account_status}">
<h:outputText value="#{currentMusicBox.account_status}" />
</rich:column>
</rich:dataTable>
This is my toggleNotes js function
function toggleNotes(image) {
var detailsId = image.id.substring(0, image.id.lastIndexOf(':')) + ':notesTable';
var details = document.getElementById(detailsId);
if (details.style.display == 'none') {
details.style.display = 'block';
image.src = '../AccountsForms/images/details_close.png';
} else {
details.style.display = 'none';
image.src = '../AccountsForms/images/details_open.png';
}
}
I would be grateful if someone could point me in the right direction to achieve what I want
