onload脚本在JSF的子视图页中不起作用

我写了两个JSP页面：outerPage.jsp和innerPage.jsp。
outerPage.jsp包括innerPage.jsp。
innerPage.jsp有一个文本框和一个按钮。onload脚本在JSF的子视图页中不起作用

我需要在加载页面时将焦点设置为innerPage.jsp中的文本文件。
我写了在正文onload outerPage.jsp期间调用的JavaScript，但它不起作用。

这里是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>

这里是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>

的cursorFocus()脚本不被调用。

在此先感谢。

来源

2010-05-18 jackrobert

当你有这种类型的问题，

标签之前就调用脚本页面结束

你的身体标记将变为

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

来源

2010-05-18 06:13:26

我想了解的一件事是..从JavaScript执行的JavaScript操作底部？ – 2013-11-28 09:39:33

是的。但是，您可以定义Java脚本函数，并且可以按任意顺序在页面中的任何位置定义它们。他们将按照被调用的顺序执行。 – 2013-11-28 10:21:57

你的HTML语法上无效。生成的HTML输出必须像下面这样：

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

但你最终像：

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

在浏览器中右击页面并查看源。它看起来不错吗？如果你已经测试过，W3 markup validator也应该暗示。

由于生成的HTML格式非常不正常，因此webbrowser不知道如何以及在Javascript函数中如何找到所需的HTML DOM元素。行为是未指定的。

你需要重写页面如下：

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>

事实上，你应该不把<!doctype>，<html>，<head>和<body>标签innerPage.jsp！只是编码它，就好像它是包含实际，但随后只有<f:subview>围绕它。

这样，它最终将语法有效：

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

一旦你已经对准所有的HTML，那么你就可以集中精力JavaScript函数的运作。检查<form>元件生成的客户端ID在生成的HTML源（右击页面中的浏览器，查看源），然后使用它的document.getElementById()。

来源

2010-05-18 11:29:43 BalusC

其实我在帖子里想念那个标签。但是我使用了所有语法。我使用netbeans IDE。所以不可能错过那个..对不起我的incovenice帖子。 – jackrobert 2010-05-19 02:20:01

请更新您的问题包括*实际*代码。要正确格式化它，你只需要使用** 4个空格缩进它**或选择它，然后按'在编辑器工具栏或'按Ctrl + K'键010101'按钮。否则HTML标签将消失。编辑消息时，请参阅右栏中的消息格式规则。 – BalusC 2010-05-19 02:24:37

您的代码仍然无效。你读过我的回答了吗？它不仅是双''条目。它更多。我已更新我的答案以反映您的问题更新。 – BalusC 2010-05-19 02:35:51

你错过了子视图ID为你的脚本：

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

所以你使用下面的脚本，并检查它

功能cursorFocus（）
{

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

}

来源

2010-05-19 02:39:56 Eswar

感谢Eswar为您的出色努力。雅它的工作。 – jackrobert 2010-05-19 02:55:58

onload脚本在JSF的子视图页中不起作用

回答

相关问题