Change <p:commandButton> value with JavaScript

Question

Is there any way to change a <p:commandButton> value with Javascript?

I tried to set a widgetVar in the <p:commandButton> but it doesn't have any setValue() function or something like this. I can't bind it to a managed bean due to other specific issues with my XHTML.

Answer 1

JSF generates HTML. JavaScript works with HTML. When writing JavaScript code, don't look too much at the JSF source code if you already can't tell form top of head what HTML code exactly it would generate.

Open the JSF page in your favourite browser, rightclick and View Source. The generated HTML output of a <p:commandButton value="foo" /> look like this:

<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>

Look, the button has a single <span> child with therein the value.

So, this piece of JS to change the button's value to bar should do:

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

Answer 2

This is a better way using the widgetVar :

lets say we set confirmWgt as the <p:commandButton> widgetVar, The javascript code to set its value will be :

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

Using this way, you are sure if any changes in the html code applied by primefaces in the future will not cause any problem in updating its version.