I am struggeling with a problem. My jsfiddle output is as I want it:
jsfiddle Output
However, my page looks differently, especially the Product styles:
<!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.prime.com.tr/ui">
<h:head>
<title>Title</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="" />
<meta name="author" content="" />
<!-- Le styles -->
<link href="http://fuelcdn.com/fuelux-imh/2.2/css/fuelux.css"
rel="stylesheet" />
<link
href="http://fuelcdn.com/fuelux-imh/2.2/css/fuelux-responsive.css"
rel="stylesheet" />
<link href="css/bootstrap.css" rel="stylesheet" type="text/css" />
<link href="css/bootstrap-responsive.css" rel="stylesheet"
type="text/css" />
<style type="text/css">
body {
padding-bottom: 200px;
}
.pillbox {
border: 1px solid #bbb;
margin-bottom: 10px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
width: 251px;
}
.container>div,.container>table {
margin: 20px;
}
.tree {
width: 430px;
height: 350px;
}
.static-loader {
margin-left: 30px;
}
.step-content {
border: 1px solid #D4D4D4;
border-top: 0;
border-radius: 0 0 4px 4px;
padding: 10px;
margin-bottom: 10px;
}
</style>
<!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!-- Le fav and touch icons
<link rel="shortcut icon" href="../assets/ico/favicon.ico">
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="../assets/ico/apple-touch-icon-114-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="../assets/ico/apple-touch-icon-72-precomposed.png">
<link rel="apple-touch-icon-precomposed" href="../assets/ico/apple-touch-icon-57-precomposed.png">
-->
<h:outputScript name="js/require.js" />
<script>
//<![CDATA[
requirejs.config({
paths: {
'jquery': 'js/jquery',
'underscore': 'http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.3.3/underscore-min',
'bootstrap': 'js/bootstrap/js',
'fuelux': 'src'
}
});
require(['jquery', 'sample/data', 'sample/datasource', 'sample/datasourceTree', 'fuelux/all'], function ($, sampleData, StaticDataSource, DataSourceTree) {
// WIZARD
$('#MyWizard').on('change', function(e, data) {
console.log('change');
if(data.step===3 && data.direction==='next') {
// return e.preventDefault();
}
});
$('#MyWizard').on('changed', function(e, data) {
console.log('changed');
});
$('#MyWizard').on('finished', function(e, data) {
console.log('finished');
});
$('#btnWizardPrev').on('click', function() {
$('#MyWizard').wizard('previous');
});
$('#btnWizardNext').on('click', function() {
$('#MyWizard').wizard('next','foo');
});
$('#btnWizardStep').on('click', function() {
var item = $('#MyWizard').wizard('selectedItem');
console.log(item.step);
});
$('#MyWizard').on('stepclick', function(e, data) {
console.log('step' + data.step + ' clicked');
if(data.step===1) {
// return e.preventDefault();
}
});
});
//]]>
</script>
</h:head>
<h:body>
<!-- Content Area -->
<div class="well" style="margin-top: 50px;">
<div class="fuelux">
<div class="container">
<!-- WIZARD -->
<div>
<div id="MyWizard" class="wizard">
<ul class="steps">
<li data-target="#step1" class="active"><span
class="badge badge-info">1</span><span class="chevron"></span></li>
<li data-target="#step2"><span class="badge">2</span>Step 2<span
class="chevron"></span></li>
<li data-target="#step3"><span class="badge">3</span>Step 3<span
class="chevron"></span></li>
<li data-target="#step4"><span class="badge">4</span>Step 4<span
class="chevron"></span></li>
<li data-target="#step5"><span class="badge">5</span>Step 5<span
class="chevron"></span></li>
<li data-target="#step5"><span class="badge">5</span>Step 5<span
class="chevron"></span></li>
<li data-target="#step5"><span class="badge">5</span>Step 5<span
class="chevron"></span></li>
</ul>
<div class="actions">
<button class="btn btn-mini btn-prev">
<i class="icon-arrow-left"></i>Prev
</button>
<button class="btn btn-mini btn-next" data-last="Finish">
Next<i class="icon-arrow-right"></i>
</button>
</div>
</div>
<div class="step-content">
<div class="step-pane active" id="step1">
<legend>
<h3>Product</h3>
</legend>
<!-- Product Name-->
<div class="control-group">
<label class="control-label">Product Name</label>
<div class="controls">
<h:inputText name="Product Name" class="input-xlarge"
type="text" />
</div>
</div>
<!-- Categorie-->
<div class="control-group">
<label class="control-label">Categorie</label>
<div class="controls">
<h:inputText name="Product Name" class="input-xlarge"
placeholder="Insert Categorie" type="text" />
</div>
</div>
<!-- Textarea -->
<div class="control-group">
<label class="control-label">Description</label>
<div class="controls">
<div class="textarea">
<textarea rows="3"></textarea>
</div>
</div>
</div>
</div>
<div class="step-pane" id="step2">This is step 2</div>
<div class="step-pane" id="step3">This is step 3</div>
<div class="step-pane" id="step4">This is step 4</div>
<div class="step-pane" id="step5">This is step 5</div>
</div>
<!-- <h:button type="button" class="btn btn-mini" id="btnWizardPrev"
value="prev" />
<h:button type="button" class="btn btn-mini" id="btnWizardNext"
value="next" />
<h:button type="button" class="btn btn-mini" id="btnWizardStep"
value="current step" /> -->
</div>
</div>
</div>
</div>
<!-- Le javascript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<h:outputScript name="js/jquery-1.7.2.min.js" />
<h:outputScript name="js/bootstrap.min.js" />
<h:outputScript name="js/jquery.dataTables.min.js" />
<h:outputScript name="js/bootstrap.js" />
<script
src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"
type="text/javascript"></script>
<script src="http://fuelcdn.com/fuelux-imh/2.2/loader.min.js"
type="text/javascript"></script>
</h:body>
</html>
and it looks like that:
Therefore, there is no real bootstrap style in the product area. How would you fix that?
I really appreciate your answer!!!
UPDATE
I guess its because I use primefaces and jsf. However, at the moment I cannot locate the real problem...
It could be the oprder in which you are calling your style sheets. Values are getting superseded. Make this style sheet the last one you add
<link href="css/bootstrap.css" rel="stylesheet" type="text/css" />
It works for me!
You have to download bootstrap folder and place js folder in %projectRoot% and the same for css and img folders.
after you have to delete h:outputScript name="js/jquery-1.7.2.min.js" and h:outputScript name="js/jquery.dataTables.min.js" .
Related
I'm trying to desingn login page by angular in my java Spring Boot Aplication. My problem is when I try login to panel page,username and password is ok and send to application by api controller and set user token correctly,but token don't set by cookeis in page, therefor panel page don't open and i have this error in inspect console :
my login page:
<!DOCTYPE html>
<html lang="en-US">
<head>
<title>Online Shop App | login</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
<script src="libs/angular.min.js"></script>
<script src="libs/jquery.min.js"></script>
<script src="libs/angular-cookies.js"></script>
<script src="scripts/app.js"></script>
<script src="scripts/controllers/loginController.js"></script>
<script src="scripts/services/ApiHandler.js"></script>
<link href="libs/bootstrap-5.1.3-dist/css/bootstrap.min.css" rel="stylesheet">
<script src="libs/bootstrap-5.1.3-dist/js/bootstrap.min.js"></script>
<link href="styles/login.css" rel="stylesheet">
</head>
<body ng-app="onlineShopApp">
<div class="container-fluid" ng-controller="loginCtrl">
<div class="row">
<div class="col-3"></div>
<div class="col login-box-holder">
<form>
<h3>Login To Panel</h3>
<div class="form-group">
<label for="username" class="form-label">Username</label>
<input type="text" class="form-control" id="username" ng-model="user.userName">
</div>
<div class="form-group">
<label for="password" class="form-label">Password</label>
<input type="password" class="form-control" id="password" autocomplete="false"
ng-model="user.password">
<div id="emailHelp" class="form-text">Do not share your username and password</div>
</div>
<button type="submit" class="btn btn-primary" ng-click="doLogin()">Login</button>
</form>
</div>
<div class="col-3"></div>
</div>
</div>
</body>
</html>
my login controller:
app.controller("loginCtrl", function ($scope, apiHandler, $cookies) {
$scope.user = {};
$scope.doLogin = () => {
apiHandler.callPost(
'user/login',
$scope.user,
(response) => {
var token=response.datalist[0].token;
$cookies.put("userToken",token);
if(token==null || token=="")
{
alert("invalid token");
return;
}
$cookies.put("uerToken",token);
alert("token is:");
location.href="/panel";
}, (error) => {
});
}
});
my panel page:
<!DOCTYPE html>
<html lang="en-US">
<head>
<title>Online Shop App | panel</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
<script src="libs/angular.min.js"></script>
<script src="libs/jquery.min.js"></script>
<script src="libs/angular-cookies.js"></script>
<script src="scripts/app.js"></script>
<script src="scripts/controllers/panelController.js"></script>
<script src="scripts/services/ApiHandler.js"></script>
<link href="libs/bootstrap-5.1.3-dist/css/bootstrap.min.css" rel="stylesheet">
<script src="libs/bootstrap-5.1.3-dist/js/bootstrap.min.js"></script>
</head>
<body ng-app="onlineShopApp">
<div class="container-fluid" ng-controller="panelCtrl">
<div class="row">
<h3>Panel</h3>
</div>
</div>
</body>
</html>
my panel controller:
app.controller("panelCtrl", function ($scope, apiHandler, $cookies) {
$scope.checkAccess = () => {
var token=$cookies.get("userToken");
if(token==undefined || token==null || token==""){
location.href="/login";
}
}
$scope.checkAccess();
});
i type wrong dataList in loginController file: (i change response.datalist[0] to=> response.dataList[0] )
I have developed a web app, connected to an Arduino UNO sensor and relay switch.
On the webpage, when I touch a button, a relay switch turns on/off.
My plan was to convert this web app into smartphone app, using phonegap.
I searched on google and found out that
I need to seperate the 'java' resource from my jsp file, as the phonegap only perceive html, css, javascript.
Then, How can I separate these elements out of my coding? Just like the following:
<!-- Main page that shows a simple on/off control and
DHT11 sensor value -->
<%# page language="java" contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%>
<%# page import="com.Test.domain.Relay" %>
<%
Relay relay = new Relay();
pageContext.setAttribute("relay", relay);
%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Fan Control</title>
<link href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" rel="stylesheet" type="text/css"/>
<script src="http://code.jquery.com/jquery-1.6.4.min.js" type="text/javascript"></script>
<script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js" type="text/javascript"></script>
<style>
#footer{
height: 86px;
text-indent: -9999px;
background-image: url(Logo.png);
background-repeat: no-repeat;
background-size: 100% 100%;
margin: 0 0 0 0;
position: absolute;
bottom: 0;
}
#header{
height: 86px;
text-indent: -9999px;
background-image: url(headerImage.png);
background-repeat: no-repeat;
background-size: 100% 100%;
margin: 0 0 0 0;
}
#FanOn:onClick{
background: green;
}
</style>
<script>
$(document).ready(function(){
var timer = setInterval(function(){
$.get("http://192.168.0.54", function(data){
$("#temperatureValue").val(data);
});
$("#form1").attr("action","Processing.jsp");
$("#form1").submit();
}, 1000);
$("#FanOn").click(function(){
$("#fanState").val("1");
$("#form1").attr("action","Processing.jsp");
$("#form1").submit();
});
$("#FanOff").click(function(){
$("#fanState").val("0");
$("#form1").attr("action","Processing.jsp");
$("#form1").submit();
});
$("#LampOn").click(function(){
$("#lampState").val("1");
$("#form1").attr("action","Processing.jsp");
$("#form1").submit();
});
$("#LampOff").click(function(){
$("#lampState").val("0");
$("#form1").attr("action","Processing.jsp");
$("#form1").submit();
});
$("#footer").click(function(){
window.location.replace("http://www.samwooinc.net");
});
});
</script>
</head>
<body>
<div data-role="page" id="page">
<div data-role="header" id="header">
<h1>FAN Control Example</h1>
</div>
<div data-role="content">
<form method="GET" id="form1" action="" target="haha">
<div class="ui-field-contain">
<label for="temperatureValue">Current Temperature</label>
<input type="text" id="temperatureValue" name="temperatureValue" value="0" data-inline="true">
</div>
<label for="FanSwitch">FAN Control</label>
<div data-role="navbar" id="FanSwitch">
<ul>
<li>FanOn</li>
<li>FanOff</li>
</ul>
</div>
<label for="LampSwitch">LAMP Control</label>
<div data-role="navbar" id="LampSwitch">
<ul>
<li>LampOn</li>
<li>LampOff</li>
</ul>
</div>
<input type="hidden" id="fanState" name="fanState" value="998">
<input type="hidden" id="lampState" name="lampState" value="234">
</form>
</div>
<div data-role="footer" id="footer">
<h2>footer</h2>
</div>
</div>
<iframe name="haha">
</iframe>
</body>
</html>
So, for example, How can I separate the coding like this, out of the jsp file?:
<%# page import="com.Test.domain.Relay" %>
<%
Relay relay = new Relay();
pageContext.setAttribute("relay", relay);
%>
I have a jsp page which takes user name and password and then it redirect to a servlet. Below is jsp code,
<%# 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>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<title>DeliverMe</title>
<!-- Bootstrap Core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- Custom CSS -->
<link href="css/sb-admin.css" rel="stylesheet">
<!-- Custom Fonts -->
<link href="font-awesome-4.1.0/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
<!-- jQuery Version 1.11.0 -->
<script src="js/jquery-1.11.0.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#btn-login').click(function() {
var userName = $('#userName').val();
var password = $('#password').val();
var datastr='userName='+userName+'&password='+ password;
$.ajax({
url : 'LoginCheck',
data :datastr,
success : function(responseText) {
$('#ajaxGetUserServletResponse').text(responseText);
},
error:function(url){
window.location = url;
}
});
});
});
</script>
</head>
</head>
<body>
<div class="container">
<span style="color: #000099"><center><h2>DeliverMe Admin Panel</h2></center></span>
<div id="loginbox" style="margin-top:50px;" class="mainbox col-md-6 col-md-offset-3 col-sm-8 col-sm-offset-2">
<div class="panel panel-info" >
<div class="panel-heading">
<div class="panel-title">Sign In</div>
</div>
<div style="padding-top:30px" class="panel-body" >
<div style="display:none" id="login-alert" class="alert alert-danger col-sm-12"></div>
<form id="loginform" class="form-horizontal" role="form">
<div style="margin-bottom: 25px" class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
<input id="userName" type="text" class="form-control" placeholder="username or email">
</div>
<div style="margin-bottom: 25px" class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-lock"></i></span>
<input id="password" type="password" class="form-control" name="password" placeholder="password">
</div>
<div style="margin-top:10px" class="form-group">
<!-- Button -->
<div class="col-sm- 12 controls">
<a id="btn-login" class="btn btn-success">Login</a>
</div>
</div>
<span id="ajaxGetUserServletResponse" style="color: red;"></span>
</form>
</div>
</div>
</div>
</div>
</body>
</html>
Then my servlet checks user name and password and if it is wrong then it gives error text but if it is true then it should be redirect to success page. But it doesn't effect. Below is servlet code,
if(db.loginCheck(userName, password))
{
request.getRequestDispatcher("/main.jsp").forward(request, response);
}else
{
String greetings = "Invalid Username/Password";
response.setContentType("text/plain");
response.getWriter().write(greetings);
}
I got solution. I have changed response of my servlet like this,
if(db.loginCheck(userName, password))
{
response.getWriter().write("1");
}else
{
greetings = "Invalid Username/Password";
response.setContentType("text/plain");
response.getWriter().write(greetings);
}
and on my jsp page i have put this,
<script type="text/javascript">
$(document).ready(function() {
$('#btn-login').click(function() {
var userName = $('#userName').val();
var password = $('#password').val();
var datastr='userName='+userName+'&password='+ password;
$.ajax({
url : 'LoginCheck',
data :datastr,
success : function(responseText) {
if(responseText == "1"){
window.location.assign("/main.jsp");
}else{
$('#ajaxGetUserServletResponse').text(responseText);
}
},
});
});
});
</script>
Try this:
Servlet
if(db.loginCheck(userName, password))
{
String greetings = "Success";
response.setContentType("text/plain");
response.getWriter().write(greetings);
}
else
{
String greetings = "Invalid Username/Password";
response.setContentType("text/plain");
response.getWriter().write(greetings);
}
Jquery:
$.ajax({
url : 'LoginCheck',
data :datastr,
success : function(responseText) {
if(responseText == "Success"){
windows.location.href='/main.jsp';
}else{
windows.location.href='/error.jsp';
});
I have working controller and jsp with form which submits all elements of some list back to controller.
I would like to submit only selected items of jQuery-ui selectable to spring controller.
My .jsp looks like this:
<html>
<head>
...
<!-- jQuery rference -->
<script src="<c:url value="/resources/jquery-2.1.1.js" />"></script>
<!-- jQuery-ui reference -->
<script src="<c:url value="/resources/jquery-ui-1.11.2.custom/jquery-ui.js" />"></script>
<script>
$(function() {$("#selectable").selectable();});
</script>
</head>
<body>
...
<!-- context path -->
<c:set var="contextPath" value="${pageContext.request.contextPath}" />
<form:from action="${contextPath}/user/categories/delete" method="POST" modelAttribute="categoryList">
<input type="submit" value="Delete Selected" />
<ol id="selectable">
<c:forEach items="${categoryList.catList}" var="category" varStatus="status">
<li class="ui-widget-content" value="${category}">${category.name}</li>
<input type="hidden" name="catList[${status.index}].id" value="${category.id}" />
<input type="hidden" name="catList[${status.index}].name" value="${category.name}" />
</c:forEach>
</ol>
</form:form>
</body>
</html>
And here is controller:
#Controller
public class CategoriesController {
#Autowired
private CategoryDetailService categoryDetailService;
#RequestMapping("user/categories/delete")
public String deleteCategory(#ModelAttribute("categoryList") CategoryList categoryList) {
//do something
return "redirect:/user/categories";
}
Is there a way to submit only selected items back to controller?
After reading a lot about jQuery and JSTL best thing I came up with is adding jQuery function which clears unselected dom elements. I have used empty function, but .remove() also does the trick.
$(function() {
$("#categorySubmit").button().click(function(event) {
$(function() {
$("#selectable li:not(.ui-selected)", this).each(function() {
$(this).empty();
});
});
});
});
where "#categorySubmit" is id given to submit button with name "Delete category"
You have to be careful tough, because only elements with index greater than last selected element are removed, elements with lower index which are not selected have property values set to null (or 0), for both .empty() and .remove().
Add a hidden variable in Ui and append selected values to that hidden variable and in your controller read the value of hidden variable after submit.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Selectable - Default functionality</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
<style>
#feedback { font-size: 1.4em; }
#selectable .ui-selecting { background: #FECA40; }
#selectable .ui-selected { background: #F39814; color: white; }
#selectable { list-style-type: none; margin: 0; padding: 0; width: 60%; }
#selectable li { margin: 3px; padding: 0.4em; font-size: 1.4em; height: 18px; }
</style>
<script>
$(function() {
$( "#selectable" ).selectable({
selected: function() {
$( ".ui-selected", this ).each(function() {
var hdnValue = $('#hdnFieldName').val();
var selectedValue=$(this).text() ;
if(hdnValue!='') {
$('#hdnFieldName').val(hdnValue +','+selectedValue);
}
alert(hdnValue);
});
}
});
});
</script>
</head>
<body>
<form action="${contextPath}/user/categories/delete" method="POST" >
<input type="submit" value="Delete Selected" />
<ol id="selectable">
<li class="ui-widget-content">Item 1</li>
<li class="ui-widget-content">Item 2</li>
<li class="ui-widget-content">Item 3</li>
<li class="ui-widget-content">Item 4</li>
<li class="ui-widget-content">Item 5</li>
<li class="ui-widget-content">Item 6</li>
<li class="ui-widget-content">Item 7</li>
</ol>
<input type="hidden" id="hdnFieldName"/>
</form>
</body>
</html>
I started learning javascript and i have a question with a webpage that i created. The webpage is a login page that shows some tableau reports when logged in. I need to create a remember me checkbox just like any other website like gmail or salesforce. I have copy pasted the codes below.
<%#page contentType="text/html" pageEncoding="UTF-8"%>
<%
ServletContext context = getServletContext();
String app = context.getInitParameter("appName");
String errorMessage = "";
if ( session.getAttribute("error-message")!=null){
errorMessage = (String) session.getAttribute("error-message");
}
%>
<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title><%=app%> - Please login</title>
<link href="styles/bootstrap-theme.min.css" rel="stylesheet">
<link href="styles/bootstrap.min.css" rel="stylesheet">
<link href="styles/sidebars.css" rel="stylesheet">
<link rel="shortcut icon" href="img/favicon.ico">
<style type='text/css' media='screen'>
body {
font-family: Tahoma;
font-size: 12px !important;
padding-top: 40px;
padding-bottom: 40px;
background-color: #fff;
}
.form-signin .form-signin-heading,
.form-signin .checkbox {
margin-bottom: 10px;
}
.navbar{
border-color: #ccc;
}
.alert-warning{
margin-top: 15px;
}
.validation-summary-errors{
font-family: Tahoma !important;
font-size: 12px !important;
color: #b94a48;
margin-top: 35px;
margin-bottom: -15px;
}
.col-md-8{
padding-left: 5px;
}
/* .navbar-inverse{
border-color: #ccc;
background: #ddf0f8; Old browsers
background: -moz-linear-gradient(top, #ddf0f8 0%, #ffffff 63%); FF3.6+
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ddf0f8), color-stop(63%,#ffffff)); Chrome,Safari4+
background: -webkit-linear-gradient(top, #ddf0f8 0%,#ffffff 63%); Chrome10+,Safari5.1+
background: -o-linear-gradient(top, #ddf0f8 0%,#ffffff 63%); Opera 11.10+
background: -ms-linear-gradient(top, #ddf0f8 0%,#ffffff 63%); IE10+
background: linear-gradient(to bottom, #ddf0f8 0%,#ffffff 63%); W3C
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ddf0f8', endColorstr='#ffffff',GradientType=0 ); IE6-9
}*/
</style>
</head>
<body>
<div class="navbar navbar-fixed-top" role="navigation">
<div class="navbar-header">
<img class="logo" src="img/Nexius_logo.png"/>
</div>
</div>
<div class='inner col-md-8'>
<%=errorMessage%>
<form action='LoginServlet' method='POST' id='loginForm' class='form-horizontal' role='form' autocomplete='off'>
<h4 class="form-signin-heading"> </h4>
<div class="form-group">
<label for='username' class='col-md-2 control-label'>User name</label>
<div class="col-md-4">
<input type='text' class="form-control" name='user' id='username' />
</div>
</div>
<div class="form-group">
<label for='password' class='col-md-2 control-label'>Password</label>
<div class="col-md-4">
<input type='password' class="form-control" name='pwd' id='password' />
</div>
</div>
<div class="form-group">
<div class="col-md-offset-2 col-md-10">
<button class="btn btn-default" type="submit">Login</button>
</div>
</div>
<div class="form-group">
<div class="col-md-offset-2 col-md-10"><div style="position: absolute; top: -45px; left: 100px; width: 240px;">
<input onClick="checkCookie()" type="checkbox" value="Remember me">Remember username<br>
</div>
</div>
</form>
</div>
<script type='text/javascript'>
function setCookie(cname,cvalue,exdays)
{
var d = new Date();
d.setTime(d.getTime()+(exdays*24*60*60*1000));
var expires = "expires="+d.toGMTString();
document.cookie = cname+"="+cvalue+"; "+expires;
}
function getCookie(cname)
{
var name = cname + "=";
var ca = document.cookie.split(';');
for(var i=0; i<ca.length; i++)
{
var c = ca[i].trim();
if (c.indexOf(name)===0) return c.substring(name.length,c.length);
}
return "";
}
function checkCookie()
{
var user=getCookie("user");
if (user!=="")
{
document.getElementById("username").value = user;
}
else
{
if (user!=="" && user!=null)
{
setCookie("user",user,30);
}
}
}
</script>
</body>
</html>
Mostly the upper part is just CSS. In the below part i have writtten the codes to get the username on the text box and pass it to the setcookie function below. So i need it like an usual page like when remember username check box was checked, the username should show up when the page is opened, but for me what it does is, when i open the webpage only when i click on the "remember username" checkbox the username pops up in the username textbox. Now sure what to do about this? Can someone please help me?
You're checking for cookies only when user clicks on the remember me button. You need to check for cookie on document load, for instance.
Add onload handler on body tag this way: <body onload=checkCookie()>. You need to also remove onClick="checkCookie()" from your remember me button.