Cannot execute body onload function in <body> from Sitemesh - javascript

I am trying to create a simple application that includes Sitemesh for decorating the resulting page.
Following is the simple page I am trying to create.
<%# include file="/WEB-INF/jsp/include.jsp" %>
<%#taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
<title>Creating a simple map</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAXWLpztTcGIDURBKce345XdXtfws5guEs"></script>
<script type="text/javascript" src="<c:url value=" /resources/js/keydragzoom_packed.js " />"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript">
function init() {
alert("hi");
}
</script>
<style>
html,
body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
</style>
</head>
<body onLoad="init();">
<h1>Smart Farm Application</h1>
<p>Time right now is :
<c:out value="${now}" />
</p>
<table border="1" style="width: 1000px; height: 800px;">
<tr>
<th>Google Map API</th>
<th>Google Chart Section</th>
</tr>
<tr>
<td rowspan="2">
<div id="google_map_area" style="width: 500px; height: 800px;"></div>
</td>
<td>
<div id="scatter_chart_area" style="width: 500px; height: 400px;"></div>
</td>
</tr>
</table>
</body>
</html>
And following is the decorator page:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<%# taglib uri="http://www.opensymphony.com/sitemesh/decorator" prefix="decorator" %>
<%#taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%#page contentType="text/html; charset=UTF-8" %>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>https://bharatonjava.wordpress.com |
<decorator:title default="Sitemesh Example" />
</title>
<link rel="stylesheet" type="text/css" src="<c:url value=" /resources/assets/css/style.css " />">
<decorator:head />
</head>
<body>
<table class="mainTable" id="page-container" cellpadding="5" cellspacing="0" border="1" align="center">
<tr>
<td colspan="2" id="page-header">
<%# include file="/WEB-INF/includes/header.jsp" %>
</td>
</tr>
<tr>
<td id="nav-container" colspan="2">
<%# include file="/WEB-INF/includes/navigation.jsp" %>
</td>
</tr>
<tr>
<td id="left-nav-container">
<%# include file="/WEB-INF/includes/navigationLeft.jsp" %>
</td>
<td id="content-container">
<decorator:body onLoad="<decorator:getProperty property='body.onLoad' />">
</decorator:body>
</td>
</tr>
<tr>
<td colspan="2" id="page-footer">
<%# include file="/WEB-INF/includes/footer.jsp" %>
</td>
</tr>
</table>
<table align="center">
<tr>
<td align="center">
<br /><a href='https://test.com'>test</a>
</td>
</tr>
</table>
</body>
</html>
However this is not getting decorated at all. When I request the page from browser I see the following error :
java.lang.RuntimeException: org.apache.jasper.JasperException: /WEB-INF/decorators/layout.jsp(37,12) Attribute onLoad invalid for tag body according to TLD
com.opensymphony.sitemesh.webapp.decorator.BaseWebAppDecorator.render(BaseWebAppDecorator.java:39)
com.opensymphony.sitemesh.webapp.SiteMeshFilter.doFilter(SiteMeshFilter.java:84)
I can't figure out where I am wrong with the code above. I have spent hours trying to figure this without going anywhere. Has anyone faced this before ?

In fact it's onload="init();" instead of onLoad="init();", that's what raises the Exception, take a look at onload Event.
Or you can try this:
window.addEventListener("load", init, false);
Or
body.addEventListener("load", init, false);
More information at element.addEventListener.

Related

Features of Jquery Data Table is not working

I am trying to use dataTable with CDN however the view is looking fine my table is looking like a DataTable but its functionalities are not working like searching sorting, etc.
here is my JSP file code.
<%# page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<%# taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%# taglib prefix="form" uri="http://www.springframework.org/tags/form"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Student List</title>
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.21/css/jquery.dataTables.css">
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.21/js/jquery.dataTables.js"></script>
</head>
<body>
<div class="col-sm-12">
<h1>The List of Students IS :</h1>
</div>
<div class="row">
<div class="col-sm-2">
<input type="button" value="Add New Student"
onclick="addStudentForm()">
</div>
<div id="addStudentForm"></div>
<div class="col-sm-10">
<table id="dataTable" class="">
<thead>
<tr>
<th>Student Name</th>
<th>Student Course</th>
<th>Student Father</th>
<th>Student Address</th>
<th>Student Email</th>
<th>Action</th>
</tr>
</thead>
<c:forEach var="tempStudent" items="${theStudent}">
<tbody>
<tr>
<td>${tempStudent.name }</td>
<td>${tempStudent.course }</td>
<td>${tempStudent.fatherName }</td>
<td>${tempStudent.address }</td>
<td>${tempStudent.email }</td>
<td><a>Update</a>| <a>Delete</a></td>
</tr>
</c:forEach>
</tbody>
</table>
</div>
</div>
</body>
<script>
$(document).ready(function(){
$('#dataTable').dataTable();
});
</script>
</html>
This is the code I have used and I have checked there are no issues on the console as well but I am not getting why it is not working for me please help, thanks in advance.
You will have to define parameters specific to functionality. For example:
$('#dataTable').DataTable({
pageLength: 10,
filter: true
deferRender: true,
scrollY: 200,
scrollCollapse: true,
scroller: true
});

How can I import JS and HTML from a file?

Example import found in js file
Please adjust it so that the code is saved in the js file
Hello Please Help Example import found in js file Please adjust it so that the code is saved in the js file
<html dir="rtl">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>table</title>
</head>
<script>
function myim() {
a.innerHTML = import code in b.js
}
</script>
<body >
<div id="a" align="center">
</div>
<p>
<input type="button" name="go" id="bn" value="import" onclick="myim()"></p>
</body>
</html>
file b.js
<table border="1" cellpadding="0" style="border-collapse: collapse" width="80" dir="rtl">
<tr>
<td> <span lang="en">number</span></td>
</tr>
<tr>
<td>1</td>
</tr>
<tr>
<td>2</td>
</tr>
<tr>
<td>3</td>
</tr>
<tr>
<td>4</td>
</tr>
<tr>
<td>5</td>
</tr>
</table>
You can use XMLHttpRequest in javascript to request data from the server.
file.open("GET", "b.js"); can be used to open the file.
file.responseText is used to get data from that file.
Note:
Use this code on web server (local or online) to avoid CORS policy in some browsers.
<html dir="rtl">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>table</title>
</head>
<script>
function myim() {
var file = new XMLHttpRequest();
file.open("GET", "b.js");
file.onreadystatechange = function (){
content = file.responseText;
document.getElementById('a').innerHTML = content;
}
file.send(null);
}
</script>
<body >
<div id="a" align="center"></div>
<p><input type="button" name="go" id="bn" value="import" onclick="myim()"></p>
</body>
</html>
Thank you

Web application doesn't work on Edge Browser 41

I am working on Intranet web application. it has developed using Strust2 and run on the weblogic 12c server. application working on dev environment without any issue IE(11) and Edge(41) Microsoft browser.
But after deploying Production it only working IE(11).it doesn't work on Edge.we can launch login page after that but can't navigate on Edge.
Edge browser console we can see below error.
CSP14321 Resource violated directive 'default-src 'self'' in Content-security-Policy:inline script https://xx.xxx.x.xx/dms/login.action at line
19 column 30.Resource will be blocked
Note: Our Web Application supports work with IE11 and Edge.
I tried with the different approach but couldn't navigate from the login page
1.i remove the meta tags like
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
2.add meta tags like
<meta http-equiv="Content-Security-Policy" content="default-src 'self'"/>
above approach doesn't work.to change Content Security Policy no any configurations files in our application .plase help with this
This is the login page.
<%# taglib prefix="s" uri="/struts-tags"%>
<%# taglib prefix="sx" uri="/struts-dojo-tags"%>
<%# page contentType="text/html;charset=UTF-8" language="java"%>
<%# page import="tvm.ka.TvsGlobals"%>
<%# page errorPage="/tvs/ka/common/KvsCommonError.jsp"%>
<head>
<title><s:text name="title.login" /></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" href="<%=KvsConfigMgr.strCSS%>" type="text/css" />
<script language="JavaScript" src="<%=kvsConfigMgr.strJS%>KvsCommon.js">
</script>
<script language="JavaScript" src="<%=KvsConfigMgr.strJS%>KvsLogin.js">
</script>
<script language="JavaScript">
var MSG_USERID = "<s:text name="msg.login.userid"/>";
var MSG_PASSWORD = "<s:text name="msg.login.password"/>";
</script>
</head>
<body background="<%=KvsConfigMgr.strLstBg%>" leftmargin="0"
topmargin="0" marginwidth="0" marginheight="0" onLoad="focusFirst()">
<s:form action="login" method="POST">
<table border="0" cellspacing="0" cellpadding="0" width="100%">
<tr>
<td valign="top"><div align="center">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td colspan="2" background="<%=KvsConfigMgr.strIMG%>topbg.gif">
<table width="100%" border="0" cellpadding="0" cellspacing="0"
background="<%=KvsConfigMgr.strIMG%>topbg.gif">
<tr>
<td><table width="100%" border="0" cellpadding="0"
cellspacing="0">
<tr>
<td width="13%"
background="<%=KvsConfigMgr.strIMG%>logo_bg.jpg"><img
src="<%=KvsConfigMgr.strIMG%>default_01.jpg" width="133"
height="77" alt=""></td>
<td width="87%"
background="<%=KvsConfigMgr.strIMG%>top_bg.jpg"><img
src="<%=KvsConfigMgr.strIMG%>default_02.jpg" width="645"
height="77" alt=""></td>
</tr>
</table></td>
</tr>
</table>
</td>
</tr>
</table>
</div>
<div align="left"></div></td>
</tr>
</table>
<table border="0" cellspacing="0" cellpadding="0" width="100%">
<tr>
<td width="40%"> </td>
<td class="errorText">
<%-- <s:if
test="${not empty ${KmsGlobals.GLOBAL_ERR_MSG_LIST}.null}"
scope="request">
<s:iterator value="${KmsGlobals.GLOBAL_ERR_MSG_LIST}.null"
indexId="count" id="errMsg" type="java.lang.String">
<s:property value="errMsg.null" />
<br>
</s:iterator>
</s:if> --%> <s:if test="hasActionErrors()">
<div class="error">
<s:actionerror />
</div>
</s:if>
</td>
</tr>
<tr>
<td class="bodyTextSmall"> </td>
<td>
<table border="0" cellspacing="0" cellpadding="5">
<tr>
<td>To begin, please key in your user id and<br />password
below, and click on login.
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td> </td>
<td>
<table border="0" cellspacing="0" cellpadding="5">
<tr>
<td><img src="<%=KvsConfigMgr.strIMG%>tran.gif" width="80"
height="8" /></td>
<td><img src="<%=KvsConfigMgr.strIMG%>tran.gif" width="150"
height="8" /></td>
<td><img src="<%=KvsConfigMgr.strIMG%>tran.gif" width="80"
height="8" /></td>
</tr>
<tr>
<td class="bodyTextBold">User ID</td>
<td><input type="text" name="strUserId" size="20"
tabindex="1" /></td>
<td> </td>
</tr>
<tr>
<td class="bodyTextBold">Password</td>
<td>
<%--
<!--html:password property="strPasswd" autocomplete="off" size="20" tabindex="2"/ -->
I-WAPT-8 Password autocomplete attribute was enabled
Application Penetration Test Fix
--%> <input type="password" name="strPasswd"
autocomplete="off" size="20" tabindex="2" />
</td>
<td><input class="button" style="width: 70px" type="submit"
value="Login" onClick="return validate()" tabindex="3" /></td>
</tr>
<tr>
<td colspan="3" class="errorText">For authorised use only.
Unauthorised use is strictly prohibited.</td>
</tr>
</table>
</td>
</tr>
</table>
<%-- <s:hidden name="dispatch" value="login" /> --%>
<input type="hidden" name="dispatch" value="login" />
</s:form>
<div id="version-tag"><%=KvsConfigMgr.strVer%></div>
<style>
#version-tag {
position: absolute;
bottom: 0;
left: 0;
FONT-WEIGHT: normal;
FONT-SIZE: 11px;
COLOR: rgba(0, 0, 0, 0.6);
FONT-FAMILY: Arial, Verdana, Helvetica, sans-serif;
vertical-align: text-top;
border-color: #0085E0;
}
</style>
</body>
Along with content-security-policys you cannot use inline Javascript like onLoad="focusFirst()" and
<script language="JavaScript">
var MSG_USERID = "<s:text name="msg.login.userid"/>";
var MSG_PASSWORD = "<s:text name="msg.login.password"/>";
</script>
https://developer.chrome.com/extensions/contentSecurityPolicy#JSExecution
Inline Javascript code will simply not be executed.
Instead, create a Javascript file with this code:
document.addEventListener('load', focusFirst);
Make sure focusFirst function is known at that point.
Depending on what focusFirst does it might improve the performance if you instead attach the listener to the DOMContentLoaded event (which triggers when all HTML is parsed, whereas load only triggers much later once all linked resources like images etc. have been loaded).
Please note that inline <script> blocks will also not be executed with a content security policy active.

Display data in popup in JSP

I am a newbie working with web applications. I have a list that gets displayed in my JSP that i have done using servlet. It works properly when it is to display on the same browser page. Now i want to display the same in a popup?. How can i do it. I have tried using window.open but it does not help. It throws a 404 error. Please find the below code. Many thanks.
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Insert title here</title>
</head>
<body>
<form action="servlet/Controller">
Enter your Id:<input type="text" name="City"/><br/>
Click me
<script type="text/javascript">
var popupWindow=null;
function child_open()
{
popupWindow =window.open('display.jsp',"_blank","directories=no, status=no, menubar=no, scrollbars=yes, resizable=no,width=600, height=280,top=200,left=200");
}
</script>
<input type="submit" value="search" onclick="child_open()"/>
</form>
</body>
</html>
Display.jsp
<%# page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<%# taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!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>
<div align="center">
<table border="1" >
<h2>List of users</h2></caption>
<tr>
<th>ADDRESS_ID</th>
<th>ADDRESS_LINE1</th>
<th>ADDRESS_LINE2</th>
<th>ADDRESS_LINE3</th>
<th>CITY</th>
<th>COUNTRY_CD</th>
<th>ZIP</th>
<th>UPDATER</th>
<th>TIME_STAMP</th>
</tr>
<c:forEach var="user" items="${Data}">
<tr>
<td><c:out value="${user.addressId} " /></td>
<td><c:out value="${user.addressLine1}" /></td>
<td><c:out value="${user.addressLine2}" /></td>
<td><c:out value="${user.addressLine3}" /></td>
<td><c:out value="${user.cityCd}" /></td>
<td><c:out value="${user.countryCd}" /></td>
<td><c:out value="${user.zip}" /></td>
<td><c:out value="${user.updater}" /></td>
<td><c:out value="${user.timeStamp}" /></td>
</tr>
</c:forEach>
</table>
</div>
</body>
</html>
This can be achieved using Ajax call's.. please Refer to below link it might help you...
http://www.hiteshagrawal.com/ajax/ajax-programming-with-jsp-and-servlets/

form submission using tag <a> in jsp not working

I am trying to submit form from one jsp to an another jsp by using html tag as below :
<%# page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>SendIt Bank</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<link href="css/bank.css" rel="stylesheet" type="text/css">
<script language="JavaScript" type="text/JavaScript">
function checkUserInListAndSubmit() {
alert("hello");
document.getElementById('userLoginForm').submit();
//document.forms["userLogin"].submit();
}
</script>
</head>
<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<form name="userLoginForm" id="userLoginForm" action="accountdetails.jsp" method="POST">
<table width="202" height="154" border="0" align="center" cellpadding="5" cellspacing="0" bgcolor="#CCCCCC">
<tr>
<td colspan="2" valign="bottom" class="headermain"> </td>
</tr>
<tr>
<td colspan="2" valign="bottom" class="headermain"><div align="center" class="style4">Online
Banking Login</div></td>
</tr>
<tr>
<td class="loginbox style5">User ID:</td>
<td class="loginbox"><input name="userID" type="text" id="userID" size="12" maxlength="20"></td>
</tr>
<tr>
<td width="68" class="loginbox style5">Password: </td>
<td class="loginbox"><input name="password" type="password" id="password" size="12" maxlength="20"></td>
</tr>
<tr>
<td> </td>
<td width="103"><div align="left"><img src="images/btn-signin.png" alt="Sign In" name="submit" width="60" height="20" border="0" align="right"></div></td>
</tr>
<tr>
<td colspan="2"><p align="center"><span class="style2"><a href="FYP1.html">Forgot
your Password?</a><br>
</span> </p></td>
</tr>
</table>
</form>
</body>
</html>
When i click on href link, in my case i am clicking on a image. The contol goes to javascript function (). But, the form isn't getting submitted. When i try to debug in chrome i see this error in console.
Uncaught TypeError: object is not a function index.jsp:12
checkUserInListAndSubmit index.jsp:12
(anonymous function)
The error is at line document.getElementById('userLoginForm').submit();
Kindly help me resolving this and submit the form.
Any reason u aren't using input type="submit"?
Anyways this is your answer
<form id="userLoginForm'" action="" method="post">
<img src="images/btn-signin.png" alt="Sign In" name="submit" width="60" height="20" border="0" align="right" onclick="document.getElementById('userLoginForm'').submit();">
</form>
Also
onclick="parentNode.submit();
should work
From your markup, remove/rename the attribute
name="submit"
That is,
<tr>
<td> </td>
<td width="103"><div align="left"><img src="images/btn-signin.png" alt="Sign In" width="60" name="some-other-name" height="20" border="0" align="right"></div></td>
</tr>
Check this answer for more information.
Cheers!
Try with this anchor tag,
<a href="javascript:{}" onclick="document.getElementById('userLoginForm').submit();">
Or if you want to do more as js function,
<a href="javascript:{}" onclick="checkUserInListAndSubmit();return false;">
Updated Answer
specify your anchor with id, e.g;
<a href="#" id="mylink">
write js function for anchor tag onclick listener
document.getElementById("mylink").onclick = function() {
//do other coding here
document.getElementById("userLoginForm").submit();
return false;
}

Categories