why onreadystatechange function don't work in Windows - javascript

I was working on ubuntu, the script work very vell.
in Both OS he call the script but in windows he don't entre to the onreadystatechange function
Here is my script and the HTML.
function readTextFile(file,str)
{
var rawFile = new XMLHttpRequest();
rawFile.open("GET", file, false);
rawFile.onreadystatechange = function ()
{
if(rawFile.readyState === 4)
{
if(rawFile.status === 200 || rawFile.status == 0)
{
var allText = rawFile.responseText;
if(allText.search(str) != -1){
alert("exist");
alert(location.pathname);
}else{
alert("not exist");
}
}
}
}
rawFile.send(null);
}
<html><head>
<meta http-equiv="content-type" content="text/html; charset=windows-1252">
<title>Title</title>
<script language="Javascript" src="C:/Users/to125286/Desktop/python_scraping/js/search.js"></script>
</head>
<body>
<div>
<form name="search" onsubmit="return readTextFile('file:///C:/Users/to125286/Desktop/python_scraping/web/All-html.txt',this.string.value);">
<input name="string" onchange="n = 0;">
<input type="submit" value="Go">
</form>
</div>
<table border="1" cellspacing="2" cellpadding="3">
<tbody>
<tr>
<th>Member Name</th>
<th>Birth-Death</th>
</tr>
<tr>
<td>ADAMS, George Madison</td>
<td>1837-1920</td>
</tr>
<tr>
<td>ALBERT, William Julian</td>
<td>1816-1879</td>
</tr>
<tr>
<td>ALBRIGHT, Charles</td>
<td>1830-1880</td>
</tr>
</tbody>
</table>
<h1>Member</h1>
</body>
i want to know if that have any relation with OS
you have ant idea why?
Thank you!

You're trying to read a file on disk (file:/// URL) using XMLHttpRequest. Many web browsers prevent this, as it can be a security risk. It is possible that whatever browser you are using on Windows is preventing it.
If you are using Chrome, you can:
IMPORTANT: Close all other Chrome windows. Make sure that no instance of chrome.exe is running, or this trick won't work.
Launch chrome.exe with the --allow-file-access-from-files command line option to temporarily disable the restriction.
Open the HTML file.

Related

How can i change the behaviour of my XSLT sheet based on the value of the parameter my HTML passes to it?

i'm working with XML, XSLT, HTML, and javascript.
the xml document i'm using has this format:
<allstops>
<stop number="2504" name="Main & Bainard EB">
<location>
<latitude>42.91033567</latitude>
<longitude>-81.29671483</longitude>
</location>
<routes>28</routes>
</stop>
with many instances of an identical structure to the above.
I am using an html file to accept user input:
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<h2>enter the LTC route number you are interested in and click Update to see stops on that route</h2>
<h3>leave field blank and click Update to see all stops</h3>
<!--form elements-->
<input type="text" id="userInput"/>
<input type="submit" value="Update" onclick="RenderXSLT()"/>
<!--create the div that will contain the xslt output-->
<div id="xsltOutput"></div>
<!--inline script-->
<script type="text/javascript">
function loadXMLDoc(filename)
{
if (window.ActiveXObject) {
xhttp = new ActiveXObject("Msxml2.XMLHTTP");
}
else {
xhttp = new XMLHttpRequest();
}
xhttp.open("GET", filename, false);
try {
xhttp.responseType = "msxml-document"
}
catch (err) { }
xhttp.send("");
return xhttp.responseXML;
}
function RenderXSLT() {
xml = loadXMLDoc("ltcstops.xml");
xslt = loadXMLDoc("busStops.xslt");
var input = document.getElementById("userInput").value;
input = input.toLowerCase();
//add leading 0 on single digit
if (input.length == 1)
{
input = "0" + input;
}
if (window.ActiveXObject || xhttp.responseType == "msxml-document") {
// This code is for Internet Explorer
var template = new ActiveXObject("Msxml2.XslTemplate.6.0");
template.stylesheet = xslt;
var proc = template.createProcessor();
proc.input = xml;
proc.addParameter("route", input);
proc.transform();
document.getElementById("xsltOutput").innerHTML = proc.output;
}
else if (typeof XSLTProcessor !== 'undefined') {
// This code is for other browsers
var xsltProcessor = new XSLTProcessor();
xsltProcessor.importStylesheet(xslt);
xsltProcessor.setParameter(null, "route", input);
var resultDocument = xsltProcessor.transformToFragment(xml, document);
document.getElementById("xsltOutput").innerHTML = "";
document.getElementById("xsltOutput").appendChild(resultDocument);
}
}
</script>
and the following is my XSLT:
<?xml version="1.0" encoding="utf-8"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
xmlns:msxsl="urn:schemas-microsoft-com:xslt" exclude-result-prefixes="msxsl"
>
<xsl:output method="html" indent="yes"/>
<xsl:param name="route" select="routes"/>
<xsl:template match="/">
<h1 id="header">
There are <xsl:value-of select="count(//stop[contains(routes, $route)])"></xsl:value-of> stops on route #<xsl:value-of select="$route"></xsl:value-of>
</h1>
<table border="1">
<tr>
<th style="text-align:left">Stop #</th>
<th style="text-align:left">Stop name</th>
<th style="text-align:left">Latitude</th>
<th style="text-align:left">Longitude</th>
<th style="text-align:left">Routes</th>
</tr>
<xsl:apply-templates select=".//stop[contains(./routes, $route)]">
<xsl:sort select="./#number" data-type="number" order="ascending"/>
</xsl:apply-templates>
</table>
</xsl:template>
<xsl:template match="stop">
<tr>
<td>
<xsl:value-of select="#number"/>
</td>
<td>
<xsl:value-of select="#name"/>
</td>
<td>
<xsl:value-of select="location/latitude"/>
</td>
<td>
<xsl:value-of select="location/longitude"/>
</td>
<td>
<xsl:value-of select="routes"/>
</td>
</tr>
</xsl:template>
</xsl:stylesheet>
The purpose of this exercise is to accept the user input to search the XML for a particular route number, and then display information about that route to a table. My code currently does the bulk of the work - I can successfully find the route with my XSLT template and I have added a small piece of code to ensure that the user input cannot confuse the XSLT contains() by user input of a single digit.
I would like to be able to change the message in my header (which is generated in the XSLT) if the user leaves the field blank. Can anyone advise me on how to start changing my XSLT so that it will react differently if the input field is null?
Any advice appreciated. thank you in advance for your time and energy
I would suggest starting with this question/answer as this is how I handle this kind of thing with my code. Check if a string is null or empty in XSLT

JavaScript Functions & Equations

I'm trying to complete a simple multiplication problem of an input and a number already there (5.49) using JavaScript and the Compute function. I have it inside of a table and am using internal css for the structure of the page.
My problem is the when I press the compute button on the page, the answer to the equation (input)*5.49 doesn't come up, but instead nothing does. I'm struggling to find mistake.
Additional Notes: I've already checked to see if the compute button was working by replacing the formula with a pop-up box and it was working.
<!DOCTYPE html>
<html>
<head>
<title>Project</title>
<style type="text" /css>
.inbox { width=30px; text-align: right; border: 2px solid black; } .align { text-align: right }
</style>
<script type="text/javascript">
function compute() {
var a = form1.inputA.value;
a = parseFloat(a);
var b = form1.inputB.value;
b = parseFloat(b);
var c = form1.inputC.value;
c = parseFloat(c);
var e = a * 5.49;
form1.sumA.value = e.toFixed(2);
}
function pageInit() {
form1.inputA.focus();
}
</script>
</head>
<body onload="pageInit();">
<form id="form1">
<table border="2">
<tr>
<th colspan="4">Sample Order Form</th>
</tr>
<tr>
<th>Quantity</th>
<th>item</th>
<th>Unit Price</th>
<th>Totals</th>
</tr>
<tr>
<th>
<input tabindex="1" class="inbox" type="text" id="inputA" />
</th>
<th>Apples</th>
<td>$5.49</td>
<th>
<input class="inbox" type="text" id="sumA" readonly="readonly" />
</th>
</tr>
<tr>
<th>
<input tabindex="4" type="button" value="Compute" onclick="compute();" />
</th>
</tr>
</table>
</form>
</body>
</html>
The fields inputB and inputC just don't exist. Then it produce an error.
function compute() {
var a = form1.inputA.value;
a = parseFloat(a);
var e = a * 5.49;
form1.sumA.value = e.toFixed(2);
}
You can use web developer tools to analyze your code.
Modern web browser have tools like that.
Take a look at google chrome developer tools : https://developer.chrome.com/devtools for example. You can find equivalent tools for firefox and Internet Explorer.

Microsoft JScript runtime error Win CE hand held scanner

I have the below piece of code which runs great on all browsers down to IE5.
<form action="/scanners/picking_list.php" method="POST" name="the_form" onsubmit="return getInputsByValue();">
<table id="the_table">
<tr>
<td><input type="checkbox" name="picking_list[]" value="910774" data-src="MAN-910774" checked></td>
<td><span class="popup-handler" onclick="toggle_popup('DN.MAN-910774')">MAN-910774</span></td>
<td>test</td>
</tr>
<tr>
<td colspan="3"><input type="submit" value="Pick Despatches" name="submit"></td>
</tr>
</table>
</form>
<p id="MAN-910774" style="display: none;">DN.MAN-910774 Picking Notes:\n\nTESTING COMMENT</p>
<script>
function getInputsByValue()
{
var inputs = document.getElementsByName("picking_list[]");
var index;
for (index = 0; index < inputs.length; index++) {
if (inputs[index].checked) {
var dataSrc = document.getElementsByName("picking_list[]")[index].getAttribute("data-src");
console.log(dataSrc);
if (document.getElementById(dataSrc)) {
var commentSrc = document.getElementById(dataSrc).innerHTML;
console.log(commentSrc);
if (!confirm(commentSrc)) return false;
}
}
}
return true;
}
</script>
What it does is loop through the checkboxes and see if they're checked. If they are, it then adds the comment which is the hidden p tag and creates an alert popup.
When I run this on a hand-held scanner running Windows CE I get the following message:
Microsoft JScript runtime error
Line: 4 Character: 4
Error: Object doesn't support this property or method
Source: (null)

XHTML button only works in IE 6/7/8

I don't know a whole lot and I'm still learning HTML, so I am hoping someone can help me figure out why this code my predecessor wrote only works in IE 6,7, and 8.
It's a simple script that upon entry of a phone number is supposed to provide access to an online application written in PHP. Only, in every browser but IE 6/7/8 it just doesn't do anything once clicked.
The code is below:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><!-- <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> -->
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Online Application</title>
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7"/>
<script type='text/javascript' src='dFilter.js'>
</script>
<style type="text/css">
/*<![CDATA[*/
table.c3 {background-color: #CCCCCC}
span.c2 {font-size: 120%}
h3.c1 {color: white; font-family: Arial; font-style: italic; font-weight: bold; text-align: center}
/*]]>*/
</style>
</head>
<body>
<h3 class="c1">Company Name</h3>
<script language='Javascript' type="text/javascript">
//<![CDATA[
function getinfo(txt){
if ((document.enterid.HPhone.value == '') || (document.enterid.HPhone.value == "() -") || (document.enterid.HPhone.value == "(000) 000-0000") || (document.enterid.HPhone.value == "(111) 111-1111") || (document.enterid.HPhone.value == "(222) 222-2222") || (document.enterid.HPhone.value == "(333) 333-3333") || (document.enterid.HPhone.value == "(444) 444-4444") || (document.enterid.HPhone.value == "(555) 555-5555") || (document.enterid.HPhone.value == "(666) 666-6666") || (document.enterid.HPhone.value == "(777) 777-7777") || (document.enterid.HPhone.value == "(888) 888-8888") || (document.enterid.HPhone.value == "(999) 999-9999") || (document.enterid.HPhone.value == "(123) 456-7890")) {
alert('Please enter yourhome phone number');
document.enterid.HPhone.focus();
return;
}
document.getElementById('myssn').value = document.enterid.HPhone.value
document.getElementById('enterid').submit()
}
//]]>
</script>
<form name="enterid" method="post" action="apply.php" id="enterid"><input type="hidden" name="myssn" value=""/>
<table class="c3" width="60%" border="1" align="center">
<tr>
<td>
<table width="100%" border="0">
<tr>
<td></td>
</tr>
<tr>
<td align="center">Please enter your home phone number: <input type="text" name="HPhone" onkeydown="javascript:return dFilter (event.keyCode, this, '(###) ###-####');" value="" maxlength="14"/></td>
</tr>
<tr>
<td align="center"><input name="btnstart" type="button" value="Get Application" onclick="getinfo('Hello')"/></td>
</tr>
<tr>
<td></td>
</tr>
<tr>
<td align="center">Company link</td>
</tr>
<tr>
<td align="center"><em><strong><span class="c2">You must be using Internet Explorer version 6, 7 or 8 to apply online.</span></strong></em></td>
</tr>
<tr>
<td align="center">Please note the page does <strong>NOT</strong> work with Mozilla, Firefox, Safari, Chrome, etc.</td>
</tr>
<tr>
<td align="center">text</a>.</td>
</tr>
</table>
</form>
</td>
</tr>
</table>
</body>
</html>
I'm going to assume that all the extra newlines in your getinfo() function are the result of copy/pasting the code.
For example, this:
"(111)
111-1111")
Should be on a single line.
Next up: You're using this to get the form value: document.enterid.HPhone.
However, this input isn't inside the form. I can't imagine this working in any browser, but I maybe IE does some special magic-foo and guesses the correct element anyway.
You didn't post the full page, but moving your closing </form> below the closing </table> should fix it, assuming this is the only form in that table
Edit after new code
My browser's error console gives me the following error when I try to submit your form:
Error thrown at line 1, column 12 in <anonymous function>(event) in file://localhost/home/martin/a.html:
return dFilter(event.keyCode, this, '(###) ###-####');
Uncaught exception: TypeError: Cannot convert 'document.getElementById('myssn')' to object
document.getElementById('myssn')' apparently returns null?
Searching your document for myssn reveals:
<input type="hidden" name="myssn" value=""/>
This element has the name attribute set, but not the id; as the name implies, document.getElementById only gets element by the id attribute, so let's update this element:
<input type="hidden" name="myssn" value="" id="myssn" />
Now, I don't see any error, and get redirected to apply.php
P.S.
I lied a little bit. I also get another error because the function dFilter isn't defined, this is loaded through the external dFilter.js script. I created my own little version of it.
P.P.S.
You should really learn about the error console! All browsers have one, and it's an extremely useful tool! You can access with with F12 or CTRL+SHIFT+I, depending on your browser.

Jsfiddle code not working in localhost wamp

i have implemented validation for fundtransfer in jsfiddle.
it works fine in jsfiddle but not working in localhost.
i am using wamp.
here is my jsfiddle link - http://jsfiddle.net/BzdfN/31/
but when i am implementing this in localhost.its not working.
my html code is
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="validate.js"></script>
<title> Infy Bank Fund Transfer Entry Page </title>
</head>
<body>
<table class="layout" border="0" width="90%" align="center">
<form name="addcust" method ="POST" action ="http://localhost:8080/myapp/jsp/AddCustomerJSP.jsp">
<td colspan="2">
<table border="0" width="70%" align="center">
<tr>
<td align="center" colspan="2">
<div class="heading2">Infy Bank</div>
</td>
</tr>
<tr>
<td align="center" colspan="2"><p class="heading3">Fund transfer</p></td>
</tr>
<tr>
</tr>
<tr>
</tr>
<tr>
<td>Payers account no<span class="mandatory">*</span></td>
<td><input type="text" name="text10" id="text10" size="25" />
<div width="100%" id="equal"></div>
</td>
</tr>
<!--<tr>
<td>Payees account no<span class="mandatory">*</span></td>
<td>
<input type="text" name="name" value=2008 maxlength="25">
</td>
</tr>
<tr>
<td>Amount<span class="mandatory">*</span></td><td><input type="text" Value=500 name="state" maxlength="25"></td>
</tr>
<tr>
<td>Description<span class="mandatory">*</span></td><td><input type="text" name="pin" value=self maxlength="6"></td>
</tr>
<tr>
<td><span class="mandatory">*mandatory field</span></td>
<td><input type="submit" name="AccSubmit" value="Submit" onClick="return validatebal();">
<input type="reset" name="res" value="Reset"></td>
</tr>-->
</form>
</table>
<p align="right">Home</p>
</body>
</html>
and my validate.js is
$("#text10").keyup(function(){
$("#text10").blur();
$("#text10").focus();
});
$("#text10").change(function(){
var name = $('#text10').val();
var numbers = /^[0-9]+$/;
var specialChars = "<>#!#$%^&*()_+[]{}?:;|'\"\\,./~`-=";
if (name == "" || name == " " )
{
$("#equal").show();
$("#equal a").html("please enter account number");
}
else if(name.match(numbers))
{
$("#equal").hide();
$("#equal a").html("correct account number"); // alert('All Boxes have elements.');
}
else if(name.match(specialChars))
{
$("#equal").show();
$("#equal a").html("correct account number"); // alert('All Boxes have elements.');
}
else
{
$("#equal").show();
$("#equal a").html("please check your account number correctly");
}
});
So guys can you what i am doing wrong.
please help
start your jQuery with:
$( document ).ready(function() {
.../ and end with:
});
maybe this will solve your problem
In jsfFiddle your code is executed on the onload event.
But with including validate.js in the head the content of the script is execute right at the place where you placed <script src="validate.js"></script>. So your jQuery selectors don't find any elements, because they are not in the DOM at the time the script is executed.
You have different possibilities.
Wrap the content of your validate.js into jQuery(function() { /*your code of validate.js **/ })
Another possibility is to place <script src="validate.js"></script> at the end of your document instead placing it in the head.
You can use delegated events like $(document).on("keyup","#text10", function() { /* .... */ }); that way it does not matter if #text10 is in the DOM at this time.
wrap your validate.js code in jQuery ready function as follows should solve the issue:
$(document).ready(function() {
// validate.js code
});

Categories

Resources