i have a xhtml page which has has login box .
onload of the page, a scripts is called which hides the box , and on pressing login link one more scripts displays box (login box is in div tags).
now the problem is when user enters the wrong login credentials i would display the error message but after displaying the box gets hidden.
how to show the box wen ter is error message?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:p="http://primefaces.org/ui">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Home</title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<link href="css/Corporate_style_2.css" rel="stylesheet" type="text/css" />
<link href="css/sliderStyle.css" rel="stylesheet" type="text/css" />
<link href="css/inettuts.css" rel="stylesheet" type="text/css" />
<link href="css/inettuts.js.css" rel="stylesheet" type="text/css" />
<script src="js/login/jquery.min.js" type="text/javascript"></script>
<!-- <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script> -->
<script language="javascript" type="text/javascript" src="js/slider/jquery.js"></script>
<script language="javascript" type="text/javascript" src="js/slider/jquery.easing.js"></script>
<script language="javascript" type="text/javascript" src="js/slider/script.js"></script>
<script type="text/javascript">
/*----Slider Script : Start----*/
* alert("hmmmm");
*/
$(document).ready( function(){
var buttons = { previous:$('#lofslidecontent45 .lof-previous') ,
next:$('#lofslidecontent45 .lof-next') };
$obj = $('#lofslidecontent45').lofJSidernews( { interval : 4000,
direction : 'opacity',
easing : 'easeOutBounce',
duration : 1200,
auto : true,
mainWidth:980,
buttons : buttons} );
});
/*----Slider Script : End----*/
</script>
<script type="text/javascript">
function xyz(){
alert("i dont kno y ");
$(document).ready(function() {
$("#signup").click(function() {
alert("inside signup");
resetFields();
var emptyfields = $("input[value=]");
if (emptyfields.size() > 0) {
emptyfields.each(function() {
$(this).stop()
.animate({ left: "-10px" }, 100).animate({ left: "10px" }, 100)
.animate({ left: "-10px" }, 100).animate({ left: "10px" }, 100)
.animate({ left: "0px" }, 100)
.addClass("Error");
printErrorMsg();
});
}
else
{
/*Navigate to Next page*/
window.location = "LoggedUser.html";
}
});
});
}
function resetFields() {
alert("inside reset fileds");
$("input[type=text], input[type=password]").removeClass("Error");
document.getElementById("ErrorMsgNone").style.display='block';
document.getElementById("ErrorMsg").style.display='none';
}
function printErrorMsg(){
alert("inside print error msg");
document.getElementById("signup").focus();
document.getElementById("ErrorMsg").style.display='block';
document.getElementById("ErrorMsgNone").style.display='none';
}
</script>
<script>
function Hidelogindiv(){
alert("hide");
document.getElementById("templatemo_sidebar").style.display='none';
}
function showlogindiv(){
alert("showing");
document.getElementById("templatemo_sidebar").style.display='inline';
document.getElementById("login").style.display='none';
}
</script>
</head>
<body onload="Hidelogindiv();xyz();">
<div id="templatemo_sidebar">
<div id="testimonial_newsletter">
<div id="testimonial">
<h2>Enter into CMS ?</h2>
<!-- <p><img class="open" src="css/images/open.png" alt="opening tag" />-->
<h:form>
<table width="100%">
<tr>
<h:outputLabel value="Username" for="name" />
<h:inputText id="name" value="#{loginBean.login}" required="true" requiredMessage="Please enter the username" />
<!-- <td class="first">User Name :</td>
<td class="first"><input type="text" id="name" name="name"></td> -->
</tr>
<tr>
<h:outputLabel value="Password" for="password" />
<h:inputSecret id="password" required="true" requiredMessage="Please enter the password"
value="#{loginBean.password}" />
<!-- <td class="first">Password :</td>
<td class="first"> <input type="password" name="passwd" /></td> -->
</tr>
<tr>
<td colspan="2">
<div id="ErrorMsg" style="display:none;" class="errorMsg">
<p>Please Enter Valid Inputs!</p>
</div>
</td>
</tr>
<tr>
<td>
<div id="ErrorMsgNone" style="display:block;" >
</div>
</td>
</tr>
<tr>
<td colspan="2">
<div id="signup" class="button" align="center" >
<!-- <a href="#">Login</a>
<input type="submit" value="Login" /> -->
<p:commandButton action="#{loginBean.login}" value="Login" />
</div>
</td>
</tr>
</table>
</h:form>
<br/>
<table>
<tr>
<td>
<form>
<div id="newUser" class="button2" align="left" >
<a href="#">Sign up</a>
<!-- <input type="submit" value="Sign up" /> -->
</div>
</form>
</td>
<td>
<form>
<div id="forgotPwd" class="button2" align="right" >
<a href="#">Lost Password</a>
<!-- <input type="submit" value="Lost Password" /> -->
</div>
</form>
</td>
</tr>
</table>
<!--<img class="close" src="css/images/close.png" alt="closing tag" /></p>
<cite class="float_r"><a href="#">Vestibulum</a></cite> -->
</div>
</body>
</html>
