1 Reply Latest reply on Mar 20, 2009 3:50 AM by monkeyden

    JSF Seam way to do a body onload call to JavaScript

    dolanp.dolanp.gmail.com
      Hello,

      I have this page:


      <!DOCTYPE composition PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
                                   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
      <ui:composition xmlns="http://www.w3.org/1999/xhtml"
                      xmlns:s="http://jboss.com/products/seam/taglib"
                      xmlns:ui="http://java.sun.com/jsf/facelets"
                      xmlns:f="http://java.sun.com/jsf/core"
                      xmlns:h="http://java.sun.com/jsf/html"
                      xmlns:rich="http://richfaces.org/rich"
                      xmlns:a="http://richfaces.org/a4j"
                      template="layout/template.xhtml">

      <ui:define name="body">  

      <body onload="document.getElementById('importMainForm:valueDecoration:upload').focus();">

          <h:messages globalOnly="true" styleClass="message"/>
         
          <h:form id="importMainForm" enctype="multipart/form-data">

              <rich:panel>
                  <f:facet name="header">Trading Partner Import</f:facet>

                                      <s:decorate id="valueDecoration" template="layout/edit.xhtml">
                                              <ui:define name="label">XML trading partner import file:
                      </ui:define>
                                              <s:fileUpload id="upload" data="#{importMain.fileStream}"/>

                                      </s:decorate>

                                      <div style="clear:both"/>
                 
                 
       
                 
                  <div style="clear:both"/>
                 
              </rich:panel>

              <div class="actionButtons">
                  <h:commandButton id="importMain" value="Next >"
                          action="#{importMain.importMain}" styleClass="mckSubmit"/>                        
              </div>

          </h:form>
      </body>
      </ui:define>

      </ui:composition>


      What I want is for the fileUpload input box to be focused when the page loads.  This is the only way I've been able to do it but it generates two body tags, one for the <body onload...> that I created and one for the <ui:define name="body"> tag.  If I take out the ui:define tag it renders nothing and messes up the whole page.  I'm sort of new to JSF so I was just wondering if anyone knew of the "JSF way" to combine the ui:define tag and the body onload so that I'm not duplicating the <body> tag in the rendered page output.

      Thanks.
        • 1. Re: JSF Seam way to do a body onload call to JavaScript
          monkeyden
          The second body tag isn't coming from name="body".  It's coming from the parent template for which the body "region" is defined.  This page is just a fragment, so you'll need to remove your body tag.  If you have the default seam-gen setup, the magically appearing html tag is in the file view -> layout -> template.xhtml

          As to the solution to your problem, you could do something like this:

          http://www.visionfactory.com.au/blog/binding_to_the_body_onload_event_in_a_po.html

          where you'd place the addToBodyOnload() function in template.xhtml of an included js file, and call it in this page fragment.