primefaces 切换（命令）按钮答案

【问题标题】：primefaces toggle (command)buttonprimefaces 切换（命令）按钮
【发布时间】：2015-11-24 10:07:06
【问题描述】：

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

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

javascript：

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

css:

.myCustomClass{
 background-color: red;
}

由于某些原因，这不起作用。我的假设是 PF 对按钮的样式有一些魔力，我的类被添加并立即删除。有什么提示吗？

【问题讨论】：

添加和删除有没有试过？用浏览器开发工具检查？检查网络流量（按钮确实使用 ajax 更新）
How to update the style of a JSF component at runtime的可能重复
如果您不想调用任何服务器端方法，请将type="button" 添加到commandButton。这可以防止服务器调用。请参阅 PrimeFaces 文档

标签： css jsf primefaces toggleclass

【解决方案1】：

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

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

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

【讨论】：

【解决方案2】：

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

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

但由于其他原因...我只是注意到 primefaces 有时会在最后一步从组件中删除所有 css 类，只是为了再次放置它们自己的类。所以不可能改变一个样式类。但不能与命令按钮结合使用

【讨论】：

“所以不可能更改样式类。但不能与命令按钮结合使用” 嗯……有点矛盾 ;-) 至少这表明它应该使用命令按钮。虽然推理并不完全正确。 OP 怀疑发生的所有事情都是更新按钮客户端。但是 OP 没有考虑 ajax 调用和更新。该更新再次删除了该类。
越想越清楚。我认为更新删除样式类是正常的。是否可以将样式类设置为 bean 的属性并通过 EL 获取？
是的，请参阅其他答案，但所有这些“基本”问题通常已经在 Stackoverflow 中有问答。