I'm designing the view for my site, which has a standard login and landing page, and I want to have an onLoad function called for my login page, but not for my other pages (yet). I've got a template.xhtml file, which has this insert:
<div id="content">
<ui:insert name="content"/>
</div>
Then in login.xhtml I have:
<ui:define name="content">
...
</ui:define>
Normally I would put this in login.xhtml:
<body onload="document.getElementById('login_form:name').focus();">
But since I'm using JSF's ui composition tags, I can't have the <body/>
tag in login.xhtml (at least the way I am attempting to do it).
Is there a way to accomplish this with the structure I've described? The way I would think of doing it is to have onLoad call a function in the template, and then each page with ui:define would populate this function. Is that possible?
Thanks!
I can think of at least two ways:
define the header section with <ui:define name="header">
, and put a javascript function (function bodyLoaded(){..}
) in it - different on every page, and then reference it via <body onload="bodyLoaded();">
use facelets params. I.e. <body onload="#{onLoadJS}"/>
and on each page including the template use <ui:param name="onLoadJS" value="document.getElementById(..)" />
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With