why the function is not being called?
Question
I am testing a thing based upon the URL . If the URL ends with logout.jsp then the logout message should get displayed and if URL ends with index.jsp the message should not get displayed . For doing this I used document.getElementById("id").hidden = value . But this doesn't work.Infact the function is not being called. I don't know what the problem is.
HTML snippet
<table id="LogoutMessage" onload="urlCheck()">
<tr>
<td>
<h2>You are successfully logged out !</h2>
</td>
</tr>
</table>
javascript function
<script type="text/javascript">
function urlCheck() {
alert("in the function urlCheck");
if(document.URL.endsWith() = "logout.jsp")
document.getElementById("LogoutMessage").hidden = false;
else if(document.URL.endsWith() = "index.jsp")
document.getElementById("LogoutMessage").hidden = true;
}
</script>
Whole page In JSP
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>PhotoArtWork</title>
<jsp:include page="reusable/stylesheets.html" />
<script type="text/javascript" src="js/modernizr-1.5.min.js"></script>
</head>
<body>
<jsp:include page="reusable/header.html" />
<!-- begin content --><div id="site_content">
<table id="LogoutMessage" onload="urlCheck()">
<tr>
<td>
<h2>You are successfully logged out !</h2>
</td>
</tr>
</table>
<ul class="slideshow">
<li class="show"><img width="950" height="450" src="images/home_1.jpg" alt=""You can put a caption for your image right here""></li>
<li><img width="950" height="450" src="images/home_2.jpg" alt=""You can put a description of the image here if you like, or anything else if you want.""></li>
<li><img width="950" height="450" src="images/home_3.jpg" alt=""You can put a description of the image here if you like, or anything else if you want.""></li>
</ul>
</div>
<!-- end content -->
<script type="text/javascript">
function urlCheck() {
alert("in the function urlCheck");
if(document.URL.endsWith() = "logout.jsp")
document.getElementById("LogoutMessage").hidden = false;
else if(document.URL.endsWith() = "index.jsp")
document.getElementById("LogoutMessage").hidden = true;
}
</script>
<jsp:include page="reusable/footer.html" />
</body>
</html>
What is the problem ?
4 answers
solution1
1 ACCPTED 2012-04-22 13:41:29
There is no .hidden attribute. It is part of the element's style and you would use visibility.
document.getElementById("LogoutMessage").style.visibility = "hidden"; // or "visible"
And if I had to guess, you want to use display and not hidden .
document.getElementById("LogoutMessage").style.display = "none"; // or "block"
solution2
1 2012-04-22 13:54:12
To have your code called, either do:
<body onload="urlCheck()">
or put the script at the very end of the body tag, with just the inner code of your function.
solution3
0 2012-04-22 13:58:40
Javascript doesn't have a native endsWith . So you have to create one first
String.prototype.endsWith = function(suffix) {
return this.indexOf(suffix, this.length - suffix.length) !== -1;
};
Also, there is no
. Please use style.hidden property
style.display instead
Thecorrect function urlCheck should be like this
function urlCheck() {
alert("in the function urlCheck");
if(document.URL.endsWith("logout.jsp"))
document.getElementById("LogoutMessage").style.display= 'block';
else if(document.URL.endsWith("index.jsp"))
document.getElementById("LogoutMessage").style.display= 'none';
}
Oh and as Mic says please call the function onload like this.
window.onload = function() { urlCheck(); }
solution4
0 2012-04-22 15:08:03
You can use jQuery. Include
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
and use
$('#LogoutMessage').hide();
for hiding the message and
$('#LogoutMessage').show();
for showing the message
To call your function
$(document).ready(function(){
urlCheck();
})
function urlCheck() {
var url = document.URL;
var urlArr = url.split('/')
if($.inArray('logout.jsp', urlArr))
{
$('#LogoutMessage').show();
}
if($.inArray('index.jsp', urlArr))
{
$('#LogoutMessage').hide();
}
}
Try the above .
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.