-
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.
Update a component programmatically
Update specific UIData rows and columns programmatically (standard Faces example)
Update specific UIData rows and columns programmatically (PrimeFaces example)
Execute a callback script programmatically
Add arguments to the JavaScript scope
<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) {
$("<li>").text(key + "=" + JSON.stringify(value)).appendTo($showData);
});
}
</h:outputScript>package org.omnifaces.showcase.utils;
import java.util.Arrays;
import java.util.Date;
import java.util.HashMap;
import java.util.Map;
import jakarta.enterprise.context.RequestScoped;
import jakarta.faces.component.UIData;
import jakarta.inject.Named;
import org.omnifaces.showcase.model.ExampleEntity;
import org.omnifaces.util.Ajax;
@Named
@RequestScoped
public class AjaxBean {
public void update() {
Ajax.update("form:timestamp");
}
public void callback() {
Ajax.oncomplete("alert('Hi, I am the oncomplete callback script!')");
}
public void argument() {
Ajax.data("foo", "bar");
Ajax.data("first", "one", "second", "two");
Map<String, Object> data = new HashMap<>();
data.put("bool", true);
data.put("number", 1.2F);
data.put("date", new Date());
data.put("array", new Integer[] { 1, 2, 3, 4, 5 });
data.put("list", Arrays.asList("one", "two", "three"));
data.put("beans", Arrays.asList(new ExampleEntity(1L, "one"), new ExampleEntity(2L, "two")));
Ajax.data(data);
Ajax.oncomplete("showData()");
}
public void updateRow(UIData table, int index) {
Ajax.updateRow(table, index);
}
public void updateColumn(UIData table, int index) {
Ajax.updateColumn(table, index);
}
}