primefaces 切换（命令）按钮

Question

我正在尝试使用 primefaces 命令按钮作为切换按钮。我的想法是添加具有所需样式的 css class，这样：

<p:commandButton id="mybutton" onclick="toggleButton();"/>

javascript:

function toggleButton() {
        $(this).toggleClass("myCustomClass");
    return true;
}

css:

.myCustomClass{
 background-color: red;
}

由于某些原因，这不起作用。我的假设是 PF 对按钮的样式做了一些魔法，我的 class 被添加并立即被删除。一些提示？

Answer 1

您是否尝试过只更新 commandButton 而不是整个表单？

<p:commandButton id="my button" update="@this" onclick="toggleButton();"/>

但出于其他原因...我只是注意到 primefaces 有时会在最后一步从组件中删除所有 css classes 只是为了放置他们自己的 classes再次。所以换一个样式是不可能的class。但不能与 commandButton

结合使用

Answer 2

您的样式未更改的原因可能是 <p:commandButton> 发出 ajax 请求并更新了部分视图。（请参阅按钮的属性 update。）然后由 JavaScript 所做的更改将消失。如果您需要在单击按钮时发出 ajax 请求，最好将 styleClass 值绑定到服务器端 bean 上的属性，例如

<p:commandButton styleClass="#{myBean.buttonEnabled ? '' : 'myCustomClass'}" 
                 action="myBean.someAction()"... 
                 update="@this" />

然后在操作中您可以切换变量。

primefaces 切换（命令）按钮

primefaces toggle (command)button

css

jsf

toggleclass

primefaces