- 

Available since OmniFaces 1.2

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 via update(String...), also UIData rows or columns on specific index via updateRow(UIData, int) and updateColumn(UIData, int), specifying callback scripts which should be executed on complete of the ajax response via oncomplete(String...), and loading new JavaScript resources on complete of the ajax response via load(String, String).

It also supports adding arguments to the JavaScript scope via data(String, Object), data(Map) and data(Object...). 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 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.

Usage

Here are some examples:

// Update specific component on complete of ajax.
Ajax.update("formId:someId");
// Load script resource on complete of ajax.
Ajax.load("libraryName", "js/resourceName.js");
// Add variables to JavaScript scope.
Ajax.data("foo", foo); // It will be available as OmniFaces.Ajax.data.foo in JavaScript.
// Execute script on complete of ajax.
Ajax.oncomplete("alert(OmniFaces.Ajax.data.foo)");

For a full list, check the method summary.

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" Faces utility library, feel free to post a feature request.

Demo

Update a component programmatically

It's now 2024-03-19T10:12:45.639785+01:00[Europe/Amsterdam]


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

col1 col2 col3
2024-03-19T10:12:45.639785+01:00[Europe/Amsterdam] 2024-03-19T10:12:45.639785+01:00[Europe/Amsterdam] 2024-03-19T10:12:45.639785+01:00[Europe/Amsterdam]
2024-03-19T10:12:45.639785+01:00[Europe/Amsterdam] 2024-03-19T10:12:45.639785+01:00[Europe/Amsterdam] 2024-03-19T10:12:45.639785+01:00[Europe/Amsterdam]
2024-03-19T10:12:45.639785+01:00[Europe/Amsterdam] 2024-03-19T10:12:45.639785+01:00[Europe/Amsterdam] 2024-03-19T10:12:45.639785+01:00[Europe/Amsterdam]


Update specific UIData rows and columns programmatically (PrimeFaces example)

col1col2col3
2024-03-19T10:12:45.639785+01:00[Europe/Amsterdam]2024-03-19T10:12:45.639785+01:00[Europe/Amsterdam]2024-03-19T10:12:45.639785+01:00[Europe/Amsterdam]
2024-03-19T10:12:45.639785+01:00[Europe/Amsterdam]2024-03-19T10:12:45.639785+01:00[Europe/Amsterdam]2024-03-19T10:12:45.639785+01:00[Europe/Amsterdam]
2024-03-19T10:12:45.639785+01:00[Europe/Amsterdam]2024-03-19T10:12:45.639785+01:00[Europe/Amsterdam]2024-03-19T10:12:45.639785+01:00[Europe/Amsterdam]


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 Faces 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>