JavaScript - Error Reading Text File In Html 5/javascript.
Hi
I have written the following code to read contents of a text file using FileReader object of HTML 5 for Google Chrome. Quote: <script> function handle_files(files) { var i; if (checkBrowser("Chrome")) { for (i = 0; i < files.length; i++) { file = files[i]; var reader = new FileReader(); ret = []; reader.onload = function (e) { console.log(e.target.result) } reader.onerror = function (stuff) { console.log("error", stuff) console.log(stuff.getMessage()) } text = reader.readAsText(file[i]); alert(text); } } } </script> ---------------------- <input type="file" multiple="multiple" onchange="handle_files(this.files)"> Unfortunately, the variable text always displays as undefined. Everything above the line text = reader.readAsText(file[0]); works fine. How can I fix it?. Or is there any other solution to read a text file using HTML5/JavaScript on Chrome? Thanks in advance. Similar TutorialsSomebody had posted this query on how to read text files using JavaScript.......can't find that post now... Anyways, though it's not possible to read text-files using JavaScript it is possible to read XML files using it. Here is an XML based JavaScript Ticker http://www.dynamicdrive.com/dynamicindex2/xmlticker.htm It works only on browsers supporting XML (IE) Enjoy! Hi I'm reading a text file, manipulating the string that I've read, and then writing to a new text file called temp. The error that I am getting is basically reading past the end of the file. function SpaceFileEntries() { fso = new ActiveXObject("Scripting.FileSystemObject"); filename = "NDELPROF.txt"; path1 = document.getElementById("lblDataOutputDirectory").innerText + "\\" + filename; path2 = document.getElementById("lblDataOutputDirectory").innerText + "\\temp.txt"; s = fso.OpenTextFile(path1); j = fso.CreateTextFile(path2 , true); do { text = s.readLine(); partOne = text.substring(0,34); lastPart = text.substring(35, 54); space = " "; j.write(partOne); j.write(space); j.writeline(lastPart); } while ( text != null ) s.Close(); j.Close(); } Can someone please help me find this bug in the code. I know it's got to do with the while statement, but can't think or find good alternatives. Thanks. Daniel Dear frnd I wanna read on html page , and i have script : " [I]<html> <head> <script type="text/javascript" language="javascript"> function Read() { var Scr = new ActiveXObject("Scripting.FileSystemObject"); var CTF = Scr .OpenTextFile("C:\\123.txt", 1, true); data = CTF .ReadAll(); document.write("<pre>" + data + "</pre>"); CTF .Close(); } </script> </head> <body onLoad="Read()" > </body> </html> [I] " But as its using activex control not allowing in all browser . Have you any other way with pure js to read the file contains ? or allowing activex in all browser ? Hi all, How can i read CSV data from the text file using Java Script.Please give me the script for the problem. Thanx, Nari Hey guys, I'm writing a script and I've encountered a problem.. I have a txt file with many words, each word in a different line. For example: the file words.txt contains: word1 word2 word3 word4 word5 I need to load the content of the file into a variable in my script. I prefer that all the words will be in the same variable with line breaks, but if you'll figure out a way to put it in an array, it's ok too. I really don't know how to do it, and I tried to google but didn't understand.. By the way, I don't want to change the txt file to js file, I need it to remain txt.. Can anybody help me with that? Thanks Alot, Ran Does anyone know how to accomplish this? I got the html file to show but none of the text in the file will show.
Hi i am using javascript for the first time and i have a problem .I have 2 files html and javascript file in seperate but i donot know how to make them work .the code is down below .Thanks in advance for help. HTML <!DOCTYPE html> <html> <head> <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> <meta name="description" content="Instagram API - usage" /> <meta charset=utf-8 /> <title></title> </head> <body> <input id="lat_input" type="number" value="60.221374"/> <input id="lng_input" type="number" value="24.805391"/> <button id="search_location">Search</button><br/> <button id="get_popular">Get popular</button> <div id="images"></div> </body> </html> Javascript file // API DOCUMENTATION: // Instagram Developer Documentation var clientId = 'e7538f47e197479d8d32a63ae3ae4cd2'; $('#search_location').click(function () { getMediaByLocation($('#lat_input').val(), $('#lng_input').val()); }); $('#get_popular').click(function () { getPopularImages(); }); function getMediaByLocation(lat, lng) { var o = { lat: lat, lng: lng, client_id: clientId }; $.getJSON('https://api.instagram.com/v1/media/search?callback=?', o, function (response) { processImages(response.data); }); } function getPopularImages() { var o = { client_id: clientId }; $.getJSON('https://api.instagram.com/v1/media/popular?callback=?', o, function (response) { processImages(response.data); }); } function processImages(array) { $('#images').empty(); $.each(array, function (index, element) { var fs = $('<fieldset>').appendTo('#images'); $('<img>').attr('src', element.images.low_resolution.url).appendTo(fs); if (element.caption) { $('<pre>').text(element.caption.text).appendTo(fs); } $.each(element.comments.data, function (index, comment) { $('<pre>').text('Comment from ' + comment.from.full_name + ': ' + comment.text).appendTo(fs); }); }); } Hello, I am building a web application that has quotes on it. I am planning on having all the quotes stored in a .txt file. A line space would separate the quotes. Example: "Blah Blah" "Idk what blah" "sure you do" Would this be using Javascript to pull the quotes from the txt file for use in my page be best? I need it to pull all the quotes. Reason for having it like this, I am also planning on having a random quote page where it just pulls 1 quote instead of showing all of them. I'm also open to other ideas here! David Faircloth Im trying to use javascript to search a text file. text file is like this... 1111111[TAB]Project Name[TAB]Application1 2222222[TAB]Project Name[TAB]Application2 Im trying to get the javascript to let a user search for number or project name, if found it displays all the info if found. application1 or application2 (whatever is in the 3rd area) The text file can also be seperated by commas, either way is fine. can anyone help with this. ? Hello, i m new Javascript but knows basics of functions etc. ive created a website, which also has field to Submit Email addresses for newsletters.. Now, i have a TextBox (for users to write email addresses) and a Submit button in which i want to call a Javascipt script function which OnClick takes the value(email address) from the textbox and saves it to a .txt file on server. i think i am just missing a single line, the function name which will store the value.. i searched ovr the net but didnt find it.. plz help mee. Thankyou! hi, i want to create a extension for chrome using which i can save the current tab url in a text file. thanks sanjay i am thinking of using a xml file as a data base for example , the xml file stores a list of reference numbers which is allocated to a url or a name such as 0123456789 and i have a text box on a webpage and the user types in a reference number and the javascripts reads the xml file to check if its a valid reference number i.e a registered number i am new to working with xml etc... so would be nice to have a little help here EXAMPLE <DATA> <REF> <0123456789>JOE</01234567890> <1111111111>www.google.com</1111111111> </REF> </DATA> id like it to read the specific data thats contained within the tag such as 0123456789's tag = JOE Code: <html> <title> random!!</title> <head> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="jquery.min.js"></script> </head> <body> <div class="one" style="cursor: pointer;"> type1<br/><br/></div><div class="two" style="cursor: pointer;">type2<br/><br/></div><div class="three" style="cursor: pointer;">type3<br/><br/></div> <div class="oneone">atrdjgkhgfyfygfykfyfkygfvkgvkhgv</div><div class="twotwo">hgfihygohgohsgoihgolhgshgoshdgchchj</div><div class="threethree">siucgdiuhsbcohbscjbsidjcksjdnck</div> <script type="text/javascript"> $(document).ready(function() { $('div.twotwo').hide(); $('div.threethree').hide(); $('div.one').toggle(function() { $('div.twotwo').hide(); $('div.threethree').hide(); $('div.oneone').fadeIn('slow'); }, function() { return false; }); $('div.two').toggle(function() { $('div.oneone').hide(); $('div.threethree').hide(); $('div.twotwo').fadeIn('slow'); }, function() { return false; }); $('div.three').toggle(function() { $('div.twotwo').hide(); $('div.oneone').hide(); $('div.threethree').fadeIn('slow'); }, function() { return false; }); }); </script> </body> </html> The following code works perfectly when clicked once in each of the sub divisions(type1, type2, type3) for hide/show. But from the next time onwards we will have to click twice to initiate the hide/show. Can anyone suggest changes to make the code work as desired??.. P.S: sorry if i have made any stupid mistake.. i am quite new to this!! I'm trying to include an HTML/CSS Navigation Bar in a JavaScript file for easy editing (instead of going from page to page changing the same thing). This is the HTML & CSS I want to include in the JavaScript file: <a style="border-left: 1px solid white; padding: 5px" class=menu href="Index.html" title="Home"> Home</a><a class=menu href="menu1.html" title="Portfolio"> Portfolio</a><a class=menu href="menu2.html" title="About Us"> About Us</a><a class=menu href="menu3.html" title="Media"> Media</a><a class=menu href="menu4.html" title="Store"> Store</a><a class=menu href="menu5.html" title="Contact Us"> Contact Us</a> -If this isn't possible to do in JavaScript, then what language can I do it in? Thank you for reading. Hi, I'm currently working on my portfolio website and would like to have information about my movie clips be retrieved from an XML document when a thumbnail is clicked. I am building my website in HTML and would like to retrieve the Xml using JavaScript. Any help would be appreciated. My XML is valid and structured as such: <?xml version="1.0" encoding="UTF-8"?> <work> <motion> <reel> <title id="Demo Reel 2009" project="Self Promotion" client="Self"> <![CDATA[This demo reel is primaraly a collection ......]]> </title> </reel> . . . . These are my initial variable definitions and readXML function in javascript: <script language="javascript"> var xmldom, workNode, motionNode, printNode, fineartNode, displayNode, titleNode; function readXMLDocument() { xmldom=createDocument(); xmldom.async=false; if (xmldom.parseError != 0) { alert("An error occurred: \nError Code " + xmldom.parseError.errorCode + "\n" + "Line: " + xmldom.parseError.line + "\n" + "Line Pos: " + xmldom.parseError.linepos + "\n" + "Reason: " + xmldom.parseError.reason); } else { alert("Document: " + xmldom.documentElement); alert("Root: " + xmldom.documentElement.tagName); alert("Child: " + xmldom.documentElement.firstChild.tagName); alert("Xml DOM: " + xmldom.xml); } xmldom.load("workinfo.xml"); workNode=xmldom.documentElement; motionNode=workNode.firstChild; printNode=motionNode.nextSibling; fineartNode=printNode.nextSibling; } . . . . A call to function revealText is called "onClick" of a thumbnail as such: <a href="videopages/reel.html" class="vid" target="video" onClick="revealText(0)"> This is function revealText: function revealText(x) { var title, project, client, info; readXMLDocument(); displayNode=motionNode.childNode[x]; titleNode=displayNode.firstChild; title=titleNode.getAttribute("id"); project=titleNode.getAttribute("project"); client=titleNode.getAttribute("client"); info=titleNode.getNodeValue(); titleSpan.innerHTML=title; projectSpan.innerHTML=project; clientSpan.innerHTML=client; infoSpan.innerHTML=info; } </script> and these are the spans they are written to: <span id="titleSpan" class="vidinfo"> <span id="projectSpan" class="vidinfo"> <span id="clientSpan" class="vidinfo"> <p id="infoSpan" class="content"> If you have read this far, I REALLLLY appreciate it. And any ideas as to what is wrong would help alot. I included a js file into my html file. Everything work well in firefox but intenet explorer does not display my js file content. please helppp Js file // JavaScript Document document.write(<div class="RightSideGallerybox"> <div class="RightBoxContext">News</div> <div class="RightBoxPictures"><img src="../image/BotanicalTreeDecoration.jpg" /></div> <div class="RightBoxPictures"><img src="../image/IMG_3304.JPG" /></div> <div class="RightBoxPictures"><img src="../image/IMG_0297.JPG" width="150" height="100" /></div> <div class="ImportantRemarks">High School Admissions</div> <div class="ListOfRemarks"> <ul> <li>A. Phillip Randolph HS</li> <li>Astor Collegiate</li> <li>Aviation High School</li> <li>Bard College HS</li> <li>Bayside High School</li> </ul> </div> </div>); html file <div class="RightSideWrap"> <div class="footertext"> <script type="text/javascript" src="gallery.js"></script> </div> <!-------------------------------middle parts - right side--------------------------> </div> </div> Hi I have a large'ish project under development. The code below distills the problem I am having. In essence, I am trying to read in an XML file. It appears to load okay but when I try to count how many there are of a certain tag (The "Team" tag) I am told that there are zero. This is despite being told that that file loads okay (as the callback function is called). Javascript and the xml file is below. I hope that it is easy to follow. When the page is loaded, the initialize function is called. I first check my browser as I only need this to work on a Mozilla browser (I am using Mozilla Firefox 3.6.3). I then load the xml file and the callback function (fileLoaded) is called. I then try to find out how many "Team" tags I have, but get the message that there are zero. Sorry if this is a simple question but I have spent the best part of yesterday trying to get this to work. Any help would be appreciated. Thx G === 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" xml:lang="en" lang="en"> <head> <script type="text/javascript"> // Global variable so that everything can access it var xlmDoc; function initialize() { // This function gets called when the page loadds browserCheck(); xmlDoc=document.implementation.createDocument("", "doc", null) xmlDoc.load("small.xml"); // This file is shown at the end of this document, but it is a separate xml document xmlDoc.onload = fileLoaded; } // End of initialize function fileLoaded() { // Called when file is loaded (this does get called as expected) alert("File loaded"); var teams = xmlDoc.getElementsByTagName("Team"); var count = teams.length; alert("no of Teams: " + count); // This displays zero - WHY??? } // End of fileLoaded function browserCheck() { // START: This function just checks that I am using a Mozilla browser (I am) var moz = (typeof document.implementation != 'undefined') && (typeof document.implementation.createDocument != 'undefined'); if(moz) { alert("Mozilla"); } else {alert("Not Mozilla"); } } // End of browserCheck </script> </head> <body onload="initialize()"> </body> </html> === xml file === Code: <Root> <Team> <Type>GLF</Type> <Name>Verulam</Name> <Postcode>AL1 1JG</Postcode> <Page>693</Page> </Team> <Team> <Type>RFU</Type> <Name>London Manx RFC</Name> <Postcode>AL1 2DJ</Postcode> <Page>704</Page> </Team> <Team> <Type>RFU</Type> <Name>University of Hertfordshire RFC</Name> <Postcode>AL10 9AB</Postcode> <Page>729</Page> </Team> </Root> I have a Java Script that displays a Daily Affirmation on a webpage from an array of 365 Affirmations within the same html webpage file. This makes the html file size way too large. So I would like for the java script to read the array from an external text file on the same website server. Please provide me the Code to insert within my script which will read the array from an external text file - and also the format that the array of 365 lines must be typed into the external text file. I am not a Javascript Programmer - and know nothing about Javascript, so please write your reply at my (lack of) knowledge Level. Thank you in advance! Here is the code I am using. <script language=javascript> <!-- Date.prototype.getDOY = function() {var onejan = new Date(this.getFullYear(),0,1); return Math.ceil((this - onejan) / 86400000);} var today = new Date(); var DOY = today.getDOY(); var HL=new Array() //Configure the following array to hold the 365 HLs for each day of the year HL[1]='HL 1 goes here' HL[2]='HL 2 goes here' HL[3]='HL 3 goes here' // Jump to Day 224 of the year for this example only HL[224]='I am surrounding myself with positive and supportive people. When I nurture relationships that give me energy and enjoyment, I mirror my beliefs that I deserve such gifts.' HL[225]='Today I affirm my own worth and value, and discover that the world agrees with me.' HL[226]='I am sowing seeds based on a healthy belief in my own self-worth. My life is flourishing with growing love, contentment, and exciting possibilities.' HL[227]='HL 227 goes here' HL[228]='HL 228 goes here' // Jump to last HL for Day 365 of year - for this example only HL[365]='HL 365 goes here' document.write(HL[DOY]) //--> </script> I have some javascript which applies alternative row colors to a table and also gives you a highlight effect when you mouseover the rows. However, the problem I have is that it applies to every table on my page, I only want it to apply to a specific table in the html file (I'm using frontpage), not all of them How would I go about doing this? The code is below, it has a bit of styling at the top before the javascript. <style type="text/css" media="all"> table.altsrowtable { width: 90%; margin: auto; border-collapse: collapse} td { border: 1px solid black; cursorointer;text-align:center} /* row 1 */ tr td { background: #edf3fe; } tr:hover td, tr.ie td { background: #e1e1ff; } /* row 2 */ tr.bis td { background: #D9ECFF; } tr.bis:hover td, tr.bisie td { background: #e1e1ff; } /* selected row 1 */ tr.sel:hover td, tr.selie td { background: #edf3fe; } /* selected row 2 */ tr.selbis:hover td, tr.selbisie td { background: #D9ECFF; } </style> <script type="text/javascript" span="altsrowtables" div="altsrowtable" id="altsrowtable" class="altsrowtable"> var IE = false; /*@cc_on IE=true; @*/ var r; function setRows(){ r = document.getElementsByTagName('TR'); for(var i=0;i<r.length;i++) r[i].className = (i/2 != Math.round(i/2))? '':'bis'; } function selectRow(aRow,add){ var c = aRow.className; if(add) setRows(); var b = aRow.className; if(IE) aRow.className = b==''? 'selie' : b=='bis'? 'selbisie' : c=='selie'? 'ie' : c=='ie'? 'selie' : c=='bisie'? 'selbisie' : c=='selbisie'? 'bisie' : ''; else aRow.className = b==''||c==''? 'sel' : b=='bis'||c=='bis'? 'selbis' : c=='selbis'? 'bis' : ''; } // roll-over (only for IE) function roll(what) { var c = what.className; what.className = c==''? 'ie' : c=='bis'? 'bisie' : c=='bisie'? 'bis' : c=='selbis'? 'selbisie' : c=='selbisie'? 'selbis' : c=='selie'? 'sel' : c=='sel'? 'selie' : ''; } // fire on loading onload= function() { setRows(); for(var i=0;i<r.length;i++) { if(IE) { r[i].onmouseover = function(){ roll(this); } r[i].onmouseout = function(){ roll(this); } } } } </script> <style type="text/css"> table.altrowstable { font-family: calibri; font-size:11px; color:#333333; border-width: 1px; border-color: #C0C0C0; border-collapse: collapse; } table.altrowstable th { border-width: 1px; "background-image:url('QP Header.png');" border-style: solid; border-color: #C0C0C0; font-size:12px; font-style:bold; } table.altrowstable td { border-width: 1px; border-style: solid; border-color: #a9c6c9; } </style> Thanks Sean |