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/
Related
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
});
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
I am trying to implement a grid having tree structure and pagination functionality .Here is my code which i implemented.
<%# 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>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<meta charset="utf-8">
<title>Example of Employee Table with twitter bootstrap</title>
<meta name="description" content="Creating a Employee table with Twitter Bootstrap. Learn with example of a Employee Table with Twitter Bootstrap.">
<link href="content/css/bootstrap.css" rel="stylesheet">
<link href="content/css/bootstrap.min.css" rel="stylesheet">
<link href="content/css/bootstrap-theme.css" rel="stylesheet">
<link href="content/css/bootstrap-theme.min.css" rel="stylesheet">
<link href="content/css/bootstrap-theme.css.map" rel="stylesheet">
<link href="content/css/bootstrap.css.map" rel="stylesheet">
<link rel="stylesheet" href="content/css/jquery.treegrid.css">
<link rel="stylesheet" href="http://cdn.datatables.net/1.10.2/css/jquery.dataTables.min.css"> </style>
<title>Insert title here</title>
</head>
<body style="margin:20px auto">
<div class="container">
<table id="myTable" class="table tree-2 table-bordered table-striped table-condensed">
<tr class="treegrid-1">
<td>Laxmi</td><td>Additional info</td>
</tr>
<tr class="treegrid-2 treegrid-parent-1">
<td>Node 1-1</td><td>Additional info</td>
</tr>
<tr class="treegrid-3 treegrid-parent-1">
<td>Node 1-2</td><td>Additional info</td>
</tr>
<tr class="treegrid-4 treegrid-parent-3">
<td>Node 1-2-1</td><td>Additional info</td>
</tr>
<tr class="treegrid-5">
<td>ashish</td><td>Additional info</td>
</tr>
<tr class="treegrid-6 treegrid-parent-5">
<td>Node 2-1</td><td>Additional info</td>
</tr>
<tr class="treegrid-7 treegrid-parent-5">
<td>Node 2-2</td><td>Additional info</td>
</tr>
<tr class="treegrid-8 treegrid-parent-7">
<td>Node 2-2-1</td><td>Additional info</td>
</tr>
</table>
</div>
</body>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="content/js/bootstrap.js"></script>
<script type="text/javascript" src="http://cdn.datatables.net/1.10.2/js/jquery.dataTables.min.js"></script>
<script>
$(document).ready(function(){
$('#myTable').dataTable();
});
</script>
<script type="text/javascript" src="content/js/jquery.treegrid.js"></script>
<script type="text/javascript" src="content/js/jquery.treegrid.bootstrap3.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('.tree').treegrid();
$('.tree-2').treegrid({
expanderCollapsedClass: 'glyphicon glyphicon-chevron-right ',
expanderExpandedClass: 'glyphicon glyphicon-chevron-down '
});
});
</script>
but it is not working the scripts written in last one for tree and other for datatable are coinciding .here is the link from where i have written code for pagination and searching.i want to integrate both pagination and tree grid .Can somebody please clarify me that when two scripts overlap and why it happens.Link for grid of pagination and searching.
http://www.codeproject.com/Tips/823490/Bootstrap-Table-With-Sorting-Searching-and-Paging
Link for tree grid.
http://maxazan.github.io/jquery-treegrid/
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.
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;
}