Show / hide client side RichFaces onclick component? (no AJAX)
I am looking for a way to show / hide custom RichFaces component. In this case, I have <rich:dataTable>
one that contains multiple lines. Each line should have its own independent Show / Hide link, so when you click Show details, two things happen:
- Show Details link re-renders as Hide Details
- Associated parts Columns should be visible (starting from state
rendered="true"
butstyle="display: none;"
).
I don't want to write my own JavaScript functions unless absolutely necessary. I also don't want to have a server-side bean keep track of what details are displayed in columns and then re-render everything over AJAX: this should be purely client-side behavior. I'm not sure how to do this.
The following pseudocode (hopefully) illustrates my purpose:
<rich:column>
<a href="#" onclick="#{thisRow.detailsColumn}.show();" rendered="">Show details</a>
<a href="#" onclick="#{thisRow.detailsColumn}.hide();" rendered="">Hide details</a>
</rich:column>
<rich:column>
<h:outputText value="#{thisRow.someData}" />
</rich:column>
<rich:column id="detailsColumn" colspan="2" breakBefore="true">
<h:outputText value="#{thisRow.someMoreData}" />
</rich:column>
a source to share
To do this, you need to grab the generated HTML element from the DOM to JavaScript and then switch its CSS property display
between block
and none
. As far as I know, RichFaces does not provide out-of-the-box scripts / capabilities for this, but it is mostly not that hard:
function toggleDetails(link, show) {
var elementId = determineItSomehowBasedOnGenerated(link.id);
document.getElementById(elementId).style.display = (show ? 'block' : 'none');
}
from
<h:outputLink onclick="toggleDetails(this, true); return false;">show</h:outputLink>
<h:outputLink onclick="toggleDetails(this, false); return false;">hide</h:outputLink>
a source to share