<%# page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%# taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%# taglib prefix="sec"
uri="http://www.springframework.org/security/tags"%>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Modify Index Order</title>
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<link rel="stylesheet"
href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<link rel="stylesheet" href='<c:url value="/static/css/header.css" />'>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.9.0/moment-with-locales.js"></script>
<script
src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.js"></script>
<script
src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.10.3/jquery-ui.min.js"></script>
<!-- <script src="http://dev.jquery.com/view/tags/ui/latest/ui/ui.core.js"></script>
<script src="http://dev.jquery.com/view/tags/ui/latest/ui/ui.draggable.js"></script> -->
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script
src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.js"></script>
<script
src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.min.js"></script>
<style type="text/css">
table {
table-layout: fixed;
word-wrap: break-word;
}
th {
text-align: center;
}
#serviceSelect {
text-align: center;
}
#serviceSelect {
margin: auto;
width: 30%;
}
#removeSelect {
text-align: center;
}
#removeSelect {
margin: auto;
width: 30%;
}
#123 {
margin: auto;
width: 50%;
}
p {
font: bold;
}
.editrow {
border: 3px solid red;
}
</style>
</head>
<body>
<jsp:include page="../shared/header.jsp">
<jsp:param value="modifyIndexOrder" name="currentPage" />
</jsp:include>
<form class="form-horizontal" role="form" action="updateIndexOrder"
method=POST id="form2">
<div class="table-responsive12">
<table class="table table-bordered table-striped table-highlight"
id="tab_logic">
<tbody>
<tr>
<th style="width: 20%">IndexOrder</th>
<th style="width: 20%">Name</th>
<th style="width: 20%">CatKey</th>
</tr>
</tbody>
</table>
<table class="table table-bordered table-striped table-highlight"
id="submittable">
<tr id="submit123">
<td colspan="3" align="center">
<div class="form-group">
<button type="submit" class="btn btn-success btn-md" id="submit">Submit</button>
</div>
</td>
</tr>
</table>
</div>
</form>
<script type="text/javascript">
$(function() {
loadTable();
$("#tab_logic").sortable({
items : "tr:not(th)",
helper : "clone",
update : function() {
alert("success");
}
}).disableSelection();
// print();
});
function loadTable(){
$.ajax({
type : "GET",
dataType : 'json',
async : false,
url : "modifyIndex",
success : function(data) {
loadData(data);
},
error : function() {
alert("error");
}
});
}
function loadData(data){
alert("success");
var htm="<tr><th style='width:20%'>IndexOrder</th><th style='width:20%'>Name</th><th style='width:20%'>CatKey</th></tr>";
for(var i=0;i<data.length;i++)
{
htm+="<tr><td name='io"+i+"'>"+data[i].indexOrder+"</td><td name='na"+i+"'>"+data[i].name+"</td><td name='ca"+i+"'>"+data[i].catKey+"</td></tr>";
}
$("#tab_logic").html(htm);
}
function print()
{
var order = $("#tab_logic td");
var i = 1;
var col = 1;
order.each(function() {
var t = $(this).attr('name');
alert(t);
});
}
</script>
</body>
</html>
I have a table in a form which doesn't have any input field but only a table that displays data . i want that on submitting the form i should be able to read the data of the td element of the table in my controller .
Something like request.getParameter("td_name") . I read that name is not a valid attribute for td . SO in this case how can i get the data of the td elements in my controller.
You can go through your table and get all of your tr's or td's, for example:
var products = [];
$('#table tbody tr').each(function (index, tr) {
var product = {
Id: Number($(tr).find('td:nth-child(1)').text()),,
}
products.push(product);
});
$.post('/Url/Post', { products: products }, function (response, status) {
console.log(response);
if (status === 'success') {
alert('Success.');
}
});
You could do this by adding id attribute to your td
example : <td id="mytd">This is some value</td>
Now on your java script you could do something like this:
var tdvalue = document.getElementById ( "mytd" ).innerText;
or in jQuery
var tdvalue = $("#mytd").text();
now all you have to do is pass tdvalue to your request :)
Related
I am using ajax to post data on nodejs server I am getting response from nodejs and I am able to show them on front end but problem is they are still be there even if form submitted. I want to hide those messages after sometime.I have tried but unable to achieve desired result.
Below is my code:
register.ejs
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="js/register.js"></script>
<title><%= title %></title>
<style>
h1 {
text-align: center;
margin-top:50px;
}
.form{
margin-top:50px;
margin-left:30%;
margin-right:30%;
}
input{
margin-top:10px;
}
button{
margin-top:20px;
}
#result{
text-align: center;
}
.alert{
margin-top:15px;
text-align: center;
display:none;
}
</style>
</head>
<body class="container">
<h1><%= title %></h1>
<div class="form">
<form>
<input id="name" name="nam" class="form-control" type="text" placeholder="Name" aria-label="default input example">
<input id="mail" name="mail" class="form-control" type="text" placeholder="Email" aria-label="default input example">
<button type="submit" class="btn btn-primary">SUBMIT</button>
<div class="alert alert-danger" role="alert">
</div>
</form>
</div>
<script src="https://cdn.jsdelivr.net/npm/#popperjs/core#2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.1/dist/js/bootstrap.min.js" integrity="sha384-Atwg2Pkwv9vp0ygtn1JAojH0nYbwNJLPhwyoVbhoPwBhjQPR5VtM2+xf0Uwh9KtT" crossorigin="anonymous"></script>
</body>
register.js
$(document).ready(function(){
$('.btn').click(function(e){
e.preventDefault();
ajaxPost(); //Function to post data
});
});
function ajaxPost(){
var formData = {
name: $("#name").val(),
email: $("#mail").val()
}
$.ajax({
type : "POST",
contentType : "application/json",
url : "http://localhost:3000/register",
data : JSON.stringify(formData),
dataType : 'json',
success:function(data){
$(".alert").html(data.msg).show();
}
});
}
Someone let me know what I am doing wrong.
Call $(".alert").hide() in a setTimeout, but don't forget to clear the timeout when a new message is shown in .alert
let messageTo;
function showMessage(mess) {
if (messageTo) {
clearTimeout(messageTo);
messageTo = undefined;
}
$(".alert").html(mess).show();
messageTo = setTimeout(() => $(".alert").hide(), 5000);
}
I couldn't understand what message to hide you are talking about.
Assuming you want to hide the alert div,
You may use setTimeOut with a delay.
Your code would be:
$.ajax({
type : "POST",
contentType : "application/json",
url : "http://localhost:3000/register",
data : JSON.stringify(formData),
dataType : 'json',
success:function(data){
$(".alert").html(data.msg).show();
// Hide after 1 second
setTimeout(function(){ $(".alert").hide(); }, 1000);
}
});
Hello I am new to website development (started a couple of days ago).
I have some programming experience using Python and C#.
I have been trying to generate an HTML table using JS and apply it a Bootstrap css style.
I can't seem to get it to work.
What I get:
What I want:
I hope to get something that styles like this (simplified from: w3schools)
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Basic Table</h2>
<p>The .table class adds basic styling (light padding and only horizontal dividers) to a table:</p>
<table class="table">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
<td>john#example.com</td>
</tr>
</table>
</div>
</body>
</html>
My html page looks like this:
<!DOCTYPE html>
<html>
<head>
<title>CSVParser</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<script type="text/javascript" src="../scripts/csvToHtml.js"></script>
<form onsubmit="return processFile();" action="#" name="myForm" id="aForm" method="POST">
<input type="file" id="myFile" name="myFile"><br>
<input type="submit" name="submitMe" value="Process File">
</form>
<table id="myTable" class="table"></table>
</div>
</body>
</html>
and the JS script is:
function processFile() {
var fileSize = 0;
var theFile = document.getElementById("myFile").files[0];
if (theFile) {
var table = document.getElementById("myTable");
var headerLine = "";
var myReader = new FileReader();
myReader.onload = function(e) {
var content = myReader.result;
var lines = content.split("\r");
for (var count = 0; count < lines.length; count++) {
var row = document.createElement("tr");
var rowContent = lines[count].split(",");
for (var i = 0; i < rowContent.length; i++) {
if (count == 0) {
var cellElement = document.createElement("th");
} else {
var cellElement = document.createElement("td");
}
var cellContent = document.createTextNode(rowContent[i]);
cellElement.appendChild(cellContent);
row.appendChild(cellElement);
}
myTable.appendChild(row);
}
}
myReader.readAsText(theFile);
}
return false;
}
The csv data file I load looks like this:
TestA,TestB,TestC,TestD
Alpha,0.551608445,0.807554763,54.8608682
Beta,0.191220409,0.279946678,57.55254144
This is the generated HTML table from the JS:
<table id="myTable" class="table">
<tr>
<th>TestA</th>
<th>TestB</th>
<th>TestC</th>
<th>TestD</th>
</tr>
<tr>
<td>Alpha</td>
<td>0.551608445</td>
<td>0.807554763</td>
<td>54.8608682</td>
</tr>
<tr>
<td>Beta</td>
<td>0.191220409</td>
<td>0.279946678</td>
<td>57.55254144</td>
</tr>
<tr>
<td></td>
</tr>
</table>
You are missing a <tbody> element around all the <tr> Elements. thats it. if you insert this additionally you are fine with your layout.
I've changed your code quite a bit but here is a working example:
<!DOCTYPE html>
<html>
<head>
<title>CSVParser</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<form action="#" name="myForm" id="aForm" method="POST">
<input type="file" id="myFile" name="myFile"><br>
<input type="button" name="submitMe" value="Process File" onclick="processFile();">
</form>
<table id="myTable" class="table"></table>
</div>
</body>
<script type="text/javascript">
function processFile() {
var fileSize = 0;
var theFile = document.getElementById("myFile").files[0];
if (theFile) {
var table = document.getElementById("myTable");
var headerLine = "";
var myReader = new FileReader();
myReader.onload = function(e) {
var content = myReader.result;
var lines = content.split("\r");
var tbody = document.createElement("tbody");
for (var count = 0; count < lines.length; count++) {
var row = document.createElement("tr");
var rowContent = lines[count].split(",");
for (var i = 0; i < rowContent.length; i++) {
if (count == 0) {
var cellElement = document.createElement("th");
} else {
var cellElement = document.createElement("td");
}
var cellContent = document.createTextNode(rowContent[i]);
cellElement.appendChild(cellContent);
row.appendChild(cellElement);
}
tbody.appendChild(row);
}
table.appendChild(tbody);
}
myReader.readAsText(theFile);
}
return false;
}
</script>
</html>
Working example without having to upload a file
<!DOCTYPE html>
<html>
<head>
<title>CSVParser</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<form action="#" name="myForm" id="aForm" method="POST">
<textarea id="myFile" name="myFile">TestA,TestB,TestC,TestD
Alpha,0.551608445,0.807554763,54.8608682
Beta,0.191220409,0.279946678,57.55254144</textarea><br>
<input type="button" name="submitMe" value="Process File" onclick="processFile();">
</form>
<table id="myTable" class="table"></table>
</div>
</body>
<script type="text/javascript">
function processFile() {
var table = document.querySelector("#myTable");
var content = $("#myFile").val();
var lines = content.split("\n");
var tbody = document.createElement("tbody");
for (var count = 0; count < lines.length; count++) {
var row = document.createElement("tr");
var rowContent = lines[count].split(",");
for (var i = 0; i < rowContent.length; i++) {
if (count == 0) {
var cellElement = document.createElement("th");
} else {
var cellElement = document.createElement("td");
}
var cellContent = document.createTextNode(rowContent[i]);
cellElement.appendChild(cellContent);
row.appendChild(cellElement);
}
tbody.appendChild(row);
}
table.appendChild(tbody);
return false;
}
</script>
</html>
ALSO! You are using myTable.appendChild(row); in your code although you've never initialized any myTable variable.
Load your js script just before the </body> end tag.
Now you are loading the JavaScript before the browser has read all your tags and by then it can't find the elements you are querying in your script.
<body>
<div class="container">
<form onsubmit="return processFile();" action="#" name="myForm" id="aForm" method="POST">
<input type="file" id="myFile" name="myFile"><br>
<input type="submit" name="submitMe" value="Process File">
</form>
<table id="myTable" class="table"></table>
</div>
<!-- Here's the difference -->
<script type="text/javascript" src="../scripts/csvToHtml.js"></script>
</body>
How do I highlight the date selected by two different associates on associate.html in training.html,that is, two associates select their training dates and these two dates must be highlighted on the training calendar.
associate.html
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.ui-datepicker {font-size:12pt ! important}
</style>
<link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery- ui.css" rel="stylesheet">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<script>
$(document).ready(function(){
$("#datepicker").datepicker();
$('form#dateform').submit(function(){
var aselectedDate=$('#datepicker').val();
if(aselectedDate!=''){
alert('You selected: ' +aselectedDate);
}
return false;
});
});
</script>
</head>
<body><br><br>
<form id="dateform" name="dateform" action="#" method="POST">
<table>
<tr>
<td>
</td>
</tr>
<tr>
<td>Select a date</td>
<td><input id="datepicker" name="date"/></td>
</tr>
</table>
<input type="submit" name="submit" value="Submit"/>
</form>
</body>
</html>
training.html
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.highlight {
background: red !important;
}
.ui-datepicker {
font-size: 16pt !important;
}
</style>
</head>
<body>
<link href="http://code.jquery.com/ui/1.11.4/themes/blitzer/jquery-ui.css" rel="stylesheet">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<br><br>
<br>
<center><div id="datepicker"></div></center><br>
<script type="text/javascript">
var Event = function (text, className) {
this.text = text;
this.className = className;
};
var events = {};
events[new Date("06/07/2015")] = new Event("You have selected Training 1", "highlight");
events[new Date("06/16/2015")] = new Event("You have selected Training 2", "highlight");
events[new Date("07/07/2015")] = new Event("You have selected Training 3", "highlight");
events[new Date("06/18/2015")] = new Event("You have selected Training 4", "highlight");
$('#datepicker').datepicker({
beforeShowDay: function (date) {
var event = events[date];
if (event) {
return [true, event.className, event.text];
} else {
return [true, '', ''];
}
},
onSelect: function (date) {
var event = events[new Date(date)];
if (event) {
alert(event.text);
}
else {
alert('No training event');
}
}
});
</script>
<script>
$(document).ready(function () {
$('form#dateform').click(function () {
var aselectedDate = $('#datepicker').val();
if (aselectedDate != '') {
alert('You selected: ' + aselectedDate);
}
return false;
});
});
</script>
<form id="dateform" name="dateform" action="#" method="POST">
<table>
<tr>
<td>
<input id="datepicker" name="date" />
</td>
</tr>
</table>
</form>
</body>
</html>
I think your problem is that dates are not highlighted correctly, isn't?
Try this:
<style type="text/css">
.highlight {
background: red !important;
}
.ui-datepicker {
font-size: 16pt !important;
}
.highlight a {
background: none !important;
}
</style>
EDIT:
You can do this to save a date in session and convert the string value to a date value:
var associateDate = new Date(); //save in session
localStorage.setItem('date1', associateDate);
var stringValue = localStorage.getItem('date1'); // load
var training = new Date(stringValue);
I hope this will help!
i have made a simple HTML Form. I want to grab some JSON data out of a CouchDB and display it in jqGrid. But all i get is this sh**** Output in Firefox or IE. Output Firefox
It's just one row but i don't know why the list gets so long. I also dont know why some parts are pulled apart (sorry i cant speak good english).
This is how it looks before i start the javascript action and i made a simple red box indicatting where the jqGrid should be: HTML Page before Action
As you can see, my two textboxes get covered by the jqGrid.
I dont know what causes this Problem and i don't have enough Knowledge of all this. Can someone help me ?
Here is my Code:
index.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title>Testformular</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js" type="text/javascript"></script>
<!--<script type="text/javascript" charset="utf8" src="/DataTables/js/jquery.dataTables.js"></script>-->
<!--<script src="jqgrid/js/minified/jquery-1.11.0.min.js" type="text/javascript"></script>-->
<script src="jqgrid/js/i18n/grid.locale-de.js" type="text/javascript"></script>
<script src="jqgrid/js/minified/jquery.jqGrid.min.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" media="screen" href="jqgrid/css/ui-lightness/jquery-ui.css">
<link rel="stylesheet" type="text/css" media="screen" href="jqgrid/css/ui-lightness/jquery-ui.min.css">
<link rel="stylesheet" type="text/css" media="screen" href="jqgrid/css/ui-lightness/jquery-ui.structure.css">
<link rel="stylesheet" type="text/css" media="screen" href="jqgrid/css/ui-lightness/jquery-ui.theme.css">
<!--
<script type="text/javascript" src="jqwidgets/jqwidgets/jqxcore.js"></script>
<script type="text/javascript" src="jqwidgets/jqwidgets/jqxdata.js"></script>
<script type="text/javascript" src="jqwidgets/jqwidgets/jqxbuttons.js"></script>
<script type="text/javascript" src="jqwidgets/jqwidgets/jqxscrollbar.js"></script>
<script type="text/javascript" src="jqwidgets/jqwidgets/jqxmenu.js"></script>
<script type="text/javascript" src="jqwidgets/jqwidgets/jqxcheckbox.js"></script>
<script type="text/javascript" src="jqwidgets/jqwidgets/jqxlistbox.js"></script>
<script type="text/javascript" src="jqwidgets/jqwidgets/jqxdropdownlist.js"></script>
<script type="text/javascript" src="jqwidgets/jqwidgets/jqxgrid.js"></script>
<script type="text/javascript" src="jqwidgets/jqwidgets/jqxgrid.sort.js"></script>
<script type="text/javascript" src="jqwidgets/jqwidgets/jqxgrid.pager.js"></script>
<script type="text/javascript" src="jqwidgets/jqwidgets/jqxgrid.selection.js"></script>
<script type="text/javascript" src="jqwidgets/jqwidgets/jqxgrid.edit.js"></script>
<script type="text/javascript" src="jqwidgets/jqwidgets/jqxgrid.columnsresize.js"></script>
<script type="text/javascript" src="jqwidgets/scripts/demos.js"></script>
-->
<link rel="stylesheet" type="text/css" media="screen" href="jqgrid/css/ui.jqgrid.css">
<!--<link rel="stylesheet" type="text/css" href="/DataTables/css/jquery.dataTables.css">-->
<link rel="stylesheet" type="text/css" href="index.css">
<script src="index2.js" type="text/javascript"></script>
</head>
<body onLoad="inputonload();">
<div class="page">
<div class="eingabe">
<form name="form" method="post">
<div>
<input class="input" onmouseover="clearOnClickFromkkz()" onmouseout="test()" value="Kundenkürzel" type="text" id="kkz">
</div>
<div>
<input class="input" onmouseover="clearOnClickFrommgr()" onmouseout="manager_updat()" type="text" id="mgr" name="manager" value="Manager">
</div>
</form>
</div>
<table id="Grid1" style="height: 290px; width: 444px"><div id="gridpager"></div></table>
</div>
</div>
</body>
</html>
My Javascript File
function clearOnClickFromkkz() {
if (document.getElementById('kkz').value === "Kundenkürzel") {
document.getElementById('kkz').value = "";
document.getElementById('kkz').style.color = "#000000";
}
}
function clearOnClickFrommgr() {
if (document.getElementById('mgr').value === "Manager") {
document.getElementById('mgr').value = "";
document.getElementById('mgr').style.color = "#000000";
}
}
function inputonload() {
document.getElementById('kkz').style.color = "#A1A1A1";
document.getElementById('mgr').style.color = "#A1A1A1";
}
function manager_updat() {
var link = 'http://127.0.0.1:5984/php_couch3/_design/mgr/_view/by_mgr?key="' + document.getElementById('mgr').value + '"';
var request = $.ajax({
type: 'GET',
url: link,
dataType: "json",
});
request.done(function(data){
console.log(data);
$("#content").html(data);
});
if (document.getElementById('mgr').value === "") {
document.getElementById('mgr').value = "Manager";
document.getElementById('mgr').style.color = "#A1A1A1";
}
}
function sid_update() {
var link = 'http://127.0.0.1:5984/php_couch3/_design/sid/_view/by_sid?key="' + document.getElementById('kkz').value + '"';
var request = $.ajax({
type: 'GET',
url: link,
dataType: "json",
});
request.done(function(data){
console.log(data);
$("#content").html(data);
});
if (document.getElementById('kkz').value === "") {
document.getElementById('kkz').value = "Kundenkürzel";
document.getElementById('kkz').style.color = "#A1A1A1";
}
}
function test() {
jQuery(document).ready(function () {
var pager = '#gridpager';
jQuery("#Grid1").jqGrid({
url: 'http://127.0.0.1:5984/php_couch3/_design/sid/_view/by_sid?key="' + document.getElementById('kkz').value + '"',
datatype: 'json',
mtype: 'GET',
colNames: ['key', 'value'],
colModel: [{ name: 'key', index: 'key', width: 150 },
{ name: 'value', index: 'value', width: 150}],
sortname: 'id',
pager: '#gridpager',
viewrecoreds: true,
scrollOffset: 0,
imgpath: 'Themes/images'
}).navGrid(pager, {edit: true, add: true, del: true, refresh: true, search: true, position: 'left'});
});
}
And my CSS File:
body{
}
.input {
margin:0px;
font-size:12px;
width:90%;
height:30px;
margin-bottom: 2px;
float:left;
text-align:center;
vertical-align:middle
}
div.eingabe {
width:150px;
float:left;
border: 0px;
padding: 0px;
margin: 0 0 0 0;
}
div.content {
border:1px solid #efeff7;
background-color:#efeff7;
width:650px;
height:100%;
float:right;
}
div.page {
position:absolute;
width:805px;
height:90%;
min-height:600px;
margin-left: 25%;
margin-top:10px;
border: 0px lime solid;
}
First, check that you are getting data. Use the dev console in FF/Chrome/IE you access it with F12, you can see the network tab and check your requests and responses.
Also there you can see any errors on the javascript code, check the console output
So I am designing a website for myself, which takes a user input from the user through a form, searches for the same in database , and returns the expected output.
Below shown is my HTML Code for the same.
<%# page import="java.sql.*"%>
<%# include file="DBConn.jsp" %>
<%# page import = "java.sql.*"%>
<%
String ID,time,result,obj;
Statement stmt,stmt2;
ResultSet rs;
String SQL="";
String k="key";
String w="wallet";
String p="pen";
String a="atm";
ID="";
time="";
result="";
String save=request.getParameter("bSave");
String delete=request.getParameter("BDelete");
String search=request.getParameter("BSearch");
stmt = con.createStatement();
if (search!=null)
{
obj=request.getParameter("ID");
if(obj.equals(k))
{
ID="05447646";
}
else if(obj.equals(w))
{
ID="05447647";
}
else if(obj.equals(p))
{
ID="05447649";
}
else if(obj.equals(a))
{
ID="05447650";
}
rs=stmt.executeQuery("Select * from tablename1 where ID='"+ ID +"'");
while(rs.next()) {
ID=rs.getString("ID");
time=rs.getString("time"); }
}
%>
<!DOCTYPE HTML>
<html>
<head>
<title>Intelli-Track Search Interface</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<link href="1.css" rel="stylesheet" />
<style type="text/css">
#Head1{
position: absolute;
width: 100%;
top: 126px;
visibility: visible;
left: 4px;
}
#tab1 {
position: absolute;
width: 780px;
height: 408px;
z-index: 1;
left: 1px;
top: 272px;
right: auto;
}
#apDiv1 {
position: absolute;
width: 403px;
height: 408px;
z-index: 1;
left: auto;
top: 200px;
right: -1px;
}
.center1 {
text-align: center;
}
#apDiv1 .indent-1 {
text-align: center;
font-size: 44px;
}
#apDiv1 p {
text-align: center;
}
</style>
<script src="js/jquery-1.8.3.min.js"></script>
<script src="css/5grid/init.js?use=mobile,desktop,1000px"></script>
<script src="js/init.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#login_frm").submit(function(){
//remove previous class and add new "myinfo" class
$("#msgbox").removeClass().addClass('myinfo').text('Validating Your Login ').fadeIn(2000);
this.timer = setTimeout(function () {
$.ajax({
url: 'check.jsp',
data: 'un='+ $('#login_id').val() +'&pw=' + $('#password').val(),
type: 'post',
success: function(msg){
if(msg != 'ERROR') // Message Sent, check and redirect
{ // and direct to the success page
$("#msgbox").html('Login Verified, Logging in.....').addClass('myinfo').fadeTo(900,1,
function()
{
//redirect to secure page
document.location='login.jsp?user='+msg;
});
}
else
{
$("#msgbox").fadeTo(200,0.1,function() //start fading the messagebox
{
//add message and change the class of the box and start fading
$(this).html('Sorry, Wrong Combination Of Username And Password.').removeClass().addClass('myerror').fadeTo(900,1);
});
}
}
});
}, 200);
return false;
});
});
</script>
<noscript>
<link rel="stylesheet" href="css/5grid/core.css" />
<link rel="stylesheet" href="css/5grid/core-desktop.css" />
<link rel="stylesheet" href="css/5grid/core-1200px.css" />
<link rel="stylesheet" href="css/5grid/core-noscript.css" />
<link rel="stylesheet" href="css/style.css" />
<link rel="stylesheet" href="css/reset.css" />
<link rel="stylesheet" href="css/structure.css" />
<link rel="stylesheet" href="css/style-desktop.css" />
</noscript>
<!--[if lte IE 9]><link rel="stylesheet" href="css/ie9.css" /><![endif]-->
<!--[if lte IE 8]><link rel="stylesheet" href="css/ie8.css" /><![endif]-->
<!--[if lte IE 7]><link rel="stylesheet" href="css/ie7.css" /><![endif]-->
</head> <body>
<form name="form1" method="post" action="">
</form>
<nav id="nav">
<ul>
<li>Home</li>
<li>About Intelli-Track</li>
<li>Logout</li>
<li>Contact</li>
</ul>
</nav>
<div class="image-centered" id="Head1">
<header> <h1 align="center">Welcome to <strong>Intelli-Track</strong> Search Interface</h1><hr>
</header>
</div>
<div id="tab1">
<table align="center" width="800" style="border:10px solid #d2d2d2">
<tr><th align="center"><h3><u>Object</u></h3></th><th width="234" align="center"><h3><u>Tag-ID</u></h3></th>
<th width="394" align="center"><h3><u>Last Accessed Date and Time</u></h3></th></tr>
<tr></tr>
<tr><td align="center"><script type="text/javascript">
</script>
</td><td align="center"><%=ID%></td>
<td align="center"><%=time%></td>
</tr>
</table>
</div>
<div id="apDiv1">
<p> </p>
<h3 class="indent-1"> <span class="center1">Object Finder</span> </h3>
<form name="form2" width=70% method="post" action="">
<p>
<label for="ID">Enter object to be searched:</label>
</p>
<p>
<input type="text" name="ID" id="IDd">
</p>
<p>
<input name="BSearch" type="submit" class="button-big" value="Search">
</p>
</form>
<p> </p>
</div>
</body>
</html>
This is what the actually page looks like :
So what does this page basically do is , when a user enter a value in the form ( The valid values are pen,key,atm,wallet), it retrieves the last time of the pen access and the TAG_ID, which is already stored in the database. While I can easily retrieve these two values. I do not know how to print the name of the object in the first column "OBJECT", again it should print valid OBJECT (like pen, wallet, atm, key)
What should i put here in this part of the code, to achieve the same. :
<table align="center" width="800" style="border:10px solid #d2d2d2">
<tr><th align="center"><h3><u>Object</u></h3></th><th width="234" align="center"><h3><u>Tag-ID</u></h3></th>
<th width="394" align="center"><h3><u>Last Accessed Date and Time</u></h3></th></tr>
<tr></tr>
<tr><td align="center"><script type="text/javascript">
what goes here ..???
</script>
</td><td align="center"><%=ID%></td>
<td align="center"><%=time%></td>
</tr>
</table>
i have tried using Document.getElementbyID but that doesn't works...!! and yes there's no validation in that too..!!
simply put you want to display the text which was entered in the text-box Object Finder if I am not wrong?
If yes, then you are already retrieving it in the JSP as a string obj=request.getParameter("ID"); so just use <%= obj %> wherever you want to display the value, something like:
<tr>
<td align="center">
<%= obj %>
</td>
...
I have sorted out a solution for the same, I made the database itself to store the object name along with the tag_id's.
So after that i simply retrieved the database value's using the select query, and posted the same in the table.
rs=stmt.executeQuery("Select * from tablename1 where ID='"+ ID +"'");
while(rs.next()) {
obj1=rs.getString("objj");
ID=rs.getString("ID");
time=rs.getString("time"); }
Then print the same using ..!!
<table align="center" width="800" style="border:10px solid #d2d2d2">
<tr><th align="center"><h3><u>Object</u></h3></th><th width="234" align="center"><h3><u>Tag-ID</u></h3></th>
<th width="394" align="center"><h3><u>Last Accessed Date and Time</u></h3></th></tr>
<tr></tr>
<tr><td align="center"><%=obj1%></td><td align="center"><%=ID%></td>
<td align="center"><%=time%></td>
</tr>
</table>
So this solve's my problem.