JSF 命令按钮显示/隐藏问题答案

【问题标题】：JSF CommandButton Show/Hide IssueJSF 命令按钮显示/隐藏问题
【发布时间】：2012-07-17 14:13:21
【问题描述】：

我使用 primefaces FieldSet 组件并在字段集中指定了一个按钮字段。我有一个要求，在哪里，当我单击命令按钮时，应显示 h:selectonemenu & inputtext 并在进一步单击时隐藏 h:selectOnemenu &inputtext。下面是我为显示和隐藏而编写的代码。显示部分工作正常。但是当我尝试点击按钮隐藏时，它不起作用。

xhtml代码

<h:panelGrid id="grid1" columns="3">
    <p:fieldset id="GlobalAdjustment" legend="GlobalAdjustment"  style="font-size:12px !important;width:30%" >
    <h:commandButton  id="globalAdjustID"  image="#{review.imageUrl}" actionListener="#{review.showUpdateList}" />  
    </p:fieldset>

    <h:selectOneMenu id="SelectID"   value="#{review.reviewList}"  rendered="#{demandReview.selectoneRenderer}">
        <f:selectItems id="FilterSelectListID"   value="#{review.reviewListIDs}" style="font-size:12px !important"></f:selectItems>
    </h:selectOneMenu>
    <h:inputText id="fieldUpdateID" required="false" rendered="#{review.inputTextRenderer}"></h:inputText>
</h:panelGrid>

ManagedBean ActionListener 方法

public void showUpdateList(ActionEvent event)
{
    System.out.println("entering the Action Method:");
    Map<String, Object> idMap = new HashMap<String, Object>() ;
    idMap = event.getComponent().getAttributes();
    String url = (String) idMap.get("image");
    System.out.println("The url is :"+url);
    if(url.equals("/images/add_data_button.png")){
        //upbean.setImageUrl("/images/remove_data_button.png") ;
        imageUrl ="/images/remove_data_button.png" ;
        selectoneRenderer = true;
        inputTextRenderer = true;
    }else
    {
        imageUrl ="/images/add_data_button.png" ;
        selectoneRenderer = false;
        inputTextRenderer = false;
    }
}

当我第一次单击字段集中的命令按钮时，它可以正常工作并显示 selectoneMenu 和文本框。一旦进一步点击，ActionListener 就不会被调用。请帮我解决问题。

谢谢

【问题讨论】：

可能是因为转换或验证失败，未达到 JSF 的 INVOKE APPLICATION 阶段。您的页面上是否有 h:messages 标签来显示错误？如果没有，添加一个看看会发生什么。

标签： jsf-2 primefaces

【解决方案1】：

您可以尝试另一种方法。使用带有更新属性的 p:commandButton，如下所示：

<h:panelGrid id="grid1" columns="3">
    <p:fieldset id="GlobalAdjustment" legend="GlobalAdjustment"  style="font-size:12px !important;width:30%" >
    <p:commandButton  id="globalAdjustID"  image="#{review.imageUrl}" actionListener="#{review.showUpdateList}" update="grid1"/>  
    </p:fieldset>

    <h:selectOneMenu id="SelectID"   value="#{review.reviewList}"  rendered="#{demandReview.selectoneRenderer}">
        <f:selectItems id="FilterSelectListID"   value="#{review.reviewListIDs}" style="font-size:12px !important"></f:selectItems>
    </h:selectOneMenu>
    <h:inputText id="fieldUpdateID" required="false" rendered="#{review.inputTextRenderer}"></h:inputText>
</h:panelGrid>

这样您将使用部分处理，面板内部组件的条件渲染将通过 AJAX 完成。

此外，检查服务器的控制台以查看队列中是否有任何未显示的消息是个好主意。

【讨论】：

【解决方案2】：

需求是否指定使用服务器端？对于这样的事情，我会认为一个简单的 Javascript 脚本会更适合。

例如，使用 jQuery 库执行以下操作：

<h:commandButton id="xyz" onclick="$('#elementId').toggle();"/>

【讨论】：