-
Available since OmniFaces 1.0
The <o:onloadScript is a component that extends the standard <h:outputScript> which will be executed in the end of the HTML body (thus when all HTML elements are initialized in the HTML DOM tree) and will re-execute its script body on every ajax request. 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, also after changes in the HTML DOM tree on ajax responses.
You can put it anywhere in the view, it will always be relocated to the end of body.
<o:onloadScript>alert('OnloadScript is invoked!');</o:onloadScript>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.
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.
Normal request
Ajax request
<p>
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 <code><h:outputScript></code> component.
</p>
<p>
Note that the point of the <code><o:onloadScript></code> 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.
</p>
<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>