java - ShowHide RichFaces component onclick client-side? (without AJAX) - Stack Overflow

admin管理员组

文章数量:1330603

I'm looking for a way to show/hide an arbitrary RichFaces ponent. 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 bee 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 acplish 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>

I'm looking for a way to show/hide an arbitrary RichFaces ponent. 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 bee 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 acplish 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>

• java
• javascript
• jsf
• seam
• richfaces

Share Follow edited May 3, 2010 at 13:49 Dolph asked Apr 30, 2010 at 20:21 DolphDolph 50.7k1313 gold badges6565 silver badges9292 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 5

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>

本文标签： javaShowHide RichFaces component onclick clientside (without AJAX)Stack Overflow