I have a JavaFX application that saves data to a local file data.json which, for example, looks like
data = '[{"name":"Jack","pet":"turtle"},{"name":"John","pet":"black mamba"}]'. Periodically the application adds more entries to this file.
In my html file that I am loading to that application I need to show all this info. I have a script tag that loads that file:
<script type="text/javascript" src="../Data/data.json" id="dataSourceScript"></script>
Then in js code I have var mydata = JSON.parse(data) which allows me to load that JSON into mydata variable as described here.
As I need to update the page content when new entries are added, I have a function I call every couple seconds with setInterval() that does that. In order to get the updated file info, I delete that old <script> tag and add a new one (exactly the same), but this means that data now has the updated info:
var oldScript = document.getElementById("dataSourceScript")
if(oldScript)
oldScript.remove()
var newScript = document.createElement("script")
newScript.setAttribute("id", "dataSourceScript")
newScript.setAttribute("src", "../Data/data.json")
document.body.appendChild(newScript)
var mydata = JSON.parse(data)
//then I just add the new entry to DOM, if there is a new entry
It all works great. If I open my html file in browser and then add a new entry to the file, in a few seconds the page gets updated and shows the new entry too. However, for some reason it does not work in my JavaFX application. It loads the file just once from the initial <script> tag, but if I change data.json file, nothing happens. I have to close the application and reopen it in order to get the new info shown on the page.
(I didn't find any other way to read a file that would work. FileReader just stops reading when a file gets updated, which defeats the purpose; fetch() and XMLHttpRequest() both get blocked by CORS policy; I cannot create a server to request files or install Node or anything else, I need pure html+js to be the UI)
Figured it out thanks to the comments, thanks guys.
Yes, the file I loaded from script tag was being cached and not being updated. A solution is very easy, I just needed to create a variable counter and add it as a version to the new script every time I create it, so it's considered a new one
var version = 0
...
var oldScript = document.getElementById("dataSourceScript")
if(oldScript)
oldScript.remove()
var newScript = document.createElement("script")
newScript.setAttribute("id", "dataSourceScript?version=" + version++)
newScript.setAttribute("src", "../Data/data.json")
document.body.appendChild(newScript)
var mydata = JSON.parse(data)
//then I just add the new entry to DOM, if there is a new entry
Related
I have a web server set up from my arduino and the web page is loaded from it. I use ajax to print the data in the web page.
Similarly I need to store the data in a local pc as a text file. I was successful initially in storing a text file, but the issue is that the data dosent get appended in the same file, there are multiple files created per instance.
Can someone help me in solving this issue. I'm restricted to use only javascript.
client.println("document.getElementById(\"flux_values_1\").innerHTML = this.responseText;");
client.println("var textToSave =[this.responseText]");
client.println("var textToSaveAsBlob = new Blob([textToSave], {type:'text/plain'});");
client.println("var textToSaveAsURL = URL.createObjectURL(textToSaveAsBlob);");
client.println("var fileNameToSaveAs = \"as\";");
client.println("var downloadLink = document.createElement(\"a\");");
client.println("downloadLink.download = fileNameToSaveAs;");
client.println("downloadLink.href = textToSaveAsURL;");
client.println("document.body.appendChild(downloadLink);");
client.println("downloadLink.click();");
Actually you are downloading the file in browser, you cannot append data in a file via browser, you have to do this in backend. Browser will always create a new file and download a new file. This is expected behaviour and cannot be changed.
I have written a script within a gsheet that can create a gdoc based on the information in a row in the spreadsheet.
I am then trying to create a PDF of the gdoc that has been generated by the script in the gsheet. I am trying to make this all one seamless function where the gdoc is created with the pertinent information and then a pdf is automatically created as well. However, the PDF generated is always just a blank page.
I am able to add a script to a gdoc that will function correctly and create a pdf version of itself (or another gdoc), but when I run a function from a gsheet, it is always just the blank one-page pdf, Does anybody know why this is happening, or have a solution?
Here is an example of one of the simpler scripts I've tried and works in the gdoc script - obviously when running it from the gsheet I have to know the ID first and then open the gdoc from that.
function convertPDF(docId)
{
var doc = DocumentApp.getActiveDocument();
var docId = doc.getId();
var docFolder = DriveApp.getFileById(docId).getParents().next().getId();
var docblob = DocumentApp.getActiveDocument().getAs('application/pdf');
docblob.setName(doc.getName() + ".pdf");
var file = DriveApp.createFile(docblob);
var fileId = file.getId();
}
Thanks!
Chris
I have a local text file which is kept changing by other programs. I want to write a html and javascript based web page to show the content of file dynamically. I have searched in google and found that most solutions require to get this text file via html element. I wonder if there is a way to get the file via a fixed path(lets say it is a string of the file directory) in javascript. I am using Javascript fileReader. Any help will be appreciated.
This is not possible using javascript running inside the browser. You will not be able to do anything outside the browser.
EDIT:
You could run a Node.js server though that runs on localhost and does your file operations you desire. You could build a API so your html page that you load in the browser calls your serverscript to do your file operations.
Do you understand what I mean?
How much information does the text file hold, Depending on your scenario it might be worth looking into javascript localstorage W3SCHOOLS local storage. Would that help your situation ?
What you can do is allow the user to choose the file of interest, using a file-input. Once done, the browser wil have access to the file, even though the JS wont have access to the file's full-path.
Once the user has chosen the file, you can reload it and refresh the view pretty-much as often as you please.
Here's a short demo, using a file input (<input type='file'/>) and an iframe. You can pick pretty much anything the browser will normally display, though there are limits on the size of the file that will work - due to the limit of the length of a URL - the file's data is turned into a data-url and that url is set as the source of the iframe.
As a demo, pick a file and then load it. Now, open the file in another program and change it. Finally, press the load button once again - the new content now fills the iframe. You can trigger the loading of the file by a timer or any other event in the page. As far as I'm aware, you cannot re-load it when it changes, since there's no notification from the OS - you have to use a button, timer, element event or whatever. Basically, you have to poll for changes.
<!DOCTYPE html>
<html>
<head>
<script>
function byId(e){return document.getElementById(e);}
window.addEventListener('load', onDocLoaded, false);
function onDocLoaded()
{
// uncomment this line for on-demand loading.
byId('loadBtn').addEventListener('click', onLoadBtnClick, false);
}
// fileVar is an object as returned by <input type='file'>
// tgtElem is an <iframe> or <img> element - can be on/off screen (doesn't need to be added to the DOM)
function loadFromFile(fileVar, tgtElem)
{
var fileReader = new FileReader();
fileReader.onload = onFileLoaded;
fileReader.readAsBinaryString(fileVar);
function onFileLoaded(fileLoadedEvent)
{
var result,data;
data = fileLoadedEvent.target.result;
result = "data:";
result += fileVar.type;
result += ";base64,";
result += btoa(data);
tgtElem.src = result;
}
}
function onLoadBtnClick(evt)
{
var fileInput = byId('mFileInput');
if (fileInput.files.length != 0)
{
var tgtElem = byId('tgt');
var curFile = fileInput.files[0];
loadFromFile(curFile, tgtElem);
}
}
</script>
<style>
</style>
</head>
<body>
<button id='loadBtn'>Load</button><input id='mFileInput' type='file'/><br>
<iframe id='tgt'></iframe>
</body>
</html>
you can use nodejs to watch for a filechange using watchfile module, if you just want to watch the filechange and its content. you can run following code using node, but it only consoles the file changed in your terminal.
var fs=require('fs');
fs.watchFile('message.text', function (curr, prev) { //listens to file change
fs.readFile('message.text', function(err,data){ //reads the file
console.log(data.toString()); //consoles the file content
});
});
I have a large JavaScript file that I'd rather not send to the client on each request and it's too large for the browser to cache.
My thought is that I will save the file to HTML5 local storage and attempt to retrieve it. If the file is found then I'd like to link/import/export(I don't know the proper terminology) it into the same scope that a html src tag would.
My question is: how do I take a file that I've pulled from local storage and get my webpage to recognize it as a JavaScript file that was included via src tag? (minus the logic for pulling the file from storage)
My question is: how do I take a file that I've pulled from local storage and get my webpage to recognize it as a JavaScript file that was included via src tag?
Two possible ways (amongst maybe others):
create a script element, and assign your JS code as the “text content” of that element before appending it to the DOM. “Text content” in quotes here, because it is not as simple as it sounds cross-browser – see f.e. Javascript script element set inner text, Executing elements inserted with .innerHTML, or
assign your script code to the src attribute of a script element via a Data URI, data:text/javascript,… – but that approach has several disadvantages as well, also mostly in older IE (size limitation; only “non-navigable” content, meaning no scripts). But depending on your target environment that might well work. You will not necessarily need to base64 encode the script code, URL-percent-encoding via encodeURIComponent should work as well.
Take a look at this:
http://jsfiddle.net/611e96mz/1/
var tag = getId('testjs'),
a = getId('a'),
b = getId('b'),
c = getId('c'),
script;
a.addEventListener('click', function () {
localStorage.setItem('js', tag.innerHTML);
});
b.addEventListener('click', function () {
script.textContent = localStorage.getItem('js');
});
c.addEventListener('click', function () {
document.body.appendChild(script);
alertMe();
});
var script = document.createElement("script");
script.type = "text/javascript";
function getId(x) {
return document.getElementById(x);
}
You can use JSON to stringfy your file content and put it on localstorage.
var content = JSON.stringify([1, "some info"]); // '[1,"some info"]'
localStorage.setItem('fileContent', content);
// Retrieve
var content = localStorage.getItem('fileContent');
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify
I'm trying to create a menu from an XML file. The HTML file that I want to create the menu in, is located my main project folder. This folder also contains an xml folder in which my xml file (fruitDB.xml) is located. I understood that there are several ways of loading XML files and that some ways only work online. Eventually the menu is used for an HTML5 mobile app (don't know if this is usefull information), build using Appcelerator.
I've read some sources but it's still not clear to me how I can load an XML file. I have the following code in my header tag:
<script type="text/javascript">
function init(){
var xmlhttp = new XMLHttpRequest();
xmlhttp.open("GET", "xml/fruitDB.xml", false);
xmlhttp.setRequestHeader('Content-Type', 'text/xml');
xmlhttp.send();
var xmlDoc = xmlhttp.responseXML;
var Fruits = xmlDoc[];
alert(Fruits);
for (var i = 0; i < Fruits.children.length; i++) {
alert("hi");
var Fruit = Fruits.children[i];
var Name = Fruits.getElementsByTagName("name");
var Thumb = Fruits.getElementsByTagName("image");
var list = document.getElementById("menuButtons");
var listEntry = document.createElement("LI");
listEntry.document.createTextNode(Name);
list.appendChild(listEntry);
}
}
</script>
What I try to do here is open the init(); function using , load the xml file, though I'm not sure if giving a path (like I'm doing) is correct. After the XML is loaded it should create new 's in my HTML file and give them name (and eventually an image) which are stored in the xml file until all items from the xml are placed as list items. Sorry for the long sentence :P.
At xmlhttp.send(); I recieved the following error in my console:
XMLHttpRequest cannot load file:///D:/folder/folder/folder/xml/fruitDB.xml. Received an invalid response. Origin 'null' is therefore not allowed access.
Does this mean that using XMLHttpRequest won't work on local files and if not what other way can I use in order to achieve my goal?
XML doesn't have great support in Titanium. Also XML is often a pain to work with..
Why not use a JSON payload / document instead!
Format the JSON so it is an array of fruit objects
Then you just parse the payload into a javascript object that comes back from the web-service or your local file something like this:
var fruits = JSON.parse(yourHTTPObj.responseData);
Now you can loop over the fruit objects and say:
if (fruits[i].type === 'Apple') { //do something };