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.
Related
First let me start by saying I am very new to javascript. I am currently studying the subject as part of a course I am doing.
I have an assignment that requires me to put together image slices in a table built by javascript and place it in a on a HTML page.
I have had success with all of this except when i attempt to resize the table and div section with CSS the images separate leaving gaps in the image. Is there anyone out there who can see why i am getting this issue? Im pulling my hair out.
here is my code.
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Bazaar Ceramics</title>
<!--[if IE]>
<link type="text/css" rel="stylesheet" media="all" href="ie_only.css"/> <![endif]-->
<link href="../../CSS/ie_only.css" rel="stylesheet" type="text/css">
<link href="../../CSS/laptop.css" rel="stylesheet" type="text/css">
<link href="../../CSS/Layout.css" rel="stylesheet" type="text/css">
<link href="../../CSS/mobile.css" rel="stylesheet" type="text/css">
<link href="../../CSS/style.css" rel="stylesheet" type="text/css">
<link href="../../CSS/tablet.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="mainwrapper">
<div id="header"><img id="logo" src="../../images/bazaar-logo.jpg" alt="Bazaar Ceramics Logo"><h1 class="title">Bazaar Ceramics</h1>
</div><!--this is the end of div Header-->
<div id="ImageContent"><script src="../../Script/ImageContent.js"> </script></div><!--this is the end of div id ImageContent-->
<div id="formContent">
<h1 class="prodhead">Order Item</h1>
<form action="#" name="orders">
<table id="formtab">
<tr>
<td width="20%"><label>Item Description:</label></td> <td><input type="text" name="description" size="100%" value="Red Bowl" disabled></td>
</tr>
<tr>
<td><label>Quantity:</label></td><td><input type="text" name="quantity" value="1" min="1"></td>
<tr>
<td><label>Price:</label></td><td><input type="text" name="price" value="$350" disabled></td>
</tr>
<tr>
<td><label>Total Price:</label></td><td><input type="text" name="total"></td>
</tr>
<tr>
<th colspan="2"><input type="button" name="clear" value="Clear Form" id="button"> <input type="button" name="calculate" value="Calculate Total" id="button"> <input type="button" name="Submit" value="Submit Order" id="button"></th>
</table>
</form>
</div><!--this is the end of div id formContent-->
<div id="footer">
Home
Close
<br style="clear:both"><p id="copyright">Copyright 2018 Online System Solutions</p></div><!--this is the end of dive id footer-->
</div><!--end of mainwrapper-->
</body>
</html>
CSS Code
.myTable {
max-width:90%;
}
.myImg{
display:block;
max-width: 100%;
height: auto;
width: auto;
vertical-align:middle;
}
javascript
// constants
var colCount=5;
var rowCount=4;
// input data
var col1 = new Array("r1_c1","r2_c1","r3_c1","r4_c1");
var col2 = new Array("r1_c2", "r2_c2", "r3_c2", "r4_c2");
var col3 = new Array("r1_c3", "r2_c3", "r3_c3", "r4_c3");
var col4 = new Array("r1_c4", "r2_c4", "r3_c4", "r4_c4");
var col5 = new Array("r1_c5", "r2_c5", "r3_c5", "r4_c5");
// create the column array.
var collist = [col1,col2,col3,col4,col5];
// make the table.
document.write('<table class="myTable" cellspacing="0" cellpadding="0" align="center">');
for (rownum = 1; rownum <= rowCount; rownum++) {
document.write("<tr>");
for (colnum = 1; colnum <= colCount; colnum++) {
document.write("<td>" + '<img src="../../images/Large/bcpot002_' + (collist[(colnum-1)])[(rownum-1)] + '.jpg"' + 'class="myImg">' + '</img>' + "</td>");
}
document.write("</tr>");
}
document.write('</table>')
Any help here would be great thanks.
on the button click of calculate ; i want to calculate all the cost.
i'm trying btn the alert is not working on the click.
i'm trying without the variable it is working.
but when i calculate all the values and pass it in the alert function .
it just doesn't display anything.
i have also used intParse() method to typecast..
Help Needed.
Much appreciated
function milkHandler() {
var tempMilk =document.orderForm.milk.value;
var milkTotal = tempMilk * 3.19;
console.log(milkTotal);
}
function eggHandler() {
var tempEgg =document.orderForm.eggs.value;
var eggTotal = tempEgg * 3.55;
console.log(eggTotal);
}
function breadHandler() {
var tempBread = document.orderForm.bread.value;
var breadTotal = tempBread * 3.49;
console.log(breadTotal);
}
function juiceHandler() {
var tempJuice =document.orderForm.juice.value;
var juiceTotal = tempJuice * 4.49;
console.log(juiceTotal);
}
function honeyHandler() {
var tempHoney = document.orderForm.honey.value;
var honeyTotal = tempHoney * 6.59;
console.log(honeyTotal);
}
function finish() {
var mainTotal = milkTotal+eggTotal+breadTotal+juiceTotal+honeyTotal;
alert(milkTotal);
}
<!DOCTYPE HTML>
<html>
<head>
<title>Shopping List</title>
<link href="css-pass/style.css" rel="stylesheet" type="text/css" media="all"/>
<!-- Custom Theme files -->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content="Reset Password Form Responsive, Login form web template, Sign up Web Templates, Flat Web Templates, Login signup Responsive web template, Smartphone Compatible web template, free webdesigns for Nokia, Samsung, LG, SonyEricsson, Motorola web design" />
<!--google fonts-->
<!-- <link href='//fonts.googleapis.com/css?family=Roboto:400,100,300,500,700,900' rel='stylesheet' type='text/css'> -->
</head>
<style type="text/css">
.main-box
{
border: 0px solid;
height: 50px;
width: 100%;
}
.box-1
{
border: 0px solid;
height: 50px;
width: 20%;
float: left;
}
.box-2
{
border: 0px solid;
height: 50px;
width: 69%;
float: left;
}
.text
{
font-size: 20px;
color: #0086E7;
margin-top: 10px;
}
</style>
<body>
<!--element start here-->
<div class="elelment">
<h2>Grocery Order Form</h2>
<div class="element-main">
<h1>Type in the Quantities of each item you would like to purchase in the text box below</h1><br><br>
<form action="" method="post" name="orderForm" onsubmit="finish()">
<div class="main-box">
<div class="box-1">
<input type="number" name="milk" onChange = "milkHandler()" id="milk">
</div>
<div class="box-2">
<div class="text">Low Fat Milk [$3.19/Gallon]</div><br>
</div>
<div class="box-1">
<input type="number" name="eggs" onChange = "eggHandler()">
</div>
<div class="box-2">
<div class="text">Cage Free Organic Eggs [$3.55/Dozen]</div>
</div>
<div class="box-1">
<input type="number" name="bread" onChange = "breadHandler()">
</div>
<div class="box-2">
<div class="text">Whole White Bread [$3.49/Loaf]</div>
</div>
<div class="box-1">
<input type="number" name="juice" onChange = "juiceHandler()">
</div>
<div class="box-2">
<div class="text">Fresh Grape Juice [$4.49/Half Gallon]</div>
</div>
<div class="box-1">
<input type="number" name="honey" onChange = "honeyHandler()">
</div>
<div class="box-2">
<div class="text">Home Grown Honey [$6.59/Pint]</div>
</div>
</div>
<input type="submit" name="calculate" value="Calcuate" >
<input type="reset" name="calculate" value="Reset">
</form>
</div>
</div>
<div class="copy-right">
</div>
<!--element end here-->
</body>
<script src="script.js"></script>
</html>
You cannot use variables in one function and reuse them in another. You could use return. But a simpler way to do this is to put everything into one function.
function cal() {
var milk = document.getElementById('milk').value;
var butter = document.getElementById('butter').value;
var cheese = document.getElementById('cheese').value;
document.getElementById('result').innerHTML = milk*5 + butter*4 + cheese*3;
}
function res() {
document.getElementById('milk').value = 0;
document.getElementById('butter').value = 0;
document.getElementById('cheese').value = 0;
document.getElementById('result').innerHTML = "Value has been reset";
}
Milk: $5 <input type="number" id="milk" onchange="cal()" oninput="cal()"><br>
Butter: $4 <input type="number" id="butter" onchange="cal()" oninput="cal()"><br>
Cheese: $3 <input type="number" id="cheese" onchange="cal()" oninput="cal()"><br>
<button onclick="res()">Reset</button><br>
Total: <div id="result"></div>
The problem is all your variables are defined inside the functions causing them to cease existing when function ends.
You need to define these variables outside the functions.
var milkTotal = 0;
var eggTotal = 0;
var breadTotal = 0;
var juiceTotal = 0;
var honeyTotal = 0;
function milkHandler() {
var tempMilk =document.orderForm.milk.value;
milkTotal = tempMilk * 3.19;
console.log(milkTotal);
}
function eggHandler() {
var tempEgg =document.orderForm.eggs.value;
eggTotal = tempEgg * 3.55;
console.log(eggTotal);
}
function breadHandler() {
var tempBread = document.orderForm.bread.value;
breadTotal = tempBread * 3.49;
console.log(breadTotal);
}
function juiceHandler() {
var tempJuice =document.orderForm.juice.value;
juiceTotal = tempJuice * 4.49;
console.log(juiceTotal);
}
function honeyHandler() {
var tempHoney = document.orderForm.honey.value;
honeyTotal = tempHoney * 6.59;
console.log(honeyTotal);
}
function finish() {
var mainTotal = milkTotal+eggTotal+breadTotal+juiceTotal+honeyTotal;
alert(mainTotal);
}
<!DOCTYPE HTML>
<html>
<head>
<title>Shopping List</title>
<link href="css-pass/style.css" rel="stylesheet" type="text/css" media="all"/>
<!-- Custom Theme files -->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content="Reset Password Form Responsive, Login form web template, Sign up Web Templates, Flat Web Templates, Login signup Responsive web template, Smartphone Compatible web template, free webdesigns for Nokia, Samsung, LG, SonyEricsson, Motorola web design" />
<!--google fonts-->
<!-- <link href='//fonts.googleapis.com/css?family=Roboto:400,100,300,500,700,900' rel='stylesheet' type='text/css'> -->
</head>
<style type="text/css">
.main-box
{
border: 0px solid;
height: 50px;
width: 100%;
}
.box-1
{
border: 0px solid;
height: 50px;
width: 20%;
float: left;
}
.box-2
{
border: 0px solid;
height: 50px;
width: 69%;
float: left;
}
.text
{
font-size: 20px;
color: #0086E7;
margin-top: 10px;
}
</style>
<body>
<!--element start here-->
<div class="elelment">
<h2>Grocery Order Form</h2>
<div class="element-main">
<h1>Type in the Quantities of each item you would like to purchase in the text box below</h1><br><br>
<form action="" method="post" name="orderForm" onsubmit="finish()">
<div class="main-box">
<div class="box-1">
<input type="number" name="milk" onChange = "milkHandler()" id="milk">
</div>
<div class="box-2">
<div class="text">Low Fat Milk [$3.19/Gallon]</div><br>
</div>
<div class="box-1">
<input type="number" name="eggs" onChange = "eggHandler()">
</div>
<div class="box-2">
<div class="text">Cage Free Organic Eggs [$3.55/Dozen]</div>
</div>
<div class="box-1">
<input type="number" name="bread" onChange = "breadHandler()">
</div>
<div class="box-2">
<div class="text">Whole White Bread [$3.49/Loaf]</div>
</div>
<div class="box-1">
<input type="number" name="juice" onChange = "juiceHandler()">
</div>
<div class="box-2">
<div class="text">Fresh Grape Juice [$4.49/Half Gallon]</div>
</div>
<div class="box-1">
<input type="number" name="honey" onChange = "honeyHandler()">
</div>
<div class="box-2">
<div class="text">Home Grown Honey [$6.59/Pint]</div>
</div>
</div>
<input type="submit" name="calculate" value="Calcuate" >
<input type="reset" name="calculate" value="Reset">
</form>
</div>
</div>
<div class="copy-right">
</div>
<!--element end here-->
</body>
<script src="script.js"></script>
</html>
<%# 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 :)
I am having trouble using two plugins. I have tried:
https://github.com/snikch/jquery.dirtyforms
https://github.com/codedance/jquery.AreYouSure
In my code I am using:
<script>
$(funtion() {
$('form').dirtyForms();
});
</script>
Or
<script>
$(funtion() {
$('form').areYouSure();
});
</script>
within my header and when I change elements of the form and try to refresh I get no dialouge. I am struggling to work out how I can tell if it's being called at all.
I can't for the life of me get it to work. Any ideas?
Below is a view source example of a page with it in:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="icon" href="favicon.ico" type="image/x-icon">
<link rel="stylesheet" href="styles/header.css?v=1.0">
<link rel="stylesheet" href="styles/content.css?v=1.0">
<link rel="stylesheet" href="styles/footer.css?v=1.0">
<link rel="stylesheet" href="styles/jquery.datetimepicker.css?v=1.0">
<script src="scripts/jquery191.min.js"></script>
<script src="scripts/mdetect.js" type="text/javascript"></script>
<script type="text/javascript">
if(MobileEsp.DetectTierIphone() == true) {
var metaTag=document.createElement('meta');
metaTag.name = "viewport"
metaTag.content = "width=device-width, initial-scale=0.4, maximum-scale=1.0, user-scalable=1"
document.getElementsByTagName('head')[0].appendChild(metaTag);
}
if(MobileEsp.DetectTierTablet() == true) {
var metaTag=document.createElement('meta');
metaTag.name = "viewport"
metaTag.content = "width=device-width, initial-scale=0.75, maximum-scale=1.0, user-scalable=1"
document.getElementsByTagName('head')[0].appendChild(metaTag);
}
</script>
<script type="text/javascript" src="scripts/jquery.tablesorter.js"></script>
<script type="text/javascript" src="scripts/jquery.tablesorter.widgets.js"></script>
<script type="text/javascript" src="scripts/widget-print.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBTHOXfueJyei11NqPw3rRjhjj_yjcdV-E&callback=initMap"></script>
<script src="scripts/jquery.datetimepicker.full.min.js"></script>
<script src="scripts/jquery.form.js"></script>
<script type="text/javascript" src="//cdn.jsdelivr.net/jquery.dirtyforms/2.0.0/jquery.dirtyforms.min.js"></script>
<script type="text/javascript" language="JavaScript">
<!--
function HideContent(d) {
document.getElementById(d).style.display = "none";
}
function ShowContent(d) {
document.getElementById(d).style.display = "block";
}
function ReverseDisplay(d) {
if(document.getElementById(d).style.display == "none") { document.getElementById(d).style.display = "block"; }
else { document.getElementById(d).style.display = "none"; }
}
//-->
</script>
<script>
$(document).ready(function(){
$("BodyshopAddress").each(function(){
var embed ="<iframe width='200' height='200' frameborder='0' scrolling='no' marginheight='0' marginwidth='0' style='margin-left:30px;' src='https://maps.google.com/maps?&q="+ encodeURIComponent( $(this).text() ) +"&output=embed&iwloc'></iframe>";
$(this).html(embed);
});
});
</script>
<script>
$(funtion() {
$('form').dirtyForms();
});
</script>
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<div class="container">
<div class="MainHeader">
...
</div>
<div class="logged_container">
...
</div>
<div class="navigation_container">
...
</div>
<div style="position:absolute; top:0; right:0; margin-right:10px; margin-top:5px; background-color:#4771A5; border-radius:3px; padding:5px; box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.05) inset, 0px 0px 25px rgba(82, 168, 236, 0.7);">
<form id="myForm" action="" method="POST">
<input type='text' size='20' name='Poke' placeholder='Magic Poking Stick' style="margin-right:5px; vertical-align:middle; text-align:center;"> <input type='submit' name='BadBoyPoke' value='' class='submit' title='Search' maxlength="3" style='background-image:url("img/bms121.png"); vertical-align:middle;' >
</form>
</div>
<script>
$(document).ready(function()
{
$('#RepairerNetworkTable').tablesorter({
widthFixed : true,
headerTemplate : '{content} {icon}', // Add icon for various themes
widgets: [ 'stickyHeaders', 'filter', 'print' ],
widgetOptions: {
stickyHeaders_attachTo : '.wrapper',
print_title : '', // this option > caption > table id > "table"
print_dataAttrib : 'data-name', // header attrib containing modified header name
print_rows : 'f', // (a)ll, (v)isible or (f)iltered
print_columns : 's', // (a)ll, (v)isible or (s)elected (columnSelector widget)
print_extraCSS : '', // add any extra css definitions for the popup window here
print_styleSheet : 'styles/tablePrint.css', // add the url of your print stylesheet
print_callback : function(config, $table, printStyle){
$.tablesorter.printTable.printOutput( config, $table.html(), printStyle );
}
}
});
$('.print').click(function(){
$('.tablesorter').trigger('printTable');
});
}
);
</script>
<div class="content">
<div class="contentTableView">
<a href="#" class="print" style="float:right; margin-right:20px;">
<img src="img/bms91.png" alt="" height="16" style="vertical-align:top; padding-right:5px;">Print</a>
</div>
<br /><br />
<div class="GridViewContainer wrapper">
<table id="RepairerNetworkTable" class="tablesorter">
...
</table>
</div>
<br />
<div class="TabbedViewContainer">
<div class="TabbedNavContainer">
<div style="position: relative; top: 50%; transform: translateY(-50%);">
<form action="" method="post">
<a style="text-decoration:underline !important;" href="repairer_network.php?RepNetID=9&RepNetTab=Info">Info</a>
Work Providers / Brokers
Bodyshops
<input name="submitInfo" type="submit" value="Change Repairer Network's Info" />
</div>
</div>
<div style="text-align:left; padding-left:10px; padding-top:10px;">
<span style="font-size: 12px; font-weight:bold;">Repairer Network Info: </span>
<br />
<hr size='1' style=" margin: 5px 10px 5px 0; ">
<table style="float:left;">
<tr>
<td>Name: </td>
<td><input name="BusinessName" type="text" size="30" value="AI Claims Solutions (UK) Ltd"/> </td>
</tr>
<tr>
<td>Email: </td>
<td><input name="BusinessEmail" type="text" size="30" value=""/></td>
</tr>
<tr>
<td>Phone: </td>
<td><input name="BusinessPhone" type="text" size="30" value=""/></td>
</tr>
</table>
</form>
</div>
</div>
<br />
</div>
<div class="footer">
...
</div>
</div>
</body>
</html>
It's simple to use. Just add the following line to your page's ready function:
$('form').areYouSure(); Are You Sure? - A light "dirty forms" JQuery Plugin
$(document).ready(function(){
$('form').areYouSure();
});
That's what the plugin says... it listen to the element $('form') (you could use an id or class) and when the "event" "areYouSure()" occurs, the plugin will trigger...
I need to load an aspx page that returns a string of text using jsonp since it is a cross domain call. The target page will be loaded inside a div tag and displayed as a modal window on the source page.
I am using a test form to pass 3 parameters that the target page expects, a submit button, very simple.
When I submit the page, I get an error message: Uncaught SyntaxError: Unexpected token <
When I click on the error I see the error points to this line:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
This is the first time I am working with json/ jsonp, and I am not sure how to fix this error. Is it possible to get some help to figure this out?
My invoking page:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script type="text/javascript">
$(function () {
$("#dialog").dialog({
autoOpen: false,
modal: true,
title: "Details",
buttons: {
Close: function () {
$(this).dialog('close');
}
}
});
$("#btnSubmit").click(function () {
$.ajax({
type: "GET",
dataType: "jsonp",
crossDomain: true,
url: "http://localhost:81/order-error.aspx",
contentType: "application/json; charset=utf-8",
data: { 'order': $("#order").val(), 'site': $("#site").val(), 'env': $("#env").val() },
success: function (r) {
$("#dialog").html(r.d);
$("#dialog").dialog("open");
}
});
});
});
</script>
</head>
<body>
<table>
<tr>
<td>Name:</td>
<td><input type="text" id="order" value="" /></td>
<td><input type="text" id="site" value="" /></td>
<td><input type="text" id="env" value="" /></td>
</tr>
<tr>
<td><input type="button" id="btnSubmit" value="Submit" /></td>
</tr>
</table>
<div id="dialog" style="display: none">
</div>
</body>
</html>
My target/ response page (order-error.aspx):
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title></title>
<style type="text/css">
body {
margin: 0;
padding: 0;
font-size: 11px;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
#content {
width: 100%;
display: inline-block
}
.label {
position:relative;
float:left;
top:0;
margin-right:5px;
}
</style>
</head>
<body>
<div id="content">
<div class="order">
<div class="label">Web Order#: </div>
<div id="orderno" runat="server" class="value"></div>
</div>
<div class="error">
<div class="label">Message: </div>
<div class="value">
<asp:Label ID="lblOrderError" runat="server" Visible="false"></asp:Label></div>
</div>
</div>
</body>
</html>
And the code behind:
Partial Class order_error
Inherits System.Web.UI.Page
Protected Sub Page_Load(sender As Object, e As EventArgs) Handles Me.Load
Dim siteKey As String = String.Empty
Dim orderId As String = String.Empty
siteKey = Request.QueryString("site").Trim
orderId = Request.QueryString("order").Trim
Me.lblOrderError.Text = Functions.GetAXErrorMessage(siteKey, orderId)
Me.orderno.InnerText = orderId.Trim
lblOrderError.Visible = True
End Sub
End Class
The output html of order-error.aspx:
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<div id="content">
<div class="order">
<div class="label">Web Order#: </div>
<div id="orderno" class="value">A1G759</div>
</div>
<div class="error">
<div class="label">Message: </div>
<div class="value">
<span id="lblOrderError"><Fault xmlns="http://schemas.microsoft.com/dynamics/2008/01/documents/Fault">
<Code />
<Reason>
<Text xml:lang="EN-US">User is not authorized for this Endpoint.</Text>
</Reason>
</Fault></span></div>
</div>
</div>
<!-- Visual Studio Browser Link -->
<script type="application/json" id="__browserLink_initializationData">
{"appName":"Chrome","requestId":"757708942b1d4af892b199f3590d85f5"}
</script>
<script type="text/javascript" src="http://localhost:63737/17a3dfffdc8f48ad9496d260bd296120/browserLink" async="async"></script>
<!-- End Browser Link -->
</body>
</html>
The error is clearly caused by your AJAX call return HTML instead of JSON.
In the success handler you have $("#dialog").html(r.d);. Here you try to parse the output of the call (r) to an object (r.d forces this), which fails for obvious reasons.
You should return JSON from your AJAX method, possibly using an HTTP handler or WebAPI.