Load data from text file with ajax/javascript into html problems - javascript

I want to load data from this text file that is in the same folder as the html file on my computer but it won't work. In process of learning Ajax and put together this little test for myself test.html and the text file test.txt. Any advice please, would be greatly appreciated.
<!DOCTYPE html>
<html>
<head>
<title>test</title>
<script>
function loadData()
{
var test;
test=new XMLHttpRequest();
test.onreadystatechange=function()
{
if (test.readyState==4 && test.status==200)
{
document.getElementById("test").innerHTML=test.responseText;
}
}
test.open("GET","test.txt",true);
test.send();
}
</script>
</head>
<body>
<div id="test"></div>
<button type="button" onclick="loadData()">Get data</button>
</body>
</html>
When I press the button, nothing happens. On the site where I saw a similar example the data from the text file is displayed above the button.


The problem is likely to be that you're accessing the files directly on your local system; web browsers have been designed not to allow this in order to prevent saved web pages loading personal files from your disks and uploading them to remote servers. In order to make it work, you'll need to run a web server locally and use that to view the files. I recommend the Apache web server, which is flexible and can be used on Windows, Linux or OSX.

Related

Stop cloudflare injecting HTML into my code

I have a few pieces of example JS and HTML that are stored in .js and .html files on my server. My server is run using cloudflare as a DNS server (I'm hosting it on my own server).
I read this code to display using code-prettify in my code, and it works in my local machine. When I push this code to my server, there are a few extra elements and additions to elements in my html.
This is the html file, and how it shows in the browser on my localhost
<!DOCTYPE html>
<html>
<script src="../../libraries/p5.min.js"</script>
<script src="../../libraries/p5.graphing.js"></script>
<script src="xySample.js"</script>
</html>
This is the html that displays when my server is through cloudflare
<!DOCTYPE html>
<html>
<script src="../../libraries/p5.min.js" type="5679b6186495861c611c81b4-text/javascript"></script>
<script src="../../libraries/p5.graphing.js" type="5679b6186495861c611c81b4-text/javascript"></script>
<script src="xySample.js" type="5679b6186495861c611c81b4-text/javascript"></script>
<script src="https://ajax.cloudflare.com/cdn-cgi/scripts/a2bd7673/cloudflare-static/rocket-loader.min.js" data-cf-settings="5679b6186495861c611c81b4-|49" defer=""></script>
</html>
On my cloudflare dashboard, I've been to the Page Rules tab and have passed in the url of both the HTML which my code should show up in as well as the location of the HTML thats being injected and disabled rocket loader for both. This didnt work, even after clearing cookies.
How do I stop this HTML injection by cloudflare. Thanks!

Just disable Rocket Loader in your Cloudflare dashboard

Having issues getting livejs.com

Having some issues getting the livejs.com script to automatically update web pages for changes made to HTML/CSS/Javascript. Below is my HTML on my localhost and it points to the web location of the script, which is accurate. Can you help me understand why my web pages don't update when I save my html?
<!DOCTYPE html>
<html>
<head>
<title>Page Title-Sam</title>
<script type="text/script" src="http://livejs.com/live.js"></script>
</head>
<body>
<h1>My First Heading adfasdfadf this is cool</h1>
<p>My first paragraph.</p>
</body>
</html>

Typo
type="text/script"
This is not a format of script that browsers recognise. It should be text/javascript.
In HTML 5 you should omit the attribute entirely.
Working locally
From the homepage:
Just include Live.js and it will monitor the current page including local CSS and Javascript by sending consecutive HEAD requests to the server.
If you are working from a local file (i.e. without a web server) then there is nowhere to make the HEAD request to. You need to be testing using HTTP(S).
Server support
The script checks a variety of headers, including Etag and Last-Modified. If your server doesn't set any of them for static files, it won't be able to tell when the file has updated.

Write file to dropbox via cronjob.de

I need to run code in javascript at specific time of a day. And every time when this script is triggered i need to save a file with some information.
So i figured out i'm gona use dropbox API to do that.
I have created new app in my dropbox account and generated token for it.
For test MY_SCRIPT.js looks like this:
var client = new Dropbox.Client({ token: "GENERATED_TOKEN" });
client.writeFile("FILE_NAME","DATA");
I have html file on the server (which i don't have access) with a structure like this:
<!DOCTYPE html>
<html>
<head>
<script language="javascript" src="//cdnjs.cloudflare.com/ajax/libs/dropbox.js/0.10.2/dropbox.min.js"></script>
</head>
<body>
<script language="javascript" src="//PATH/MY_SCRIPT.js"> </script>
</body>
</html>
When i run this html file on my web browser it works fine (new file in dropbox app folder is being created).
But when i put this html address in new cronjob (cronjob.de) new files are not being created. Why? I assume the problem is access to the dropbox API from cronjob server. But how i can handle this?

The problem is that cronjob.deuses an browser / command that won't evaluate javascript. (such as curl)
So your javascript code will never be executed.
You should rather use an backend such as phpto run tasks of this kind.

HTML, calling JS (API)

I have few issues with calling chessboard.js (http://chessboardjs.com). I downloaded API and made new HTML file:
<!DOCTYPE html>
<html>
<head>
<title>Super chess/title>
<meta charset="UTF-8"/>
<script src=":\path-to-js-file\jschessboard-0.3.0.js"></script>
</head>
<body bgcolor="lightgrey">
<div id="board" style="width: 400px"></div>
<script>
var board = new ChessBoard('board', 'start');
</script>
</body>
</html>
I tried to draw chessboard. What I'm doing wrong?
Thanks.

From what I can tell based on your code and the docs, you're missing two things:
1) Your title tag isn't closed on line 4 of your html file
2) After you've fixed that problem you'll get an error saying "$ isn't defined" in the chessboard.js file. I teased out that JQuery is a dependency for the chessboard.js file. If you include JQuery in your html (either download the file like you've done with chessboard.js or use a CDN).
You should be good after that!!

Update:
Tried almost everything, here is my local directory:
https://www.dropbox.com/sh/3unwsb8esh9100o/AADHEB8sojQy1PnpLyC8fmSLa?dl=0
I also downloaded jQuery to my local directory, but page still dosen't load. Dev tools in Chrome doesn't import anything.
And also tried with xampp (Apache server), because sometimes code doesn't work if you calling it from local directory.

Preview .doc/.docx/.pdf files before uploading to server

I'm using HTML5 File API to get some document(.doc/.docx/.pdf) uploaded. And I want to show that document preview before uploading it to server. Is there any way to do such thing on client side?
P.S. Google Docs Viewer isn't ok, because it requires document to be accessible from the internet.

I have tried to create little example and that would display PDF Preview before uploading PDF file.
<!DOCTYPE html>
<html lang="en">
<head>
<title>JavaScript PDF Viewer Demo</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
function PreviewImage() {
pdffile=document.getElementById("uploadPDF").files[0];
pdffile_url=URL.createObjectURL(pdffile);
$('#viewer').attr('src',pdffile_url);
}
</script>
</head>
<body>
<input id="uploadPDF" type="file" name="myPDF"/>
<input type="button" value="Preview" onclick="PreviewImage();" />
<div style="clear:both">
<iframe id="viewer" frameborder="0" scrolling="no" width="400" height="600"></iframe>
</div>
</body>
</html>

Not sure if anyone still checks this thread, but i thought i'd share what i did.
Directly showing a preview isn't possible, but you can create a blob object of the selected file. Something like this (jQuery):
$('#input').change(function (event) {
var file = URL.createObjectURL(event.target.files[0]);
$('element').append('' + event.target.files[0].name + '');
});
This link will open a new browser tab and shows/downloads the file. This isn't really pretty but it works.
Here's an example: https://jsfiddle.net/j9gw023b/3/

No. This is not possible.
You want the browser to view a datafile it shouldn't. You have Office or PDF viewers (OK, granted, PDF ssems to be inside browsers now...) to view your data files.
If you want to show a preview in the browser, you have to upload it first and store it in a "for-preview" dir or something. When OK, move it to its final destination, otherwise, delete.

The File API will allow you to read the data from the file, but then you have the trouble of parsing it and rendering it. Mozilla have released a JavaScript PDF viewer, but I'm not aware of anything for MS Office files.

Back in the days you were able to do something like that:
<object data="word.doc">You do not have Word installed on your machine</object>
Not sure if this is still supported, but if so, you could use JS to inject that object onto the page to preview it.

Ajax upload your file,then after uploaded return path name and preview it.
blueimp's jQuery-File-Upload was great for me.
you can view its basic plugin.
https://github.com/blueimp/jQuery-File-Upload/wiki/Basic-plugin

You can do it with pdf, here is the tutorial:
https://usefulangle.com/post/87/javascript-preview-pdf-during-upload
Don't know if it is possible for doc/docx

You can do it using this web component: https://avipunes.github.io/file-viewer/
This web component under the hood uses some microsoft embedding endpoint:
https://view.officeapps.live.com/op/embed.aspx?src=${fileURI}
you can see an example here:
https://view.officeapps.live.com/op/embed.aspx?src=https://file-examples-com.github.io/uploads/2017/02/file_example_XLS_10.xls

Categories