Search code examples
javascriptjsfjsf-2primefaces

Change <p:commandButton> value with JavaScript

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.

Solution

  • 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";