• cdi
  • components
  • contexts
  • converters
  • eventlisteners
  • exceptionhandlers
  • facesviews
  • filters
  • functions
  • managedbeans
  • renderkits
  • resourcehandlers
  • scripts
  • taghandlers
  • utils
  • validators
-
  • cache
  • commandScript
  • componentIdParam
  • conditionalComment
  • form
  • highlight
  • messages
  • onloadScript
  • outputFormat
  • outputLabel
  • param
  • resourceInclude
  • tree
  • viewParam

Description

When the page loads, you should see the annoying JavaScript alert "Hi, I am the o:onloadScript function!". You should see the same alert again when you submit the form, also on ajax submits. This would not happen for ajax submits when you have used the standard <h:outputScript> component.

Note that the point of the <o:onloadScript> is not the annoying alert, but that a particular piece of JavaScript code is re-executed on every successful ajax response. This is particularly useful if you want to re-execute a specific helper script to manipulate the HTML DOM tree, such as (re-)adding fancy tooltips, performing highlights, etcetera, on every ajax request, also after changes in the HTML DOM tree on ajax responses.

The <o:onloadScript> is implicitly relocated to the end of the <body>, exactly like as <h:outputScript target="body"> does. So it's always executed when the entire <body> is finished populating and thus you don't need a window.onload or a $(document).ready() in there. Again, the difference with <h:outputScript target="body"> is that the <o:onloadScript> is also executed on every ajax request.

Demo

Normal request


Ajax request

Source code
<o:onloadScript>alert("Hi, I am the o:onloadScript function!");</o:onloadScript>

<h3>Normal request</h3>
<h:form>
    <h:commandButton value="Submit" />
</h:form>

<hr />

<h3>Ajax request</h3>
<h:form>
    <h:commandButton value="Submit">
        <f:ajax />
    </h:commandButton>
</h:form>