Database value not displayed in jsp & jstl file - javascript

I use MYSQL Workbench as the database,I have 3 columns uname,orderdet,ordercost under the orders table.I have to retrieve the values from the database to the jsp webpage for a single user.
details.jsp
<%# page import="javax.servlet.http.*,javax.servlet.*"%>
<%# page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%# taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%# taglib uri="http://java.sun.com/jsp/jstl/sql" prefix="sql" %>   
<!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=UTF-8">
<title>JSP Cart</title>
</head>
<body>
    <sql:setDataSource var="mydb" driver="com.mysql.jdbc.Driver" url="jdbc:mysql://localhost/form" user="root" password="sudhakar" />
    <sql:query dataSource="${mydb}" var="listUsers">select orderdet,ordercost from orders where uname =" <%=session.getAttribute("name") %>"</sql:query>
    <div align="center">
        <table border="1" cellpadding="5">
            <caption><h2>Cart Details</h2></caption>
            <tr>
                <th>order</th>
                <th>ordercost</th>
            </tr>
            <c:forEach var="user" items="${listUsers.rows}">
                <tr>
                    <td><c:out value="${user.orderdet}" /></td>
                    <td><c:out value="${user.ordercost}" /></td>
                </tr>
            </c:forEach>
        </table>
<button>Go back
</button>
    </div>
</body>
</html>

Related

capture image clicked in one page and display the same in another page HTML

Newbie to HTML...creating a custom furniture website with custom design tab which helps in designing your own furniture..now i wanted to capture the image clicked(out of many) by user in my main.html page and display the selected image in secondary.html page when the user navigates to second page to select the color for the sofa...Need help!
main.html
<div class="red">
<div class="blue">4 Seater <img src="images/4_Seater_Default.jpg" alt="4_Seater_Default.jpg" onclick="showImage('4_Seater_Default.jpg');" /></a></div>
<div class="blue">3 Seater<img src="images/3_Seater_Default.jpg" alt="3_Seater_Default.jpg" onclick="showImage('3_Seater_Default.jpg');" /></a></div>
<div class="blue">2 Seater<img src="images/2_Seater_Default.jpg" alt="2_Seater_Default.jpg" onclick="showImage('2_Seater_Default.jpg');" /></a></div>
<div class="blue">1 Seater<img src="images/1_Seater_Default.jpg" alt="1_Seater_Default.jpg" onclick="showImage('1_Seater_Default.jpg');" /></a></div>
Page 1:
<%# 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">
<title>Page 1</title>
<script type="text/javascript">
function filename(){
var fullPath = document.getElementById("image").src;
var filename = fullPath.replace(/^.*[\\\/]/, '');
var fileid = filename.split("\.")[0];;
window.location.href = "test2.jsp?imgid="+fileid;
}
</script>
</head>
<body>
<IMG id="image" SRC="images/1.png" width="100px" alt="Logo" onclick="filename();">
</body>
</html>
Page 2:
<%# 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">
<title>Page 2</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var imageId = location.search.split('imgid=')[1];
document.getElementById('image').src = "images/"+imageId+".png"; \\it will set the value of the img src to 1.png which is passed from the previous page
});
</script>
</head>
<body>
<IMG id="image" SRC="images/2.png" width="400px">
</body>
</html>
EDIT
In Page1 onclick event we are simply calling the filename() function. This function in turn is appending the imageId in the url of the second page. Now, when you land on the second page, the $(document).ready(function(){}) is taking the imageId from the url and setting the SRC of the <IMG> tag with the image 1.png.
Try below code:
function showImage(imagePath){
window.location.href= "www.yourdomain.com/yourDirectory/path/showImage?image_path="+imagePath;
}
and on the above url you can use this path to show image + any other content, whatever is required.

Can we use scriptlets inside Javascript?

Here is my Code:
<%#page contentType="text/html"%>
<%#page pageEncoding="UTF-8"%>
<%#page import="java.sql.*"%>
<!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=UTF-8">
<title>Example of Java Server Page with JDBC</title>
</head>
<script>
function myFunction() {
var x='<% request.getParameter("ServerName"); %>';
alert(x);
</script>
<body>
<form>
ServerName: <input type="text" name="ServerName" required> <br><br>
<input type="submit" id="btnSubmit" name="btnSubmit" />
</div>
</form>
</body>
</html>
Here in the above function onclick of a button i want to execute the scriptlets which is inside javascript?
you can also use this:
<%#page contentType="text/html"%>
<%#page pageEncoding="UTF-8"%>
<%#page import="java.sql.*"%>
<%
String ServerName = (String)request.getParameter("ServerName");
%>
<!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=UTF-8">
<title>Example of Java Server Page with JDBC</title>
</head>
<script>
function myFunction() {
var x='<%=ServerName%>';
alert(x);
</script>
<body>
ServerName: <input type="text" name="ServerName" required> <br><br>
<input type="submit" id="btnSubmit" name="btnSubmit" />
</div>
</form>
</body>
</html>
You can, but if you want the result to be passed to the JavaScript you have to output something.
var x='<%= request.getParameter("ServerName"); %>';
^ output!
… and unless you take measures to escape that data, you render yourself vulnerable to XSS attacks.
(And, obviously, this won't work until the form is actually submitted)

Hide or show an input when a checkbox is checked or unchecked in JSP file

Can anyone explain me why this piece of code does not work in Eclipse. I tried to compile the code on this site http://jsfiddle.net and it's working.
<%# 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">
<script type="text/javascript">
$(document).ready(function () {
var checkbox = $('#checker');
var dependent = $('#day_number');
if (checkbox.attr('checked') !== undefined){
dependent.show();
} else {
dependent.hide();
}
checkbox.change(function(e){
dependent.toggle();
});
});
</script>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
</head>
<body>
<input type="checkbox" id="checker"><br>
<input type="text" id="day_number">
</body>
</html>

jQuery dataTables and JSP

I try to add JQuery DataTable to my JSP page but nothing happens. I ckecked that all files: jquery.dataTables.js, jquery.dataTables.css, jquery.js is found.
Here's my JSP page:
<%# page contentType="text/html; charset=UTF-8" %>
<%# taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%# taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
<html>
<head>
<script type="text/javascript"
src="<c:url value="resources/jquery.js"/>"></script>
<link rel="stylesheet" type="text/css" href="<c:url value="resources/jquery.dataTables.css"/>" />
<script type="text/javascript"
src="<c:url value="resources/jquery.dataTables.js"/>"></script>
<script type="text/javascript">
$(function() {
$("#student").dataTable();
});
</script>
</head>
<body>
<table id="student">
<thead>
<tr><td>Students</td></tr>
</thead>
<tbody>
<c:forEach var="student" items="${students}" varStatus="loopCounter">
<tr>
<td>${loopCounter.count}</td>
<td>${student.studentFullName}</td>
<td>${student.studentBook}</td>
<td>${student.groupStudent.groupStudentNumber}</td>
<td>${student.studentEnter}</td>
<td>${student.studentOKR}</td>
</tr>
</c:forEach>
</tbody>
</table>
</body>

How to call JS function within .js file into .jsp file?

I am trying to call a javaScript function that's in .../js/index.js file to .../index.jsp file.
Any suggestion would be helpful.
Here is code within both file:
index.js
function testing() {
if ("c" + "a" + "t" === "cat") {
document.writeln("Same");
} else {
document.writeln("Not same");
};
};
index.jsp
<%# 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">
<title>Insert title here</title>
</head>
<body>
<script type="text/javascript" src="js/index.js">
<!-- I want to call testing(); function here -->
</script>
</body>
</html>
First reference the external index.js file and then call the function in an inline script element:
<%# 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">
<title>Insert title here</title>
</head>
<body>
<script type="text/javascript" src="js/index.js"></script>
<script type="text/javascript">
testing();
</script>
</body>
</html>
By the way you have an error in your test.js function. You shouldn't put a ; after if/else conditions, neither at the end of your function declaration. The correct syntax is:
function testing() {
if ("c" + "a" + "t" === "cat") {
document.writeln("Same");
} else {
document.writeln("Not same");
}
}
or:
var testing = function() {
if ("c" + "a" + "t" === "cat") {
document.writeln("Same");
} else {
document.writeln("Not same");
}
};
you can do like this
<%# 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">
<script type="text/javascript" src="js/index.js"></script>
<title>Insert title here</title>
</head>
<body>
<input type = "button" onclick = "javascript:testing()"/>
</body>
</html>
It is easiest

Categories