Question

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

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

的javascript：

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

的CSS：

.myCustomClass{
 background-color: red;
}

由于某些原因，这不起作用。我的假设是PF用按钮的风格做了一些魔术，我的课程被添加并立即删除。一些提示？

Answer 1

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

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

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

Answer 2

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

I'm female.

但是出于其他原因...我只是注意到，在最后一步中，primefaces有时会从组件中删除所有css类，只是为了再次放置它们自己的类。所以改变风格类是不可能的。但不与commandButton

结合使用

primefaces toggle（命令）按钮

2 个答案: