onload script does not work in subview page in JSF_问答_开发者

I have written two JSP pages: outerPage.jsp and innerPage.jsp.

The outerPage.jsp includes innerPage.jsp.

The innerPage.jsp has one textfield and one button.

I need to set focus on textFiled in innerPage.jsp while the page loads.

I wrote JavaScript which is called during body onload of outerPage.jsp, but it does not work.

Here is the outerPage.jsp:

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">

<%@ taglib uri="http://java.sun.com/jsf/core" prefix="f" %>
<%@ taglib uri="http://java.sun.com/jsf/html" prefix="h" %>
<%@ taglib uri="http://richfaces.org/a4j" prefix="a4j" %>
<%@ taglib uri="http://richfaces.org/rich" prefix="rich"%>    

<html>
    <f:view>
        <head>
            <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
            <title>Outer Viewer</title>
            <meta name="description" content="Outer Viewer" />                    
        </head>
        <body id="outerMainBody">
            <rich:page id="richPage">                             
                <rich:layout>
                    <rich:layoutPanel position="center" width="100*">
                        <a4j:outputPanel>
                            <f:verbatim><table style="padding: 5px;"><tbody><tr>
                                            <td>
                                               <jsp:include page="innerPage.jsp" flush="true"/>      
                                            </td>
                                        </tr></tbody></table></f:verbatim>
                                </a4j:outputPanel>
                            </rich:layoutPanel>
                        </rich:layout>
                    </rich:page>
        </body>
    </f:view>
</html>

Here is the innerPage.jsp:

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">

<%@ taglib uri="http://java.sun.com/jsf/core" prefix="f" %>
<%@ taglib uri="http://java.sun.com/jsf/html" prefix="h" %>
<%@ taglib uri="http://richfaces.org/a4j" prefix="a4j" %>
<%@ taglib uri="http://richfaces.org/rich" prefix="rich"%>   

<f:verbatim><html></f:verbatim>
    <f:subview id="innerViewerSubviewId">
        <f:verbatim><head>
                <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
                <title>Inner Viewer </title>               
                <script type="text/javascript">
//This script does not called during the page loading (onload)       
                    function cursorFocus() 

                    {
                        alert("Cursor Focuse Method called...");                
                        document.getElementById("innerViewerForm:innerNameField").focus();
                        alert("Cursor Focuse method end!!!");
                    }               
                </script>
            </head>
            <body onload="cursorFocus();"></f:verbatim>

            <h:form id="innerViewerForm">
                <rich:panel id="innerViewerRichPanel">

                    <f:facet name="header">
                        <h:outputText value="Inner Viewer" />
                    </f:facet>

                    <a4j:outputPanel id="innerViewerOutputPanel" >

                        <h:panelGrid id="innerViewerSearchGrid" columns="2" cellpadding="3" cellspacing="3">

                             //<%-- Row 1 For Text Field --%>
                     <h:outputText value="inner Name : " />
                     <h:inputText id="innerNameField" value=""/>                           

                     //<%--  Row 2 For Test Button --%>
                     <h:outputText value="" />
                     <h:commandButton  value="TestButton" action="test" />

                    </h:panelGrid>                                             

                    </a4j:outputPanel>
                </rich:panel>
            </开发者_开发知识库h:form>           
            <f:verbatim></body></f:verbatim>
    </f:subview>
    <f:verbatim></html></f:verbatim>

The cursorFocus() script is not get called.

Thanks in advance.

When you have this type of problem,

Just call the script at the end of the page before tag

Your body tag will be changed to

...content above body
<body>
...content inside body
<script type="text/javascript">cursorFocus();</script>
</body>
...content after body

You miss the subView id for your script :

              function cursorFocus() 
               {
                    alert("Cursor Focuse Method called...");                
                    document.getElementById("innerViewerForm:innerNameField").focus();
                    alert("Cursor Focuse method end!!!");
                }               
            </script>

So you use the following script and check it

function cursorFocus()
{

document.getElementById("innerViewerSubviewId:innerViewerForm:innerNameField").focus();

}

Your HTML is syntactically invalid. The generated HTML output must look like as follows:

<!doctype declaration>
<html>
    <head>...</head>
    <body>...</body>
</html>

But yours ends up like:

<!doctype declaration>
<html>
     <head>...</head>
     <body>
         <!doctype declaration>
         <html>
              <head>...</head>
              <body>...</body>
         </html>
     </body>
</html>

Rightclick page in browser and View Source. Does it look right? No. The W3 markup validator should also have hinted about that if you've tested it.

Since the generated HTML is incredibly malformed, the webbrowser don't know how and where to locate the HTML DOM element you need in the Javascript function. The behaviour is unspecified.

You need to rewrite the pages as follows:

outerPage.jsp

<!doctype declaration>
<f:view>
    <html>
        <head>
            <title>...</title>
            <meta>...</meta>
            <script>...</script>
        </head>
        <body>
            <jsp:include />
        </body>
    </html>
</f:view>

innerPage.jsp

<f:subview>
    <h:form>
        <h:inputText />
    </h:form>
</f:subview>

Indeed, you should not put <!doctype>, <html>, <head> and <body> tags in innerPage.jsp! Just code it so as if it is the actual include, but then with only <f:subview> around it.

This way it will end up syntactically valid:

<!doctype declaration>
<html>
    <head>
        <title>...</title>
        <meta>...</meta>
        <script>...</script>
    </head>
    <body>
        <form>
            <input type="text" />
        </form>
    </body>
</html>

Once you've aligned all that HTML, then you can concentrate on the functioning of the JavaScript function. Check the generated client ID of the <form> element in the generated HTML source (rightclick page in webbrowser, View Source) and then use it in the document.getElementById().