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);
%>
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 am trying to export a table from jsp page to pdf. jspdf is also not working for this.
my jsp page goes as below, nothing is happening when I click the button export to pdf
Hi, I am trying to export a table from jsp page to pdf. jspdf is also not working for this.
my jsp page goes as below, nothing is happening when I click the button export to pdf
<!DOCTYPE html>
<%
HeadCountReport hcOb = new HeadCountReport();
String groupName = request.getAttribute("gn").toString();
%>
<%#page import="com.mypay.ApplicationConstants"%>
<%#page import="com.reports.HeadCountReport"%><html dir="ltr" lang="en-US">
<%#taglib uri="http://displaytag.sf.net" prefix="display" %>
<head>
<meta charset="ISO-8859-1">
<script src="js/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="./js/tableExport.js"></script>
<script type="text/javascript" src="js/jquery.base64.js"></script>
<script type="text/javascript" src="js/sprintf.js"></script>
<script type="text/javascript" src="js/jspdf.js"></script>
<script type="text/javascript" src="js/base64.js"></script>
<title>Groupwise Head Count</title>
<meta name="viewport"
content="initial-scale = 1.0, maximum-scale = 1.0, user-scalable = no, width = device-width">
<!--[if lt IE 9]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
<link rel="stylesheet" href="css/style.css" media="screen">
<!--[if lte IE 7]><link rel="stylesheet" href="style.ie7.css" media="screen" /><![endif]-->
<link rel="stylesheet" href="css/style.responsive.css" media="all">
<link rel="stylesheet" type="text/css" href="css/reports.css"/>
<script type="text/javascript" src="js/sortable.js"></script>
<script src="js/jquery.js"></script>
<script src="js/script.js"></script>
<script type="text/javascript">
function loadTable(){
document.getElementById('tbldiv').width=screen.availWidth;
document.getElementById('tbldiv').height=screen.availHeight;
}
var tableToExcel = (function() {
var uri = 'data:application/vnd.ms-excel;base64,'
, template = '<html xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:x="urn:schemas-microsoft-com:office:excel" xmlns="http://www.w3.org/TR/REC-html40"><head><!--[if gte mso 9]><xml><x:ExcelWorkbook><x:ExcelWorksheets><x:ExcelWorksheet><x:Name>{worksheet}</x:Name><x:WorksheetOptions><x:DisplayGridlines/></x:WorksheetOptions></x:ExcelWorksheet></x:ExcelWorksheets></x:ExcelWorkbook></xml><![endif]--></head><body><table>{table}</table></body></html>'
, base64 = function(s) { return window.btoa(unescape(encodeURIComponent(s))) }
, format = function(s, c) { return s.replace(/{(\w+)}/g, function(m, p) { return c[p]; }) }
return function(table, name) {
if (!table.nodeType) table = document.getElementById(table)
var ctx = {worksheet: name || 'Worksheet', table: table.innerHTML}
window.location.href = uri + base64(format(template, ctx))
}
})()
</script>
<script type="text/javascript">
function printPDF() {
var printDoc = new jsPDF();
printDoc.fromHTML($('#tblGrp').get(0), 10, 10, {'width': 180});
printDoc.autoPrint();
printDoc.output("dataurlnewwindow"); // this opens a new popup, after this the PDF opens the print window view but there are browser inconsistencies with how this is handled
}
</script>
<script >
function open_win(url_add)
{
window.open(url_add,'welcome','width=300,height=200,menubar=no,status=no,location=no,toolbar=no,scrollbars=no');
}
function myNewWindow(url_add) {
window.open(url_add, "newWindow", "height=200,width=200,status=yes,menubar=no,status=no,location=no,toolbar=no,scrollbars=no")
}
</script>
</head>
<body>
<div id="art-main">
<div class="art-sheet clearfix"><header
class="art-header clearfix"> <%#include file="header.jsp"%>
</header> <nav class="art-nav clearfix"> <%#include file="hmenu.jsp"%>
<jsp:include page="auth.jsp"></jsp:include> </nav>
<div class="art-layout-wrapper clearfix">
<div class="art-content-layout">
<div class="art-content-layout-row">
<div class="art-layout-cell art-content clearfix"><article
class="art-post art-article">
<div class="art-postcontent art-postcontent-0 clearfix">
<div class="art-content-layout">
<div class="art-content-layout-row">
<div class="art-layout-cell layout-item-0" style="width: 100%">
<div class="clearfix" align="center"> <h2 align="left">Group Break HC Report</h2>
<p> </p>
<input type="button" onclick="tableToExcel('tblGrp', 'Groupwise Break Up')" value="Export to Excel"><input type="button" onClick ="javascript:printPDF();" value="Export to PDF"><br/>
<div id="tblGrp">
<table width="70%" id="tblGrp" align="center" class="sortable">
<tr>
<th width="35" scope="col">SLNo</th>
<th width="89" scope="col">Group</th>
<th width="190" scope="col">Division</th>
<th width="84" scope="col">Staff Type</th>
<th width="107" scope="col">Head Count</th>
</tr>
<%
java.util.List<String[]> listDetail=null;
listDetail = hcOb.getGroupwiseReport(groupName);
Iterator<String[]> itemplid = listDetail.iterator();
int count = 0;
while(itemplid.hasNext()){
String[] sepEmpDet = itemplid.next();
%>
<tr>
<td><%=++count%></td>
<td><%=sepEmpDet[1] %></td>
<td><%=sepEmpDet[3] %></td>
<td><%=sepEmpDet[2] %></td>
<td><%=sepEmpDet[0] %></td>
</tr>
<% }
%>
</table>
</div>
</div>
</div>
</div>
</div>
</article></div>
</div>
</div>
</div>
<%#include file="footer.jsp"%></div>
</div>
</body>
</html>
thanks.
I see the javascript function calls id="tblGrp". However,
<div id="tblGrp">
<table width="70%" id="tblGrp" align="center" class="sortable">
The id appears multiple times, perhaps giving a problem with jspdf. Without more information of the javascript error, Here are a couple of java alternatives.
1) You can build everything using iText.
2) You can design a report in iReport by constructing a jrxml and use the jasper engine for independent pdf exporting/rendering in your application.
3)Here is additional post for alternative to iText.
[Are there any Java PDF creation alternatives to iText?
Without more info of the javascript error, there isn't much to solve here.
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.