views:

524

answers:

3

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"&gt;

<%@ 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"&gt;

<%@ 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.

A: 

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
RaviG
A: 

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().

BalusC
Actually i miss that tag during the post. But i have use all syntax. i use netbeans IDE. so there is no possible to miss that.. sorry for my incovenice post.
Please update your question include the *actual* code. To properly format it you just need to indent it with **4 spaces** or to select it and press `010101` button in editor toolbar or the `Ctrl+K` key. Else the HTML tags will disappear. Also see the message formatting rules on the right hand column while editing the message.
BalusC
Your code is still invalid. Did you read my answer? It are not only the double `<!doctype>` entries. It is more. I've updated my answer to reflect your question update.
BalusC
ok. Thanks for your well effort. Now its worked. The answer gave by eswaramoorthy-nec. I miss the subview id. The correct line is :document.getElementById("innerViewerSubviewId:innerViewerForm:innerNameField").focus();
A: 

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();   

}

EswaraMoorthyNEC
Thanks Eswar for your nice effort. Ya its worked.