Linking Jquery mobile pages. One with user input and another with results - javascript

I have two pages one for a user to input a bus stop id. This bus stop id parses a live API. And one page for the results of that. The pages are showing on the single page at the moment. I want the user to get redirected to the second page. I have tired linking the pages but it did not work. ANy Suggestions?
<!DOCTYPE html>
<html lang="en">
<head>
<title>Dublin Concert Listings</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/custom.css" />
<link rel="stylesheet" href="css/theme.min.css" />
<link rel="stylesheet" href="css/jquery.mobile.icons.min.css" />
<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile.structure-1.4.5.min.css" />
<script type="text/javascript" src="jquery-3.3.1.min.js"></script>
</head>
<body class="ui-mobile-viewport ui-overlay-a">
<div data-role="page1">
<div data-role="content">
<div class="content-primary">
<table cellpadding="5" cellspacing="5" align="center" width="100%">
<tr>
<td align="center"><h1>Get Next Bus Details</h1></td>
</tr>
<tr>
<td align="center">
<div class="ui-input-search ui-shadow-inset ui-input-has-clear ui-body-inherit ui-corner-all">
<input data-type="search" placeholder="Bus Stop Id" id="bus_stop_id" name="bus_stop_id">
Clear text
</div>
<input type="button" value="Get Current Update" id="button_get_bus" style="background-color: #fff;padding: 8px;"></td>
</tr>
</table>
</div>
</div>
</div>
<div data-role="page" id="page2">
<div data-role="content">
<div class="content-primary">
<div id="resultDiv" style="display:none; padding-top:40px">
<table cellpadding="5" cellspacing="5" align="center" width="50%" style="border:solid 1px #fff; ">
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td><strong>From</strong> </td>
<td>: </td>
<td><span id="from"></span> </td>
</tr>
<tr>
<td><strong>To</strong> </td>
<td>: </td>
<td><span id="to"></span> </td>
</tr>
<tr>
<td><strong>Arival Date Time</strong> </td>
<td>: </td>
<td><span id="arival"></span> </td>
</tr>
<tr>
<td><strong>Departure Date Time</strong> </td>
<td>: </td>
<td><span id="departure"></span> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
</div>
</div>
</div>
</div>
<!-- end of pageone -->
<!--Loading scripts at bottom of the page-->
<div class="ui-loader ui-corner-all ui-body-a ui-loader-default"><span class="ui-icon-loading"></span>
<h1>loading</h1>
</div>
<div class="ui-panel-dismiss"></div>
<script type="text/javascript">
//On click of button this function get call
$('#button_get_bus').click(function(){
//Get Enter Bus Id
var bus_stop_id=document.getElementById("bus_stop_id").value;
//If Id is blank then given error
if(bus_stop_id=="")
{
alert("Please enter bus stop number");
return false;
}
// This Function post request to API with the given bus stop id
$.ajax({
url: "https://data.smartdublin.ie/cgi-bin/rtpi/realtimebusinformation?stopid="+bus_stop_id+"&format=json",
dataType: 'json',
success: function(results){
// It returnes json data
console.log(results);
var str = JSON.stringify(results);
// Code for parsing json and inserting data in html
var obj =jQuery.parseJSON(str);
var destination=obj.results[0].destination;
document.getElementById("to").innerHTML=destination;
var origin=obj.results[0].origin;
document.getElementById("from").innerHTML=origin;
var arrivaldatetime=obj.results[0].arrivaldatetime;
document.getElementById("arival").innerHTML=arrivaldatetime;
var departuredatetime=obj.results[0].departuredatetime;
document.getElementById("departure").innerHTML=departuredatetime;
document.getElementById("resultDiv").style.display="block";
}
});
});
</script>
</body>
</html>


Please see $.mobile.pageContainer.pagecontainer("change", "#page2"); in this example below:
//On click of button this function get call
$(document).on('click', '#button_get_bus', function() {
//Get Enter Bus Id
var bus_stop_id = document.getElementById("bus_stop_id").value;
//If Id is blank then given error
if (!bus_stop_id) {
alert("Please enter bus stop number");
return false;
}
// This Function post request to API with the given bus stop id
$.ajax({
url: "https://data.smartdublin.ie/cgi-bin/rtpi/realtimebusinformation?stopid=" + bus_stop_id + "&format=json",
dataType: 'json',
success: function(results) {
// It returnes json data
console.log(results);
var str = JSON.stringify(results);
// Code for parsing json and inserting data in html
var obj = jQuery.parseJSON(str);
var destination = obj.results[0].destination;
document.getElementById("to").innerHTML = destination;
var origin = obj.results[0].origin;
document.getElementById("from").innerHTML = origin;
var arrivaldatetime = obj.results[0].arrivaldatetime;
document.getElementById("arival").innerHTML = arrivaldatetime;
var departuredatetime = obj.results[0].departuredatetime;
document.getElementById("departure").innerHTML = departuredatetime;
document.getElementById("resultDiv").style.display = "block";
$.mobile.pageContainer.pagecontainer("change", "#page2");
}
});
});
<!DOCTYPE html>
<html lang="en">
<head>
<title>Dublin Concert Listings</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<link rel="stylesheet" href="css/theme.min.css" />
<link rel="stylesheet" href="css/jquery.mobile.icons.min.css" />
<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile.structure-1.4.5.min.css" />
<link rel="stylesheet" href="css/custom.css" />
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.js"></script>
</head>
<body>
<div data-role="page" id="page1">
<div class="ui-content">
<div class="content-primary">
<table cellpadding="5" cellspacing="5" align="center" width="100%">
<tr>
<td align="center"><h1>Get Next Bus Details</h1></td>
</tr>
<tr>
<td align="center">
<div class="ui-input-search ui-shadow-inset ui-input-has-clear ui-body-inherit ui-corner-all">
<input data-type="search" placeholder="Bus Stop Id" id="bus_stop_id" name="bus_stop_id">
Clear text
</div>
<input type="button" value="Get Current Update" id="button_get_bus" style="background-color: #fff;padding: 8px;"></td>
</tr>
</table>
</div>
</div>
</div>
<div data-role="page" id="page2">
<div data-role="header" data-add-back-btn="true"></div>
<div class="ui-content">
<div class="content-primary">
<div id="resultDiv" style="display:none; padding-top:40px">
<table cellpadding="5" cellspacing="5" align="center" width="50%" style="border:solid 1px #fff; ">
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td><strong>From</strong> </td>
<td>: </td>
<td><span id="from"></span> </td>
</tr>
<tr>
<td><strong>To</strong> </td>
<td>: </td>
<td><span id="to"></span> </td>
</tr>
<tr>
<td><strong>Arival Date Time</strong> </td>
<td>: </td>
<td><span id="arival"></span> </td>
</tr>
<tr>
<td><strong>Departure Date Time</strong> </td>
<td>: </td>
<td><span id="departure"></span> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
</div>
</div>
</div>
</div>
<!-- end of pageone -->
<!--Loading scripts at bottom of the page-->
<div class="ui-loader ui-corner-all ui-body-a ui-loader-default"><span class="ui-icon-loading"></span>
<h1>loading</h1>
</div>
<div class="ui-panel-dismiss"></div>
</body>
</html>


Remove your old jquery library and add the library before you start the script.You can add any of these following CDN to start it.
Google:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
Microsoft
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.min.js"></script>
your above example

Related

Take screenshot of element (jpg,png) and then download it. Javascript

I want to make a JS function which can take the screenshot from element and then download it.
<body>
<h1>Sample text</h1>
<h2>Sample text</h2>
<table width="1080px" height="1920px" border="1" style="border-collapse:collapse">
<tbody><tr>
<td colspan="2">
<img src="https://inspectiondoc.com/wp-content/uploads/2014/08/sample-icon.png" width="600px">
</td>
<td>
Sample text
</td>
</tr>
<tr style="background:#b6ff00">
<td>
Sample text
</td>
<td>
Sample text
</td>
<td>
Sample text
</td>
</tr>
</tbody></table>
<h1>
sample text
</h1>
<h2>Sample text</h2>
<br><br>
<input type="button" value="Capture" onclick="capture()">
</body>
After clicking capture button I want this td colspan="2" element to be screenshoted and downloaded on jpg or png format.

Using html2canvas could help you, it converts an element into a canvas, and then you just need to add its data as a url into an a element
function download(canvas, filename) {
const data = canvas.toDataURL("image/png;base64");
const donwloadLink = document.querySelector("#download");
donwloadLink.download = filename;
donwloadLink.href = data;
}
html2canvas(document.querySelector(".card")).then((canvas) => {
// document.body.appendChild(canvas);
download(canvas, "asd");
});
Check a full example here https://codepen.io/koseare/pen/NWpMjeP

Try with html2canvas;
<!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" />
<title>Document</title>
</head>
<body>
<div id="all">
<h2>Sample text</h2>
<table width="1080px" height="1920px" style="border-collapse: collapse">
<tbody>
<tr>
<td colspan="2">
<img
src="https://inspectiondoc.com/wp-content/uploads/2014/08/sample-icon.png"
width="600px"
/>
</td>
<td>Sample text</td>
</tr>
<tr style="background: #b6ff00">
<td>Sample text</td>
<td>Sample text</td>
<td>Sample text</td>
</tr>
</tbody>
</table>
</div>
<br />
<input type="button" id="btn" value="Download" />
<script>
document.getElementById("btn").addEventListener(
"click",
function () {
var text = document.getElementById("all").value;
var filename = "output.txt";
download(filename, function makeScreenshot() {
html2canvas(document.getElementById("screenshot"), {scale: 1}).then(canvas => {
document.body.appendChild(canvas);
});
});
},
false
);
</script>
</body>
</html>

jQuery Mobile can call my PHP program but Javascript won't run

I'm a newbie in jQuery, but I have been pulling my hair out over my scripts for the last 5 days and decided to ask you:
Here's a summary:
There are two files below: Hello.html calls Hi.php.
If you directly call the Hi.php from a browser, the JavaScript codes (calculate_cost() function in Hi.php) run just fine.
But if you call Hi.php from Hello.html thru its submit button, the
JavaScript codes (the calculate_cost() function in Hi.php) do not
work.
I think the jQuery 3.21 in the header in Hello.html may be causing this but I'm not sure, and I still need all of these scripts in the Hello.html file to let this code run on a mobile browser.
Would you please HELP me troubleshoot this so I will stop losing my hair any more? :-{
Test.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0">
<title>TEST</title>
<script src="http://code.jquery.com/jquery-3.2.1.js"></script>
<script src="http://code.jquery.com/jquery-migrate-3.0.0.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.js"></script> -->
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
</head>
<body>
<form action="Hi.php" method=POST>
<div data-role="page" id="P1">
<br><br>
<div data-role="header" align=center>
<font size=6>Enter your number</font>
</div>
<div data-role="content">
<br><br>
<center>
<input type="number" name="C1_TicketID" data-role="none" autofocus >　
<br><br>
　 Next 　
</center>
</div>
</div>
<div data-role="page" id="P2">
<br><br>
<div data-role="header">
<br><br>
<center>
<font size=6>Click the button below</font>
<br>
</center>
<br>
　Go Back　
</div>
<div data-role="content">
<br><br>
<center>
<br><br>
<input rel="external" data-ajax="false" target="mysite" data-role="none" type=submit name=submit value=" Submit ">
</center>
</div>
</div>
</form>
</body>
</html>
Following is my Hi.php script that is called by Hello.html above.
If you directly call Hi.php from a browser, JavaScript (calculate_cost() function) works just fine. But it doesn't work if you call Hi.php via Hello.html.
Hi.php (for simplicity, this program just dumps an HTML code)
<?php
echo <<<SHOW_ALL2
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Cache-Control" content="no-cache">
<meta http-equiv="Expires" content="0">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="http://code.jquery.com/jquery-3.2.1.js"></script>
<script src="http://code.jquery.com/jquery-migrate-3.0.0.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script>
function calculate_cost() {
var i1_price_unit = 5000;
var i1_price_qty = $('#i1_qty').val();
var i1_price_total = i1_price_unit * i1_price_qty;
var i1_point_unit =510;
var i1_point_qty = $('#i1_qty').val();
var i1_point_total = i1_point_unit * i1_point_qty;
var price_2 = 650;
var price_2_quantity = $('#qty2').val();
var total2 = price_2 * price_2_quantity;
var point_2 =60;
var point_2_quantity = $('#qty2').val();
var total_point_2 = point_2 * point_2_quantity;
var grand_price_total = (i1_price_total + total2).toFixed(0);
var grand_point_total = (i1_point_total + total_point_2).toFixed(0);
i1_price_subtotal = i1_price_total.toString().replace(/(\d)(?=(\d\d\d)+$)/g , '$1,');
$('#i1_price_subtotal').val(i1_price_subtotal);
//$('#i1_price_subtotal').val(i1_price_total);
$('#i1_point_subtotal').val(i1_point_total);
$('#i1_price_subtotal').attr('readonly',true);
$('#i1_point_subtotal').attr('readonly',true);
subtotal_line_2_price = total2.toString().replace(/(\d)(?=(\d\d\d)+$)/g , '$1,');
$('#subtotal_line_2_price').val(subtotal_line_2_price);
//$('#subtotal_line_2_price').val(total2);
$('#subtotal_line_2_point').val(total_point_2);
$('#subtotal_line_2_price').attr('readonly',true);
$('#subtotal_line_2_point').attr('readonly',true);
grand_price_total = grand_price_total.toString().replace(/(\d)(?=(\d\d\d)+$)/g , '$1,');
$('#Total').val(grand_price_total);
$('#Total').attr('readonly',true);
grand_point_total = grand_point_total.toString().replace(/(\d)(?=(\d\d\d)+$)/g , '$1,');
$('#Totalpoint').val(grand_point_total );
$('#Totalpoint').attr('readonly',true);
}
</script>
</head>
<body id=0>
<form action="Try3.php" method="POST">
<div data-role="page" id="pageone">
<div data-role="header" data-position="fixed" data-theme="b" >
<center><font size=4 color=#ffff00>Price list</font></center>
<table border=0 data-role="table" data-mode="table" class="ui-shadow" id="myTable" >
<thead>
<tr>
<th width=82 style="text-align:center;"><font size=2>SKU</font></th>
<th width=290 style="text-align:center;"><font size=2>Product name</font></th>
<th width=44 style="text-align:right;"><font size=2>Point </font></th>
<th width=84 style="text-align:right;"><font size=2>Price </font></th>
<th width=89 style="text-align:center;"><font size=2>QTy</font></th>
<th width=64 style="text-align:center; "><font size=2>Points</font></th>
<th style="text-align:center;"><font size=2>Sub Total</font></th>
</tr>
</thead>
</table>
</div>
<div data-role="main" class="ui-content">
<table border=0 data-role="table" data-mode="table" class="ui-shadow" id="myTable">
<tbody>
<tr>
<td width=52 style="vertical-align:middle;"><span id="0"><font size=2>Test_001</font></span></td>
<td width=276 style="vertical-align:middle;"><font size=2>Bigger Mac</font></td>
<td width=30 style="vertical-align:middle;text-align:right;"><font size=2><b>510</font></td>
<td width=70 style="vertical-align:middle;text-align:right;"><font size=2><b>$ 5,000</b></font></td>
<td width=70 style="vertical-align:middle;">
<select id="i1_qty" name="i1_qty" onChange="calculate_cost()" data-mini="true" style="width:100px;">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</td>
<td style="vertical-align:middle;text-align:center;">
<input type="text" id="i1_point_subtotal" name="subline1c" value="0" data-inline="true"
style="text-align:right;background-color:none;-webkit-appearance: none; size:1px;">
</td>
<td style="vertical-align:middle;text-align:center;">
<input type="text" id="i1_price_subtotal" name="subline1p" value="0" data-inline="true"
style="text-align:right;text-size:5;" data-shadow="false">
</td>
</tr>
<tr >
<td width=50 style="vertical-align:middle;"><span id=""><font size=2>Test_002</font></span></td>
<td width=250 style="vertical-align:middle;"><font size=2>Micro Softcream</font></td>
<td width=30 style="vertical-align:middle;text-align:right;"><font size=2><b>60</font></td>
<td width=70 style="vertical-align:middle;text-align:right;"><font size=2><b>$ 650</b></font></td>
<td width=75 >
<select id="qty2" name="qty2" onChange="calculate_cost()" data-mini="true">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</td>
<td width=50 style="vertical-align:middle;text-align:center;">
<input type="text" id="subtotal_line_2_point" name="subline2c" value="0"
data-inline="true" style="text-align:right;background-color:none;-webkit-appearance: none;">
</td>
<td style="vertical-align:middle;text-align:center;">
<input type="text" id="subtotal_line_2_price" name="subline2p" value="0"
data-inline="true" style="text-align:right;" data-shadow="false" >
</td>
</tr>
</tbody>
</table>
</div>
<div data-role="footer" data-position="fixed" data-theme="b">
<table border=0 cellpadding=0 cellspacing=0>
<tr>
<td width=5> </td>
<td width=230>
<a href="Try1.php" data-role="button" data-inline="true"
rel="external" style="background-color:#333366;">　 Start over 　</a>
</td>
<td width=80 ><font size=2>Grand Total</font></td>
<td width=130><input type="text" id="Total" name="TotalPrice" value="0"
data-inline="true" style="text-align:right;background-color:none;-webkit-appearance:none;width:130px;">
</td>
<td width=10></td>
<td width=125>
<table border=0 cellpadding=0 cellspacing=0>
<tr>
<td width=70 >
<input type="text" id="Totalpoint" name="Totalpoint" value="0" data-inline="true"
style="text-align:right;background-color:none;-webkit-appearance:none;width:80px;">
</td>
<td width=5> </td>
<td widht=50 >point</td>
</tr>
</table>
</td>
<td width=73> </td>
<td align=right >
<input type="submit" name="button" value=" Next " >
</td>
</tr>
</table>
</div>
</div>
</form>
</body>
</html>
SHOW_ALL2;

HTML: Totaling columns

I am taking in the data in from an sql statement and throwing it into a table.
I am trying to create a subtotal for the table that I can then send to a checkout page using a java servlet. Problem is that I am having issues getting the subtotal working after going through several examples on stackoverflow.
Thank you for your time.
<html>
<head>
<link rel="stylesheet" href="resources/css/main.css">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script type="text/javascript" src="resources/scripts/jquery-1.8.2.min.js"></script>
<title>Home Page</title>
</head>
<body>
<br>
<br>
<script>
(function (global) {
document.getElementById("output").value = global.localStorage.getItem("mySharedData");
}(window));
</script>
<sql:setDataSource var="snapshot" driver="com.mysql.jdbc.Driver"
url="jdbc:mysql://localhost:3306/sakila"
user="root" password="nbuser"/>
<sql:query dataSource="${snapshot}" var="result">
Select F.title, (F.rental_rate * F.rental_duration) as 'Price'
from cart as C
join cartofitems as CI
on CI.cart_id = C.cart_id
join film as F
on CI.film_id = F.film_id
</sql:query>
<div align="center">
<table width="850" style="BACKGROUND-COLOR: #FFFFFF;" border="1">
<tr>
<td align="center">
<img src="images/cart.png">
</td>
</tr>
<tr>
<td align="center" colspan="3">
<table width="650">
<tr>
<td>
<div align="justify" style="color:#3e160e;">
This is a custom HTML header. This header may contain any HTML code, text,
graphics, active content such as dropdown menus, java, javascript, or other
content that you would like to display at the top of your cart pages. You create
custom HTML header yourself and specify its location in the CustomCart Administrator.
Also note the custom wallpaper (brown striped background), this is uploaded via the
administrator. You may change the wallpaper any time you wish to change the look of
your cart.
</div>
</td>
</tr>
</table>
</td>
<tr>
<tr>
</tr>
</table>
</div>
<div align="center">
<form action="checkout.jsp" method="post" border="">
<table width="850" border="1" class="cart">
<thead>
<tr>
<th>Action</th>
<th>Movie Title</th>
<th>Price</th>
</tr>
</thead>
<tbody>
<c:forEach items="${result.rows}" var="cart">
<tr>
<td>Delete</td>
<td><c:out value="${cart.title}" /></td>
<td class="price"><c:out value="${cart.Price}" /></td>
</tr>
</c:forEach>
<tr class="totalColumn">
<td colspan="2" align="right" ><b>Subtotal: </b></td>
<td align="right" ><b><span id="subtotal"></span></b></td>
<script language="javascript" type="text/javascript">
var tds = document.getElementById('cart').getElementsByTagName('td');
var sum = 0;
for (var i = 0; i < tds.length; i++) {
if (tds[i].className == 'price') {
sum += isNaN(tds[i].innerHTML) ? 0 : parseInt(tds[i].innerHTML);
}
}
document.getElementById('price').innerHTML += '<tr><td>' + sum + '</td><td>total</td></tr>';
</script>
</tr>
</tbody>
</table>
<table width="850" border="1">
<tr>
<div style="width:650px;">
<button type="submit" name="your_name" value="totalCost" class="loginbtn">Checkout Cart</button>
</form>
<p><form action="faces/index.xhtml" method="post">
<button type="submit" name="your_name" value="your_value" class="adminloginbtn">Back To Search</button>
</form>
</div>
</tr>
</tbody>
</table>
</body>
</html>

loading a page in background are not inserting data in database

I have enroll.html page . The code of this page is as follows :
<HTML>
<HEAD>
<script src="https://code.jquery.com/jquery-2.2.3.min.js" integrity="sha256-a23g1Nt4dtEYOj7bR+vTu7+T8VP13humZFBJNIYoEJo=" crossorigin="anonymous"></script>
<META http-equiv=Content-Language content=en-us>
<META http-equiv=Content-Type content="text/html; charset=windows-1252">
<style TYPE="text/css">
<!-- BODY { font-family:arial,helvetica; margin-left:5; margin-top:0}
A { color:#FF5500; text-decoration:underline}
A:hover,A:active { color:#0055FF; text-decoration:underline}
-->
</style>
<Script Language="JavaScript">
<!--
function inStrGrp(src,reg)
{
var regex=new RegExp("[" + reg + "]","i");
return regex.test(src);
}
function check()
{
var uname=document.scan.elements[0].value
var bError=false
if (uname.length==0)
{
window.alert("Name is required.\n")
return false
}
if (uname.indexOf("\\")>=0)
bError=true
if (inStrGrp(uname,'/.:*?"<>| '))
bError=true
if (bError)
{
window.alert('User name can not contain the following characters:\n \\/. :*?"<>|\n')
return false
}
else
return true
}
-->
</Script>
<title>Enroll New Fingerprint.</title>
</HEAD>
<BODY onload="document.scan.name.focus();">
<center>
<table border="0" width="800">
<tr>
<td width="100%" colspan="3">
<p> </p>
<p><u><b>Online Demonstration</b></u></p>
<div align="center">
<table border="1" width="100%" height="260">
<tr>
<td width="20%" align="center" rowspan="2">
<p> </p>
<p><font color="#0055FF">Enroll</font></p>
<p>Logon</p>
<p> </p>
</td>
<td width="80%" height="30">
<b><i>Enroll Finger</i></b>
</td>
</tr>
<tr>
<td width="80%">
<p>Thanks for your registration. You can enroll two fingers for the name you registered.</p>
<form name="scan" method="POST" action="http://10.11.201.170/data/sultan/enroll.asp" onsubmit="return check()">
<p>Please input your name: <input type="text" name="name" size="20"> </p>
<p>If you want to enroll 2 fingers, please check the box. <input type="checkbox" name="chk2Finger" value="2"> </p>
<p>
<input type="submit" value=" Enroll " id="buttonEnroll" name="btnEnroll">
</form>
<div id="result"></div>
</td>
</tr>
</table>
</div>
<p> </p>
</td>
</tr>
<tr>
<td width="100%" colspan="3">
<p align="center"><small>Copyright © 2004 Futronic
Technology Company Limited. All Rights Reserved.</small></td>
</tr>
</table>
<script>
$("#buttonEnroll").on('click',function(e){
e.preventDefault();
$( "#result" ).load( "http://10.11.201.170/data/2/sysinfo1.asp" );
alert("Page loading completed");
});
</script>
</center>
</BODY>
</HTML>
I want to load sysinfo1.asp page when I press Enroll button . The code in this page insert data in database . The code of this page is as follows :
<HTML>
<HEAD>
<META http-equiv=Content-Language content=en-us>
<META http-equiv=Content-Type content="text/html; charset=windows-1252">
<style TYPE="text/css">
<!-- BODY { font-family:arial,helvetica; margin-left:5; margin-top:0}
A { color:#FF5500; text-decoration:underline}
A:hover,A:active { color:#0055FF; text-decoration:underline}
-->
</style>
<Script Language="VBScript" Src="GetInfo.vbs">
</Script>
<title>Enroll Fingerprint.</title>
</HEAD>
<BODY Onload="GetLearnModel()";>
<center>
<table border="0" width="800">
<tr>
<td width="100%" colspan="3">
<p> </p>
<p><u><b>Online Demonstration</b></u></p>
<div align="center">
<table border="1" width="100%" height="260">
<tr>
<td width="20%" align="center" rowspan="2">
<p> </p>
<p>Enroll</p>
<p>Logon</p>
<p> </p>
</td>
<td width="80%" height="30">
<b><i>Enroll Finger</i></b>
</td>
</tr>
<tr>
<td width="80%">
<Form name="scan" method="Post" action="famenroll2.asp?name=<%=Request("name")%>&check=<%=Request("check")%>&finger=<%=Request("finger")%>">
<Input type="hidden" name="LearnModel" value="">
<Input type="text" name="SlNo" value="">
</Form>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p><font size="5" color="#ff0000"><%=Request.Form("SlNo")%></font><font size="5"> Enroll Successfully!</font></p>
</td>
</tr>
</table>
</div>
<p> </p>
</td>
</tr>
<tr>
<td width="100%" colspan="3">
<p align="center"><small>Copyright © 2004 Futronic
Technology Company Limited. All Rights Reserved.</small></td>
</tr>
</table>
<% Dim Conn,strSQL,objExec,NumOfRecords,se_name,finger
cust_no=Request.QueryString("name")
Set Conn = Server.Createobject("ADODB.Connection")
Conn.Open "Driver={Oracle in XE};DBQ=xe;UID=biotpl;PWD=biotpl;"
'Query for the customer entry in FP_ENROLL Table
strSQL2 = "INSERT INTO TEST values(1,'OS')"
Set objExec = Conn.Execute(strSQL2)
'Query for the no of fingers to be taken for a customer in FP_FINGER_SETUP Table
'Set objExec = Conn.Execute("select FINGURE_NO NoF from BIOTPL.FP_FINGER_SETUP where USER_TYPE=" & Request.QueryString("cust_type") )
'NumOfFingers = objExec("NoF")
'Conn.Close()
Set objExec = Nothing
Set Conn = Nothing
%>
</center>
</BODY>
</HTML>
But the data is not inserted in the database . Why ? Is there any problem ?

Remove the following line from your Form
action="http://10.11.201.170/data/sultan/enroll.asp"
then it will work I guess.

HTML doesn't load after cache clear/hard reset but will successive times

So I'm working on a very simple web app. When I do a cache clear and hard reset, or I open the page in a different browser, it won't display everything. But then every refresh after that the display is fine. Is this something wrong with my code? Here's a copy of my HTML.
<!DOCTYPE html>
<html>
<head>
<title>Small Store</title>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<link type="text/css" rel="stylesheet" href="stylesheet.css" />
</head>
<body ng-app="myApp" ng-controller="store">
<div id="wrapper">
<div class="box" id="Store">
<table>
<thead>
<tr>
<td colspan="3" style="text-align:center">Store</td>
</tr>
</thead>
<tbody>
<tr>
<td><em>Item</em></td>
<td> </td>
<td><em>Price</em></td>
</tr>
<tr ng-repeat="item in store">
<td><b>{{item.Name}}</b></td>
<td> </td>
<td>{{item.Price|currency}}</td>
<td>
<button ng-disabled="store.money<item.Price" ng-click="buy(item)">Buy</button>
</td>
</tr>
</tbody>
</table>
</div>
<div class="box" id="Stock" ng-hide="stock.length===0">
<table>
<tbody>
<tr>
<td colspan="3" style="text-align:center">Stock</td>
</tr>
<tr>
<td><em>Item</em></td>
<td> </td>
<td><em>Quantity</em></td>
</tr>
<tr ng-repeat="item in stock" ng-hide="item.Quantity<1">
<td><b>{{item.Name}}</b></td>
<td> </td>
<td>{{item.Quantity}}</td>
<td>
<button ng-click="sell(item)">Sell</button>
</td>
</tr>
</tbody>
</table>
</div>
<div class="box" id="Cart" ng-hide="cart.length===0">
<!-- TO IMPLEMENT -->
</div>
</div>
<div id="Editor">
<!-- TO IMPLEMENT -->
</div>
<div id="money">
Remaining money: {{money|currency}}
<p>
<input type="checkbox" name="Edit" value="true"> Edit store
<br>
</p>
</div>
<script src="app.js"></script>
</body>
</html>
And here it is in codepen with the css and javascript. The error persists in codepen so I think the error is in my code but I'm not exactly sure..

Categories