Change the value of <p: commandButton> using JavaScript

Question

Is there a way to change the value of <p:commandButton> using Javascript?

I tried setting widgetVar to <p:commandButton> , but it does not have the setValue() function or something like that. I cannot bind it to a managed bean due to other special problems with my XHTML.

Answer 1

JSF generates HTML. JavaScript works with HTML. When writing JavaScript code, do not look too much at the JSF source code, if you can no longer determine the shape of the top of the head, which HTML code will generate.

Open the JSF page in your favorite browser, right-click and select View Source. The generated HTML output <p:commandButton value="foo" /> as follows:

 <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 one child <span> with this value.

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

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