• cdi
  • components
  • contexts
  • converters
  • eventlisteners
  • exceptionhandlers
  • facesviews
  • filters
  • functions
  • managedbeans
  • push
  • resourcehandlers
  • scripts
  • servlets
  • taghandlers
  • utils
  • validators
  • viewhandlers
-
  • cache
  • commandScript
  • componentIdParam
  • conditionalComment
  • deferredScript
  • form
  • graphicImage
  • highlight
  • inputFile
  • messages
  • moveComponent
  • onloadScript
  • outputFormat
  • outputLabel
  • param
  • resolveComponent
  • resourceInclude
  • tree
  • url
  • viewAction
  • viewParam

The <o:commandScript> is a component based on the standard <h:commandXxx> which generates a JavaScript function in the global JavaScript scope which allows the end-user to execute a JSF ajax request by just a function call functionName() in the JavaScript context.

The <o:commandScript> component is required to be enclosed in a UIForm component. The name attribute is required and it represents the JavaScript function name. The execute and render attributes work exactly the same as in <f:ajax>. The onbegin and oncomplete attributes must represent (valid!) JavaScript code which will be executed before sending the ajax request and after processing the ajax response respectively. The action, actionListener and immediate attributes work exactly the same as in <h:commandXxx>.

Basic usage example of <o:commandScript> which submits the entire form on click of a plain HTML button:

<h:form>
    <h:inputText value="#{bean.input1}" ... />
    <h:inputText value="#{bean.input2}" ... />
    <h:inputText value="#{bean.input3}" ... />
    <o:commandScript name="submitForm" action="#{bean.submit}" render="@form" />
</h:form>
<input type="button" value="submit" onclick="submitForm()" />

Usage example which uses the <o:commandScript> as a poll function which updates every 3 seconds:

<h:form>
    <h:dataTable id="data" value="#{bean.data}" ...>...</h:dataTable>
    <o:commandScript name="updateData" action="#{bean.reloadData}" render="data" />
</h:form>
<h:outputScript target="body">setInterval(updateData, 3000);</h:outputScript>

The component also supports nesting of <f:param>, <f:actionListener> and <f:setPropertyActionListener>, exactly like as in <h:commandXxx>. The function also supports a JS object as argument which will then end up in the HTTP request parameter map:

functionName({ name1: "value1", name2: "value2" });

With the above example, the parameters are in the action method available as follows:

String name1 = Faces.getRequestParameter("name1"); // value1
String name2 = Faces.getRequestParameter("name2"); // value2

This is much similar to PrimeFaces <p:remoteCommand>, expect that the <o:commandScript> uses the standard JSF ajax API instead of the PrimeFaces/jQuery ajax API. So it wouldn't trigger jQuery-specific event listeners, but only JSF-specific event listeners (e.g. jsf.ajax.addOnEvent() and so on).

Demo

Pass hash fragment change to JSF

#foo #bar #baz (you can even specify your own in browser address bar!)

Hash fragments so far:


Poll every second

It is now Mon Sep 26 21:49:47 EDT 2016

Note: the progress indicator on the mouse cursor isn't JSF default, it's specific to this showcase application. So, if you actually didn't want to show one for polls in your application, you're by default already set.


Lazy loading

With autorun="true" you can defer loading and rendering to window onload event.

Note: in case you missed it, just refresh the page to see it once again.

Demo source code
<h3>Pass hash fragment change to JSF</h3>
<p>
    <a href="#foo">#foo</a> <a href="#bar">#bar</a> <a href="#baz">#baz</a> 
    (you can even specify your own in browser address bar!)
</p> 
<p>
    Hash fragments so far: 
    <h:outputText id="hashFragments" value="#{of:joinCollection(commandScriptBean.hashFragments, ', ')}" />
</p>
<h:form>
    <o:commandScript name="addHashFragment" execute="@form" action="#{commandScriptBean.addHashFragment}" 
        render=":hashFragments" oncomplete="alert('Hash fragment ' + location.hash + ' added!')"/>
</h:form>
<h:outputScript target="body">
    window.onhashchange = function() {
        addHashFragment({ hashFragment: location.hash });
    }
</h:outputScript>

<hr />

<h3>Poll every second</h3>
<p>It is now <h:outputText id="timestamp" value="#{now}" /></p>
<h:form>
    <o:commandScript name="updateTimestamp" render=":timestamp" />
    <input type="button" value="Start poll" onclick="if (!window.poll) poll = setInterval(updateTimestamp, 1000)" />
    <input type="button" value="Stop poll" onclick="if (window.poll) { clearInterval(poll); poll = null; }" />
</h:form>
<p><i>
    Note: the progress indicator on the mouse cursor isn't JSF default, it's 
    <a href="#{request.contextPath}/resources/showcase/js/onload.js">specific</a>
    to this showcase application.
    So, if you actually didn't want to show one for polls in your application, you're by default already set.
</i></p>

<hr />

<h3>Lazy loading</h3>
<p>With <code>autorun="true"</code> you can defer loading and rendering to window onload event.</p>
<h:panelGroup id="lazyDataPanel">
    <ui:fragment rendered="#{not empty commandScriptBean.exampleEntities}">
        <h:dataTable value="#{commandScriptBean.exampleEntities}" var="exampleEntity">
            <h:column>#{exampleEntity.id}</h:column>
            <h:column>#{exampleEntity.value}</h:column>
        </h:dataTable>
    </ui:fragment>
</h:panelGroup>
<h:form>
    <o:commandScript name="loadLazyData" action="#{commandScriptBean.loadLazyData}" render=":lazyDataPanel" autorun="true" />
</h:form>
<p><i>
    Note: in case you missed it, just refresh the page to see it once again.
</i></p>
Documentation & Sources