I am new #jsp, and would like to call the logout function when the tab or the browser window is closed. i've made some research and found out that i need to use window.onbeforeunload. But the thing is , i don't know where to put it in my jsp page. Here is it's code:
<%# page language="java" contentType="text/html; charset=windows-1256"
pageEncoding="windows-1256"%>
<!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=windows-1256">
<%# taglib uri="http://java.sun.com/jstl/core_rt" prefix="c" %>
<%# taglib uri="http://java.sun.com/jstl/fmt_rt" prefix="fmt" %>
<%# taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%>
<%# taglib uri="http://java.sun.com/jstl/core-rt" prefix="c-rt" %>
<link rel="stylesheet" href="css/login.css">
<title>Insert title here</title>
<script type="text/javascript" language="javascript" runat="server">
var divSelected = null;
function switchURL()
{
var x = document.getElementById("femp").value;
<c:choose>
<c:when test="${puser.LOGIN==true}">
document.getElementById("temp").value = x;
// alert("${puser.LOGIN}");
</c:when>
<c:otherwise>
document.getElementById("temp").value = 0;
document.getElementById("femp").value = 0;
// alert("${puser.LOGIN}");
</c:otherwise>
</c:choose>
}
</script>
<script type="text/javascript" language="javascript" runat="server">
var divSelected = null;
function Logout()
{
document.getElementById("Form1").target ="";
document.getElementById("Form1").action = "/dcHR/login";
// window.location = "login";
}
</script>
</head>
<body>
<section class="container">
<div class="login">
<form id="Form1" action="http://localhost:80/reports/rwservlet" method="Post" target="_blank">
<input type="hidden" id="cmdkey" name="cmdkey" value="repserv">
<input type="hidden" id="temp" name="P_TO_EMP" value="0">
<input type="hidden" id="femp" name="P_FROM_EMP" value="${puser.USR_USER}" >
<input type="hidden" id="pcomp" name="P_COMP" value="${puser.USR_CP}">
<p> Years:<input type="text" name="P_YEAR"> </p>
<p> Month:<input type="text" name="P_PERIOD"> </p>
<input type="submit" value="Report" name="pbtn" onclick="switchURL()" />
<input type="submit" value="Logout" name="pbtn" onclick="Logout()"/>
</form>
</div>
</section>
</body>
</html>
can somebody help me plz.
Regards to all.
You have to add listener on window object as below
window.addEventListener("beforeunload", function(){
//Ajax call to invoke logout action
});
Put this code in your jsp page.
Related
I want to write a if condition on aspx page. Please help me putting the condition.
<head runat="server">
<% if()
{ %>
some html
<% } %>
</head>
<form id="form1" runat="server">
<div>
<input type="hidden" name="menuId" id="menuId" value="ADDNEWTEMPLATE" />
</div>
</form>
</body>
Under if the i need to check if the value of Menuid = "ADDNEWTEMPLATE" then some html statement has to written. Please let me know what should be the condition.
<head runat="server">
<script runat = "server">
string hiddenValue = document.getElementById('<%= menuId.ClientID %>';
</script>
<% if( hiddenValue == "ADDNEWTEMPLATE") { %>
<meta http-equiv="X-UA-Compatible" content="IE=9">
<% } else {%>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<% } %>
</head>
<form id="form1" runat="server">
<div>
<input type="hidden" name="menuId" id="menuId" value="ADDNEWTEMPLATE" />
</div>
</form>
I have a dynamic web project in eclipse. I have a JSP and a html file.
In my JSP file , I include a html file that has jquery snippet inside script tag.
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<script type="text/javascript">
$("#in_school").change(function() {
var in_school = $(this).val();
$(".in_school_input").hide("fast", function() {
$("#in_school_" + in_school).show("slow");
});
});
</script>
</head>
<body>
<form>
<div>
Are you in school? <select id="in_school">
<option selected="selected">Please choose</option>
<option value="yes">Yes</option>
<option value="no">No</option>
</select>
</div>
<div id="in_school_yes" class="in_school_input" style="display: none;">
What grade are you in? <input type="text" name="grade" />
</div>
<div id="in_school_no" class="in_school_input" style="display: none;">
What year did you graduate? <input type="text" name="graduation_year" />
</div>
<div>
<button type="submit">Submit</button>
</div>
</form>
</body>
</html>
My JSP page is :
<%# 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>Hello World - JSP tutorial</title>
</head>
<body>
<%#include file="htmldata.html" %>
</body>
</html>
When I run this program I only see the form but when I choose the dropdown, nothing happens . It does not prompts me the other questions based on dropdownvalue. Inshort I see that jquery part is never executed.
The expected output is Expected_Demo.
Can anyone tell me where am I going wrong ?
Thanks !
There is nothing wrong with your jsp code.
1- You are have not included jQuery script in html.
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
2- You have placed javascript before your html. Here is full code:
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
</head>
<body>
<form>
<div>
Are you in school? <select id="in_school">
<option selected="selected">Please choose</option>
<option value="yes">Yes</option>
<option value="no">No</option>
</select>
</div>
<div id="in_school_yes" class="in_school_input" style="display: none;">
What grade are you in? <input type="text" name="grade" />
</div>
<div id="in_school_no" class="in_school_input" style="display: none;">
What year did you graduate? <input type="text" name="graduation_year" />
</div>
<div>
<button type="submit">Submit</button>
</div>
</form>
<script type="text/javascript">
$("#in_school").change(function() {
var in_school = $(this).val();
$(".in_school_input").hide("fast", function() {
$("#in_school_" + in_school).show("slow");
});
});
</script>
</body>
</html>
Include jquery in your html before <script> that is using it:
Here's a link for cdn :
<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
You can chose to download it and include from your own application path
Also, you need to wait until your html loads:
<script type="text/javascript">
$(document).ready(function(){
$("#in_school").change(function() {
var in_school = $(this).val();
$(".in_school_input").hide("fast", function() {
$("#in_school_" + in_school).show("slow");
});
});
});
</script>
The targets attribute of my ajax generated form does not seem to be working. I can't seem to publish topics from this form either. I have the following page:
<!Doctype html, taglibs, etc here !-->
<html>
<head>
<s:head theme="css_xhtml" />
<sj:head jqueryui="true" />
<script type="text/javascript">
$.subscribe('testtopic', function(event, data) {
alert('testtopic Published!');
});
</script>
<title>Exam CRUD</title>
</head>
<s:url namespace="/exam" action="ReadAll" var="readExamsTag" />
<body>
<s:include value="/WEB-INF/content/navigation.jsp" />
<h2>Exam CRUD</h2>
<sj:div id="formcontainer"></sj:div>
<sj:div id="tablecontainer" loadingText="Loading.."
reloadTopics="reloadTable" href="%{readExamsTag}">
</sj:div>
</body>
</html>
ReadAll loads the following jsp into the "tablecontainer" div:
<s:url namespace="/exam" action="CreateForm" var="createFormTag" />
<p>
Listed below are the exams currently available to students.
<sj:a href="%{createFormTag}" targets="formcontainer">Add an exam</sj:a>
<!The above anchor works perfectly fine. It loads the form into the div as expeceted>
</p>
<table>
<! Table contents over here >
</table>
The form being loaded into "formcontainer" onclick by %{createFormTag}:
<sj:head />
<s:form theme="css_xhtml" namespace="/exam" action="Create">
<!Form fields>
<input type="button" value="Cancel" onclick="$('#formcontainer').empty();">
<sj:submit targets="formcontainer" onCompleteTopics="reloadTable" value="Add" />
</s:form>
<sj:a href="#" onClickTopics="testtopic">Test</sj:a>
The problems im facing come from the above form. The targets attribute does not work, on submitting this form it loads the result into a new page. I also wanted to test if topics can be published so i added the anchor at the end of the form. Clicking this anchor when the form loads into the page does nothing. The "Cancel" button seems to be working fine, and so does the initial anchor that loads this form, so why isn't the form?
EDIT: Fixed it..
I'm not sure why this is so, must have something to do with the css_xhtml template. I fixed the targets attribute by adding an id attribute to my form.
As for fixing the publishing, I added an id attribute to the datepicker fields in my form and everything works perfect now. Weird..
Final code:
crud.jsp:
<!DOCTYPE html>
<%# taglib prefix="s" uri="/struts-tags"%>
<%# taglib prefix="sj" uri="/struts-jquery-tags"%>
<%# page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<html>
<head>
<s:head theme="css_xhtml" />
<sj:head jqueryui="true"/>
<title>Exam CRUD</title>
</head>
<s:url namespace="/exam" action="ReadAll" var="readExamsTag" />
<body>
<s:include value="/WEB-INF/content/navigation.jsp" />
<h2>Exam CRUD</h2>
<sj:div id="formcontainer"></sj:div>
<sj:div id="tablecontainer" loadingText="Loading.."
reloadTopics="reloadTable" href="%{readExamsTag}">
</sj:div>
</body>
</html>
add.jsp:
<%# page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<%# taglib prefix="s" uri="/struts-tags"%>
<%# taglib prefix="sj" uri="/struts-jquery-tags"%>
<s:form id="addform" theme="css_xhtml" namespace="/exam" action="Create">
<s:textfield name="exam.name" label="Name" required="true" />
<s:textfield name="exam.author" label="Author" />
<s:textfield name="exam.minutesAllotted" label="Time limit"
required="true" />
<sj:datepicker id="startingDate" name="exam.startingDate"
label="Start date" timepicker="true" readonly="true"
displayFormat="dd/mm/yy" changeMonth="true" changeYear="true"
minDate="-0d" maxDate="+2y" />
<sj:datepicker id="endingDate" name="exam.endingDate" label="End date"
timepicker="true" displayFormat="dd/mm/yy" changeMonth="true"
changeYear="true" readonly="true" minDate="-0d" maxDate="+2y" />
<input type="button" value="Cancel"
onclick="$('#formcontainer').empty();">
<sj:submit targets="formcontainer" value="Add" />
</s:form>
I didnt need to change anything in the second jsp.
Include < sj:head /> only once. – Aleksandr M
Trying to select any of the radio button which makes appear the textbox but pratically it's not working :( .So here is html in the jsp page.
<%# 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>
<style type="text/css">
input[type=text]{
display : none
}
</style>
<script type="text/javascript" language="text/html" src="../jscript/jquery-1.7.2.js"></script>
<script type="text/javascript" language="javascript" src="../jscript/jquery-1.4.2.min.js"></script>
<script type="text/javascript"> // I 'm using your 1st jquery whose usage is void of css
$('input[type=radio]').change(function() {
$('input[type=text]').css('display','none');
$(this).closest('tr').find('input[type=text]').css('display','block');
});
</script>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Test </title>
</head>
<body>
<form action="">
<div align="left" style="color:#2D7EE7">
<table>
<tr>
<td>
<input type="radio" name="radio" value="college"></td>
<td>College </td>
<td><input type="text" name="clg"></td></tr>
<tr>
<td><input type="radio" name="radio" value="school"></td>
<td> School </td>
<td><input type="text" name="schl"></td>
</tr>
</table>
</div>
</form>
</body>
</html>
And here is the piece of code of jquery:
<script type="text/javascript">
$('input[type=radio]').change(function() {
$('input[type=text]').hide();
$(this).parent().next().show();
});
</script>
and css :
<style type="text/css">
input[type=text]{
display : none
}
</style>
But still this is not working :( :(,so any guess where I'm going wrong.Feel free to comment.
Change a bit into:
$('input[type=radio]').change(function() {
$('input[type=text]').hide();
$(this).closest('tr').find('input[type=text]').show();
});
OR
$(document).ready(function(){
$('input[type=radio]').change(function() {
$('input[type=text]').css('display','none');
$(this).closest('tr').find('input[type=text]').css('display','block');
});
});
First try to include just one JQuery script into the page (remove jquery-1.4.2.min.js)
$(':radio') is equivalent to $('[type=radio]')
$(document).ready(function(){
$(':radio').change(function() {
// Hide all input:text in the table
$('input:text', $(this).closest("table")).hide();
$(this).parent().nextAll().find('input:text').show();
});
});
when i click on the submit button nothing happens , am not sure what is the problem.
this program just adds 2 numbers and the output should be an alerts message.
please help
<%#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">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>GlassFish JSP Page</title>
</head>
<body>
<%
int a = 6, b = 8, c;
c=a+b;
%>
<p>
Value 1 =
<%=a%></p>
<p>
Value 2 =
<%=b%></p>
<p>
Enter the value :<br /> <input type="text" id="c" /></br>
<input type="submit" value="Submit"
onclick="validate();" />
</p>
<script type="text/javascript">
function validate() {
var a = <%=a%>;
var b = <%=b%>;
var c = <%=c%>;
if (c!= parseInt(document.getElementById("c").value, 10))
alert("The values you entered is incorrect.");
} else {
alert("Correct!");
}
}
</script>
</body>
</html>
You are missing the opening bracket on the if statement
if (c!= parseInt(document.getElementById("c").value, 10))
should be
if (c!= parseInt(document.getElementById("c").value, 10)){