• cdi
  • components
  • contexts
  • converters
  • eventlisteners
  • exceptionhandlers
  • facesviews
  • filters
  • functions
  • managedbeans
  • push
  • renderkits
  • resourcehandlers
  • scripts
  • servlets
  • taghandlers
  • utils
  • validators
  • viewhandlers
-
  • Ajax
  • Beans
  • BeansLocal
  • Components
  • Events
  • Exceptions
  • Faces
  • FacesConfigXml
  • FacesLocal
  • JNDI
  • Messages
  • Servlets
  • WebXml

Collection of utility methods for working with PartialViewContext. There are also shortcuts to the current OmniPartialViewContext instance.

This utility class allows an easy way of programmaticaly (from inside a managed bean method) specifying new client IDs which should be ajax-updated, also UIData rows or columns on specific index, specifying callback scripts which should be executed on complete of the ajax response and adding arguments to the JavaScript scope. The added arguments are during the "on complete" phase as a JSON object available by OmniFaces.Ajax.data in JavaScript context.

The JSON object is been encoded by Json.encode(Object) which supports standard Java types Boolean, Number, CharSequence and Date arrays, Collections and Maps of them and as last resort it will use the Introspector to examine it as a Javabean and encode it like a Map.

Note that updateRow(UIData, int) and updateColumn(UIData, int) can only update cell content when it has been wrapped in some container component with a fixed ID.

Feature request

If you know more useful methods/functions which you think should be added to this OmniFaces utility class so that everyone can benefit from a "standard" JSF utility library, feel free to post a feature request.

Demo

Update a component programmatically

It's now Sat May 28 23:43:00 EDT 2016


Update specific UIData rows and columns programmatically (standard JSF example)

col1 col2 col3
Sat May 28 23:43:00 EDT 2016 Sat May 28 23:43:00 EDT 2016 Sat May 28 23:43:00 EDT 2016
Sat May 28 23:43:00 EDT 2016 Sat May 28 23:43:00 EDT 2016 Sat May 28 23:43:00 EDT 2016
Sat May 28 23:43:00 EDT 2016 Sat May 28 23:43:00 EDT 2016 Sat May 28 23:43:00 EDT 2016


Update specific UIData rows and columns programmatically (PrimeFaces example)

col1col2col3
Sat May 28 23:43:00 EDT 2016Sat May 28 23:43:00 EDT 2016Sat May 28 23:43:00 EDT 2016
Sat May 28 23:43:00 EDT 2016Sat May 28 23:43:00 EDT 2016Sat May 28 23:43:00 EDT 2016
Sat May 28 23:43:00 EDT 2016Sat May 28 23:43:00 EDT 2016Sat May 28 23:43:00 EDT 2016


Execute a callback script programmatically


Add arguments to the JavaScript scope

    Demo source code
    <h3>Update a component programmatically</h3>
    <h:form id="form">
        <h:commandButton value="submit" action="#{ajaxBean.update}">
            <f:ajax />
        </h:commandButton>
        <p>It's now <h:outputText id="timestamp" value="#{now.toString()}" /></p>
    </h:form>
    
    <hr />
    
    <h3>Update specific UIData rows and columns programmatically (standard JSF example)</h3>
    <h:form>
        <h:dataTable binding="#{table1}" value="#{of:createArray(3)}" width="100%">
            <h:column><f:facet name="header">col1</f:facet><h:panelGroup id="col1">#{now}</h:panelGroup></h:column>
            <h:column><f:facet name="header">col2</f:facet><h:panelGroup id="col2">#{now}</h:panelGroup></h:column>
            <h:column><f:facet name="header">col3</f:facet><h:panelGroup id="col3">#{now}</h:panelGroup></h:column>
        </h:dataTable>
    
        <p>
            <f:ajax>
                <h:commandButton value="update row1" action="#{ajaxBean.updateRow(table1, 0)}" />
                <h:commandButton value="update row2" action="#{ajaxBean.updateRow(table1, 1)}" />
                <h:commandButton value="update row3" action="#{ajaxBean.updateRow(table1, 2)}" />
                <h:commandButton value="update col1" action="#{ajaxBean.updateColumn(table1, 0)}" />
                <h:commandButton value="update col2" action="#{ajaxBean.updateColumn(table1, 1)}" />
                <h:commandButton value="update col3" action="#{ajaxBean.updateColumn(table1, 2)}" />
            </f:ajax>
        </p>
    </h:form>
    
    <hr />
    
    <h3>Update specific UIData rows and columns programmatically (PrimeFaces example)</h3>
    <h:form>
        <p:dataTable binding="#{table2}" value="#{of:createArray(3)}">
            <p:column headerText="col1"><h:panelGroup id="col1">#{now}</h:panelGroup></p:column>
            <p:column headerText="col2"><h:panelGroup id="col2">#{now}</h:panelGroup></p:column>
            <p:column headerText="col3"><h:panelGroup id="col3">#{now}</h:panelGroup></p:column>
        </p:dataTable>
    
        <p>
            <p:commandButton value="update row1" action="#{ajaxBean.updateRow(table2, 0)}" />
            <p:commandButton value="update row2" action="#{ajaxBean.updateRow(table2, 1)}" />
            <p:commandButton value="update row3" action="#{ajaxBean.updateRow(table2, 2)}" />
            <p:commandButton value="update col1" action="#{ajaxBean.updateColumn(table2, 0)}" />
            <p:commandButton value="update col2" action="#{ajaxBean.updateColumn(table2, 1)}" />
            <p:commandButton value="update col3" action="#{ajaxBean.updateColumn(table2, 2)}" />
        </p>
    </h:form>
    
    <hr />
    
    <h3>Execute a callback script programmatically</h3>
    <h:form>
        <h:commandButton value="submit" action="#{ajaxBean.callback}">
            <f:ajax />
        </h:commandButton>
    </h:form>
    
    <hr />
    
    <h3>Add arguments to the JavaScript scope</h3>
    <h:form>
        <h:commandButton value="submit" onclick="$('#showData').empty()" action="#{ajaxBean.argument}">
            <f:ajax />
        </h:commandButton>
    </h:form>
    <ul id="showData"></ul>
    <h:outputScript>
        function showData() {
            var data = OmniFaces.Ajax.data;
            var $showData = $("#showData");
            
            $.each(data, function(key, value) {
                $("&lt;li&gt;").text(key + "=" + JSON.stringify(value)).appendTo($showData);
            });
        }
    </h:outputScript>