Onload script not working on subview page in JSF
I wrote two JSP pages: outerPage.jsp
and innerPage.jsp
. outerPage.jsp
includes innerPage.jsp
. innerPage.jsp
has one text box and one button.
I need to set focus to textFiled in innerPage.jsp
while the page is loading.
I wrote JavaScript that gets called at body load time outerPage.jsp
, but it doesn't work.
Here is 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 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()
the script is not called.
Thanks in advance.
a source to share
Your text is not syntactically valid. The generated HTML output should look like this:
<!doctype declaration>
<html>
<head>...</head>
<body>...</body>
</html>
But yours ends like this:
<!doctype declaration>
<html>
<head>...</head>
<body>
<!doctype declaration>
<html>
<head>...</head>
<body>...</body>
</html>
</body>
</html>
The right page in the browser and view the source. Does it look right? No. The W3 markup validator should also have hinted at this if you've tested it.
Since the generated HTML is incredibly garbled, the web browser doesn't know how or where to find the HTML DOM element you need in the Javascript function. Behavior unspecified.
You need to rewrite pages like this:
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>
In fact, you should not place the tags <!doctype>
, <html>
, <head>
and <body>
in innerPage.jsp
! Just copy it as if it were relevant , but only with <f:subview>
around it.
So this will be syntactically correct:
<!doctype declaration>
<html>
<head>
<title>...</title>
<meta>...</meta>
<script>...</script>
</head>
<body>
<form>
<input type="text" />
</form>
</body>
</html>
Once you have all this HTML aligned, you can focus on the JavaScript function's functionality. Check the generated element client id <form>
in the generated HTML source (right page in web browser, view source) and then use it in document.getElementById()
.
a source to share
You missed 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();
}
a source to share