How make commandButton not fully refresh page? How to use f:ajax?

Question

I have to stream a webcam video, so I use ustream to do that, which generate a flash embed code for me, and I have a button to turn off/on the light, but when I press the button it refresh the whole page and so the flash component.

There's some way to not refresh the page and still send to command ? Well for now it's this way:

        <h:form id="form_supervisory">
            <h:panelGrid>
                <h:column>
                    <iframe width="480" height="296" src="http://www.ustream.tv/embed/9599890" scrolling="no" frameborder="0" style="border: 0px none transparent;">    </iframe>
                    <h:commandButton value="Lâmpada" action="#{supervisoryc.invertBo}" />
                    <h:graphicImage value="#{supervisoryc.imageBo}" />
                </h:column>
            </h:panelGrid>
        </h:form>

Answer 1

Make use of Ajax. It's a matter of nesting <f:ajax> inside the command button of interest.

<h:commandButton ...>
    <f:ajax execute="@form" render="@none" />
</h:commandButton>

Particularly the render="@none" (which is the default value anyway, you could just omit the attribute altogether) will instruct JSF to re-render just nothing after the submit. If you intend to re-render only a specific component instead of the whole page, then you could also specify the ID of that specific component in render attribute.

<h:commandButton ...>
    <f:ajax execute="@form" render="result" />
</h:commandButton>
<h:panelGroup id="result">...</h:panelGroup>

See also:

• Understanding PrimeFaces process/update and JSF f:ajax execute/render attributes
• How to find out client ID of component for ajax update/render? Cannot find component with expression "foo" referenced from "bar"
• Why do I need to nest a component with rendered="#{some}" in another component when I want to ajax-update it?