I have the following code that works in chrome however does not work in FF or IE.
The code allows a user to select a text file and re-reads the contents every 10 seconds and updates the PRE tag with the contents of the text file.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Read text file every 10 seconds</title>
<script type="text/javascript">
var currentIntervalId = undefined;
var startOrRestart = function(that) {
if (currentIntervalId !== undefined) clearInterval(currentIntervalId);
readText(that); // For executing immediately
currentIntervalId = setInterval(function() { readText(that); }, 10000);
};
function readText(that){
if(that.files && that.files[0]){
//alert("hello");
var reader = new FileReader();
reader.onload = function (e) {
var contents = e.target.result;//.replace("\r\n","<br/>");
contents = contents.replace(/&/g, '&').replace(/</g, '<').replace(/>/g, '>').replace(/"/g, '"');
document.getElementById('board').innerHTML= contents;
};//end onload()
reader.readAsText(that.files[0]);
}//end if html5 filelist support
}
</script>
</head>
<body>
<input type="file" onchange='startOrRestart(this)' /> <hr />
<pre id="board" contenteditable = "true">
This is where the text from the chosen text file will be loaded.
</pre>
</body>
</html>
Can someone help get this to work in other browsers?
Thanks in advance.
When a file is selected the input has a snapshot of the contents at that point. Local changes on disk don't update the snapshot.
Chrome's implementation appears to break the spec so an example will work only in Chrome.
You can see another question with explanation here
Related
Can anyone please suggest any idea about how to open an Excel file, kindly check below code and let me know how to achieve opening the instead of downloading the file.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript">
function read()
{
var txtFile = new XMLHttpRequest();
txtFile.open("GET", "C:\Users\user-temp\Downloads\test.xlsx", true);
txtFile.onreadystatechange = function()
{
if (txtFile.readyState === 4)
{
// Makes sure the document is ready to parse.
if (txtFile.status === 200)
{
// Makes sure it's found the file.
document.getElementById("div").innerHTML = txtFile.responseText;
}
}
}
txtFile.send(null)
}
</script>
</head>
<body onload="read();">
<form id="form1" runat="server">
<div id="div">
</div>
</form>
in your case you can use following methodswith google viewer iframe:
<iframe src="http://docs.google.com/gview?url=https://sifr.in/img/292/1/courseAndroid.xlsx&embedded=true"></iframe>
or with microsoft viewer iframe:
<iframe src='https://view.officeapps.live.com/op/embed.aspx?src=https://sifr.in/img/292/1/courseAndroid.xlsx'></iframe>
or open it in another tab / window with following:
Open your excel file
credit must also go tothis guy
I have the following coffeescript code to generate and alert box:
show_alert = () ->
alert("Hello! I am an alert box!")
which compiles to:
(function() {
var show_alert;
show_alert = function() {
return alert("Hello! I am an alert box!");
};
}).call(this);
in my html I have the following
<input onclick='show_alert()' type='button' value='Show alert box' />
However, no alert box shows? The following is the html copied from the browser:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Test Rails Application</title>
<style type='text/css'>.application h1 {
color: lime; }
</style>
<script type='text/javascript'>(function() {
var show_alert;
show_alert = function() {
return alert("Hello! I am an alert box!");
};
}).call(this);
</script>
</head>
<body>
<h1>Hello from applicaiton.html.haml</h1>
<div class='application'><h1>Hello World</h1>
<input onclick='show_alert()' type='button' value='Show alert box' />
</div>
</body>
</html>
Why am I not able to get an alert box to show up?
Your problem is that the generated javascript code is in another scope. You have to solve this
by either adding the -b parameter to the coffeescript compiler or export your function
explicitly via
root = exports ? this
root.show_alert = () -> alert("Hello! I am an alert box!")
For more information about the exporting and scope issue have a look at https://stackoverflow.com/a/4215132/832273
I created a working jsfiddle with the above coffeescript code
I found two ways to solve this issue
FIRST add # before function name
#say_hi = () ->
$(alert('Hello!!!'))
SECOND at the end of coffee file add
window["say_hi"] = say_hi
in your coffeescrpt code, try to save the function to window: window["show_alert"] = show_alert
First let me thank you for the assistance, I am new to Javascript, and want to learn to parse a >.xml file into my javascript. The file I want to parse is contact.xml, located in my root folder.
Again, thank you.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1 /DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript">
function loadXMLDoc(XMLname)
{
var xmlDoc;
if (window.XMLHttpRequest)
{
xmlDoc=new window.XMLHttpRequest();
xmlDoc.open("GET",XMLname,false);
xmlDoc.send("");
return xmlDoc.responseXML;
}
// IE 5 and IE 6
else if (ActiveXObject("Microsoft.XMLDOM"))
{
xmlDoc=new ActiveXObject("Microsoft.XMLDOM");
xmlDoc.async=false;
xmlDoc.load(XMLname);
return xmlDoc;
}
alert("Error loading document!");
return null;
}
<title>Contacts</title>
</script>
</head>
<body>
<script type="text/javascript">
xmlDoc = loadXMLDoc("contactinfo.xml") // Path to the XML file;
var M = xmlDoc.getElementsByTagName("item");
for (i=0;i<M.length;i++){
document.write("<div style='width:450px;'>")
document.write("<h2>"+xmlDoc.getElementsByTagName("item")[i].childNodes[0].nodeValue+"</h2>");
document.write("<p>" + xmlDoc.getElementsByTagName("servicephone")[i].childNodes[0].nodeValue+ "</p>");
document.write("<p><a href='" + xmlDoc.getElementsByTagName("email")[i].childNodes[0].nodeValue +"</p>);
document.write("</div>")
}
</script>
</body>
</html>
*Here is my .xml file*
<?xml version="1.0" encoding="utf-8" ?>
<Contacts>
<item servicephone="(800) 500-0066"
email="customerservice#fsig.com"
url="http://www.fsig.com"
address="5000 Barcilona Beach Rd. Wilmington, NC 28000">
</item>
</Contacts>
You need to go down the hierarchy, so, first find the Contacts node, then inside there you can get all the tagnames as you have.
You have a great deal of attributes so you may find this useful also:
node.attributes["url"].nodeValue
So just loop through all the items, then I would just copy itemelem[t] to node just to make it easier, then you get the attributes you need.
Depending on the browser you are using most of them come with some javascript debugger, so you can put in breakpoints and look at the values in the variables and see what the next step needs to be.
Look at the below code, this JavaScript is used to take a string (in a language other than English) and convert it into English.
<script type="text/javascript">
google.load("language", "1");
function initialize() {
var content = document.getElementById('translation');
// Setting the text in the div.
content.innerHTML = '<div id="text">HELLO WORLD<\/div>
<div id="translation"/>';
// Grabbing the text to translate
var text = document.getElementById("text").innerHTML;
// Translate from Spanish to English, and have the callback of
// the request put the resulting translation in the
// "translation" div. Note: by putting in an empty string for
// the source language ('es') then the translation will
// auto-detect the source language.
google.language.translate(text, '', 'en', function(result) {
var translated = document.getElementById("translation");
if (result.translation) {
translated.innerHTML = result.translation;
}
});
}
google.setOnLoadCallback(initialize);
</script>
I want that the string "HELLO WORLD" must be entered by user at run time in a text field and then that string is passed to the div id text. So is this possible?
Hope you are referring to the document below:
http://code.google.com/apis/language/translate/v1/getting_started.html
Please refer to the section "Getting Started" where it says about "Signing up for an API key". This needs to be done before you could implement the code in your page.
Once done, make the modification to the script file which you include in the html page with your key.
Here, replace your key with "MY_KEY_STRING" in the bottom code and get started.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>Google AJAX Language API Sample</title>
<script src="https://www.google.com/jsapi?key=MY_KEY_STRING"></script>
<script type="text/javascript">
google.load("language", "1");
function initialize() {
//Show the translate button
document.getElementById("translateButton").style.display = "";
}
google.setOnLoadCallback(initialize);
function translate() {
var text = document.getElementById("fromText").value;
google.language.translate(text, 'es', 'en', function(result) {
var translated = document.getElementById("toText");
if (result.translation) {
translated.innerHTML = result.translation;
}
});
}
</script>
</head>
<body style="font-family: Arial;border: 0 none;">
From:<input type="text" id="fromText"/>
To:<span id="toText"></span>
<input type="button" value="Translate" onclick="translate()" style="display: none;" id="translateButton">
</body>
</html>
HTML:
<form id="translate">
<textarea id="translate-me"></textarea>
<input type="submit" />
</form>
JavaScript:
var form = document.getElementById('translate')
var textarea = document.getElementById('translate-me')
form.onsubmit = function () {
google.language.translate(textarea.value, ...)
return false; // prevent default action (form submission)
}
Using jQuery or something similar would make this easier, of course.
I am having problem with this error:
'undefined' is null or not an object'
Can you please have a look and let me know. In my coding, I want to have simple DOM JavaScript code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<script>
init();
function init()
{
getElementByTabIndex("4", "submit")[0].addEventListener("click", Verify, false);
}
function Verify() {
alert('done');
// all verification code will be here...
}
function getElementByTabIndex(index, type, node)
{
if (!node)
{
node = document.getElementsByTagName('body')[0];
}
var a = [];
els = node.getElementsByTagName('*');
for (var i = 0, j = els.length; i < j; i++)
{
if (els[i].tabIndex == index && els[i].type == type)
{
a.push(els[i]);
}
}
return a;
}
</script>
<body>
<input type="email" id="email" /><input type="password" id="pass" /> <label class="Login" for="login"><input value="Log In" tabindex="4" type="submit" id="login"></label>
</body>
</html>
You have to move you code at bottom or call init() after body is loaded.
Reason: you are trying to get elements even before they exists.
Eg :
<head>
<script>
var elm= document.getElementById('id');
//this will be always undefied, as trying to read element even before they exist
</script>
</head>
<body>
<div id='foo'></div>
<script>
var elm= document.getElementById('id');
//this wont be undefined
</script>
</body>
You call:
if (!node) {
node = document.getElementsByTagName('body')[0];
}
But your script runs before the DOM has finished loading, and so the body tag does not exist.
So node is undefined, and when you attempt the following, you get your error:
node.getElementsByTagName('*');
Run init() on document load, instead of immediately.
PS. jsfiddle and Firebug allowed me to debug this very quickly.
'body' isn't available to javascript at the time you are trying to call init().
call your init method when the dom has finished loading, like so:
window.onload = function (){
init();
}
note that in order to make this work across browsers (if you plan on using it outside your planned Safari extention) you will have to do some extra work. more info: http://www.javascriptkit.com/dhtmltutors/domready.shtml