Ajax Support

Ajax Updates

jQuery Mobile initializes mobile widgets at page load time automatically for once and widgets have to be refreshed manually if their state changes with ajax e.g. adding new items to datalist otherwise UI doesn't get enhanced for mobile. This makes jQuery Mobile almost impossible to use in ajax enabled JSF applications.

PrimeFaces Mobile provides ajax update support for all widgets in the mobile renderkit under the hood.

Consider the following case with a standard JSF commandButton with ajax and the PrimeFaces mobile counterpart.

Source

ajax.xhtml

<h:form>
    <p:panelGrid columns="2">
        <h:commandButton value="Standard">
            <f:ajax render="panel1" />
        </h:commandButton>

        <p:commandButton value="PFM" update="panel2" icon="ui-icon-refresh"/>

        <h:panelGroup id="panel1">
            <ul data-role="listview" data-inset="true">
                <li><a href="#">Item 1</a></li>
                <li><a href="#">Item 2</a></li>
                <li><a href="#">Item 3</a></li>
            </ul>

            <h:inputText />
        </h:panelGroup>

        <p:outputPanel id="panel2">
            <p:menu styleClass="ui-listview-inset ui-corner-all">
                <p:menuitem value="Item1" url="#" />
                <p:menuitem value="Item2" url="#" />
                <p:menuitem value="Item3" url="#" />
            </p:menu>

            <p:inputText />
        </p:outputPanel>
    </p:panelGrid>

</h:form>

Ajax Support

Ajax Updates

Ajax Status

Source