CODEWITHSUNDEEP
javajavascriptjsfseamrichfaces
Dolph
Dolph

Reputation: 50650

Show/Hide RichFaces component onclick client-side? (without AJAX)

I'm looking for a way to show/hide an arbitrary RichFaces component. In this case, I have a <rich:dataTable> that contains several rows. Each row needs to have it's own, independent Show/Hide link, such that when you click "Show details", two things happen:

  1. The "Show details" link is re-rendered as "Hide details"
  2. The associated detailsColumns should become visible (starting from a state of rendered="true" but style="display: none;").

I don't want to write my own JavaScript functions if it's not absolutely necessary. I also don't want to have a server-side bean keep track of which detailColumns are being displayed, and subsequently re-render everything over AJAX: this should be purely client-side behavior. I'm not sure how to accomplish that.

The following pseudo-code (hopefully) illustrates my goal:

<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>

Upvotes: 2

Views: 10440

Answers (1)

BalusC
BalusC

Reputation: 1108642

To the point, you need to grab the generated HTML element from the DOM in JavaScript and then toggle its CSS display property between block and none. As far as I know, RichFaces doesn't provide out-of-the-box scripts/facilities for this, but it is basically not that hard:

function toggleDetails(link, show) {
    var elementId = determineItSomehowBasedOnGenerated(link.id);
    document.getElementById(elementId).style.display = (show ? 'block' : 'none');
}

with

<h:outputLink onclick="toggleDetails(this, true); return false;">show</h:outputLink>
<h:outputLink onclick="toggleDetails(this, false); return false;">hide</h:outputLink>

Upvotes: 5

Related Questions