使用 JavaScript 更改 <p:commandButton> 值答案

【问题标题】：Change <p:commandButton> value with JavaScript使用 JavaScript 更改 <p:commandButton> 值
【发布时间】：2012-05-19 14:21:48
【问题描述】：

有没有办法用 Javascript 更改 <p:commandButton> 的值？

我试图在<p:commandButton> 中设置widgetVar，但它没有任何setValue() 函数或类似的东西。由于我的 XHTML 的其他特定问题，我无法将它绑定到托管 bean。

【问题讨论】：

标签： javascript jsf jsf-2 primefaces

【解决方案1】：

JSF 生成 HTML。 JavaScript 适用于 HTML。在编写 JavaScript 代码时，如果您已经无法清楚地知道它会生成什么 HTML 代码，请不要过多查看 JSF 源代码。

在您喜欢的浏览器中打开 JSF 页面，右键单击并查看源代码。 <p:commandButton value="foo" /> 生成的 HTML 输出如下所示：

<button id="formId:buttonId" name="formId:buttonId" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" onclick="PrimeFaces.ab({formId:'formId',source:'formId:buttonId',process:'@all'});return false;" type="submit">
    <span class="ui-button-text">foo</span>
</button>

看，按钮有一个 <span> 子元素，其中包含值。

所以，这块 JS 将按钮的值更改为bar 应该这样做：

document.getElementById("formId:buttonId").firstChild.innerHTML = "bar";

【讨论】：

我明白了，这就是我之前所做的，但我认为有办法处理它的 WidgetVar。非常感谢您的帮助。

【解决方案2】：

这是使用 widgetVar 的更好方法：

假设我们将 confirmWgt 设置为 widgetVar，设置其值的 javascript 代码将是：

PF('confirmWgt').jq.text("New Value");

使用这种方式，您可以确定将来primefaces应用的html代码的任何更改都不会导致更新其版本出现任何问题。

【讨论】：