I am trying to read a file while using google charts. It first read he data from a text file and then create chart using that data.
I wrote this code in JS for this purpose
function readTextFile(file){
var rawFile = new XMLHttpRequest();
rawFile.open("GET", file, false); // using synchronous call
var allText;
alert("Starting to read text");
rawFile.onreadystatechange = function ()
{
alert("I am here");
if(rawFile.readyState === 4)
{
if(rawFile.status === 200 || rawFile.status == 0)
{
allText = rawFile.responseText;
}
}
}
rawFile.send(null);
alert(allText);
return allText;
}
The problem is : this method is getting called, but the control is not going in
rawFile.onreadystatechange = function ()
{ ... }
Do anyone have any idea regarding this?
Thanks in advance!
note: I am sending the file name in the parameter (file). I am not passing the address as both this HTML file and the text file are in the same folder.
update 1: I printed rawFile.readyState , and it always shows 1 which means server connection established. My code is a simple HTML code, not using any server for this purpose.
update 2: I tried adding file:/// before the file name that is not working too :(
I made the call asynchronous.
rawFile.open("GET", file, true);
Now it is working
Related
I am making a javascript library(hopefully I can complete it), and so I want to know the name of the sites that are using the script. I made an XML file <?xml version="1.0" encoding="UTF-8"?> <logs> <sites></sites> </logs>, with this code. I have the following code in the javascript library:
waste.runner = function(){
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
myFunction(this);
}
};
xhttp.open("GET", "logs.xml", true);
xhttp.send();
function myFunction(xml) {
var xmlDoc = xml.responseXML;
var x;
x = xmlDoc.getElementsByTagName("logs")[0].getElementsByClassName('sites');
x.nodeValue += "site:"+window.location.href+";";
}
}
I looked through countless sites but none of them solve the problem, and I have reached this code. Is there any way I can change the data of an XML file using HTML and javascript?
Js can't do that.
The change happens within the browser, and it remains there.
You should make a request to the server and send the name of the website, and the server should save the input in some file or db.
I advice you to use the fetch API instead of XHR.
Your js will be:
fetch('example.php?website='+window.location.href)
inside fetch you will put the name of a file on your server.
I know there are several questions how to save changes in an XML file using Javascript, and the obvious answer is: use a server side language such as PHP.
In my case, the XML file is in the same directory as my html file locally on my computer, not on any server.
In my index.html I access the alphabets.xml this way:
function getAlphabets() {
var xhttp;var result;
xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
result = findAlphabets(this);
console.log(result);
}
};
xhttp.open("GET", "alphabets.xml", true);
xhttp.send();
}
I want to change some data in the xml file, and save it back there. Is there any possible way to do so in plain javascript?
Or another way, not using a server side language?
So I know this is so lame to ask this question as I have spent a day searching on this subject without any success. As many others, I'm facing the crossdomain problem. The suggestion I see everywhere is to update the JSON file on a server or use localhost which I can't use because my assignment is not allowed to do so.
I am posting this question hoping there is some other solution for this.
I need to fetch data from a JSON file locally using pure JavasSript and Ajax which does not involve hosting on a server nor localhost (using absolute path is also a bad idea).
This is my code so far:
function loadJSON(callback) {
var xobj = new XMLHttpRequest();
xobj.overrideMimeType("application/json");
xobj.open('GET', '/json/userinfo.json', true);
xobj.onreadystatechange = function () {
if (xobj.readyState == 4 && xobj.status == "200") {
callback(xobj.responseText);
}
};
xobj.send(null);
}
(function() {
loadJSON(function(response){
var actual_JSON = JSON.parse(response);
console.log(actual_JSON);
})
})()
You won't be able to access local files using AJAX/XHR. Its not designed for this purpose.
What you can do is assign your json data into a variable in the json file,
var data = [{
}];
and then load your json file using script tag like below:
<script type="text/javascript" src="file_name.json"></script>
Now all the json data can be accessed using the data variable.
I am following an old stackoverflow post on how to read in a text file using javascript seen here: Javascript - read local text file
and I cannot get it to work. I am very new to javascript and all I want to do is store the file to a var and display it on screen so I know it is being read in and split correctly. What am I doing wrong? I know there are many new ways to do this but this is a very early attempt at javascript for me and I found this code to be the most readable example I found online. Im not sure if it matters but the file im trying to read from is about 300 pages of gps data.
I tried:
pasting the file path into my browser (works fine)
removing the state and status checks (no difference.... and bad practice I know)
changing browsers (no difference, though I have been using Chrome)
var allText;
function readTextFile(file)
{
var rawFile = new XMLHttpRequest();
rawFile.open("GET", file, false);
rawFile.onreadystatechange = function ()
{
if(rawFile.readyState === 4)
{
if(rawFile.status === 200 || rawFile.status == 0)
{
allText = rawFile.responseText;
alert(allText);
}
}
}
rawFile.send(null);
}
readTextFile("file:////var/www/html/gpsPoints.txt");
locations=allText.split(",");
I have a php script to delete an old instance of a csv file and upload a new one and a javascript function to read the file. It was working fine until I added the php to delete the old file, and now for some reason the javascript function always fetches the same file even when it's changed.
I've gone in and checked the data.csv file and it's the new file but the function still fetches the old one. And if I delete the file manually the function still mysteriously accesses the data.csv file... even though it's deleted.
This is the php:
<?php
if(file_exists('upload/data.csv'))
{
unlink('upload/data.csv'); // deletes file
}
$tmp_file_name = $_FILES['Filedata']['tmp_name'];
$ok = move_uploaded_file($tmp_file_name, 'upload/data.csv');
?>
This is the javascript. Note: the variable "allText" will always be the contents of the old CSV file even if data.csv has changed or is deleted.
function LoadCSV(){
var txtFile = new XMLHttpRequest();
txtFile.open("GET", "http://****.com/mailer/upload/data.csv", 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.
allText = txtFile.responseText;
ProcessCSV(allText);
}
}
}
txtFile.send(null);
}
I'm not sure why this is happening or how to fix it?
It's probably browser caching.
I like to use a random value in the url to trick the browser into thinking it is a different page:
Try this:
function LoadCSV() {
var txtFile = new XMLHttpRequest();
txtFile.open("GET", "http://****.com/mailer/upload/data.csv?nocache="+(Math.random()+'').replace('.',''), 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.
allText = txtFile.responseText;
ProcessCSV(allText);
}
}
}
txtFile.send(null);
}
The get parameter nochache doesn't mean anything to the server or browser, but fools it into fetching a new resource every time, at the cost of losing browser caching altogether. Technically it's possible(although spectacularly unlikely) to get the same value twice, so you can add time in milliseconds or something if you want to make it totally foolproof.
Note that this will also bypass almost all other types of caches as well.