无法执行在父jsp div标签内调用的子html的onload()



以下是父jsp

的代码

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<%@page import="org.apache.jasper.tagplugins.jstl.core.ForEach"%>
<%@page import="java.util.Iterator"%>
<%@page import="com.sal.bean.CompanyBean"%>
<%@page import="java.util.List"%>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
<link rel="stylesheet" href="styles.css">
<script src="http://code.jquery.com/jquery-latest.min.js"
	type="text/javascript"></script>
<script src="script.js"></script>
<script>
	/* function loadHTML(pageName) {
		//alert(pageName);
		var name = pageName + ".html";
		//alert(name);
		$('#my_div').load(name + ' #' + pageName);
		//alert("2"); */
		
		
		function loadHTML(pageName) {
			var name = pageName + ".html";
		
    $('#my_div').load(name);
}
	
</script>
</head>
<body>
	<%
		List<CompanyBean> cmpList = (List<CompanyBean>) request
				.getAttribute("CompDtl");
		Iterator itr = cmpList.iterator();
		CompanyBean cmp = (CompanyBean) itr.next();
	%>
	<div
		style="height: 100px; width: 101%; background: none repeat scroll 0 0 #80817D; margin: -15px 0px 0px -7px; border-radius: 10px;">
		<ul style="list-style-type: none;">
			<li
				style="font-size: 72px; font-family: Verdana; margin-right: 30px; float: right;"><%=cmp.getComp_nm()%></li>
		</ul>
	</div>
	<div style="margin: 0px 0px 0px -7px; border-radius: 10px">
		<div id='cssmenu'
			style="height: 100vh; width: 15%; float: left; background-color: gray;">
			<div id='cssmenu'>
				<ul>
					<li class='active'><a href='#'><span>Home</span></a></li>
					<li class='has-sub'><a href='#'><span>SETUP</span></a>
						<ul>
							<li onclick="loadHTML('Department')" id="dept"><a href='#'><span
									id="dept">DEPARTMENT</span></a></li>
							<li onclick="loadHTML('Contractor')"><a href='#'><span>CONTRACTOR</span></a></li>
							<li onclick="loadHTML('Salary_mode')" class='last'><a
								href='#'><span>SALARY MODE</span></a></li>
						</ul></li>
					
					<li class='has-sub'><a href='#'><span>About</span></a>
						<ul>
							<li><a href='#'><span>Company</span></a></li>
							<li class='last'><a href='#'><span>Contact</span></a></li>
						</ul></li>
				</ul>
			</div>
		</div>
		<div id="my_div" style="height:100vh; width:85%; float: left"></div>
	</div>
</body>
</html>

以下是带有id = mydiv

的子div标签的子html的代码

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
</head>
<body onload="getDeptID()">
	<div id=Department>
		<script>
			function getDeptID(){
				alert("hello");
			}
		</script>
		<form action="SalaryControl" method="post">
			<div>
				<div style="float: left;">
					<span>Department Code</span>
				</div>
				<div>
					<input type="text" id="dept_id" tabindex="-1" onFocus="this.blur()"
						value="" />
				</div>
			</div>
		</form>
	</div>
</body>
</html>

当我成功从主JSP(父jsp页)中单击导航栏中的各个按钮时,孩子被加载,但是子html中的onload()函数均未执行。请帮助解决问题。

您并没有真正指定您在这里需要的内容,但是我认为您可以在不运行子页面中的函数的情况下完成此操作,而是在回调函数中调用函数。p>例如:

...
<link rel="stylesheet" href="styles.css">
<script src="http://code.jquery.com/jquery-latest.min.js"
    type="text/javascript"></script>
<script src="script.js"></script>
<script>
        function loadHTML(pageName) {
            var name = pageName + ".html";
    $('#my_div').load(name, function() {
        //code that was in getDeptID()
        alert("hello");
     });
}
...

在回调中您可以做很多不同的事情,我敢肯定它可以做您真正需要的事情。

有关更多信息,请参见jQuery API加载功能。

最新更新