Sourcing a <p> from a .txt file. HTML - javascript

I'm currently coding a website on which I need to have a picture file and a txt file displayed on a HTML page that will vary by the date. I've got the picture set up, but I need to be able to show the contents of a txt file. I have it set up so that it will target a folder that is the number of the current month, then it will target a file that is the date. i.e. The variable image = "calendar/2/28.jpg" Here's the code, thanks:
http://pastebin.com/2LCT1qiG
*Note I'd rather not use anything besides javascript, HTML and CSS, but if jQuery or another language is necessary I will use that.

You can use ajax to fetch text file:
without jQuery it will be:
var request = new XMLHttpRequest();
request.onreadystatechange = function () {
var DONE = this.DONE || 4;
if (this.readyState === DONE){
document.getElementById("dailyText").innerHTML = request.responseText;
}
};
request.open('GET', 'calendar/'+today+'.txt', true);
request.setRequestHeader('X-Requested-With', 'XMLHttpRequest');
request.send(null);
if you use jQuery the code will be much shorter:
$.get('calendar/'+today+'.txt', function(text) {
$('#dailyText').html(text);
});

Related

Using CefSharp and a SchemeHandler how to create a Javascript File()

On a website I am automating with the help of Cefsharp I have the need to provide a javascript File.File(). The file I want to give it is locally saved and could be anything from pdfs to office documents or images. As far as CefSharp is concerned I have implemented a ISchemeHandlerFactory and ResourceHandler adding a test:// scheme and for example I have successfully added a JS file like this.
var head = document.head;
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = 'test://local/folder/mytest.js';
head.appendChild(script);
According to the API to create a file I need
bits - An Array of ArrayBuffer, ArrayBufferView, Blob, or DOMString objects — or a mix of any such objects. This is the file content encoded as UTF-8.
So I have my scheme of test:// to give me a local file what do I need to use in javascript to get this into a file?
I worked it. I first tried a fetch but that would not let me use a custom scheme. So I had to use XMLHttpRequest
(function loadDoc() {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
var contentType = xhttp.getResponseHeader("Content-Type");
var file = new File([this.response],'3Markets.xlsx', {type: contentType,});
//use my new file etc
}
};
xhttp.open('GET', 'test://local/folder/3Markets.xlsx', true);
xhttp.responseType = "arraybuffer";
xhttp.send();
})()
The only issue or worry i have is I currently have to call
CefCommandLineArgs.Add("disable-web-security", "disable-web-security")
which i will have to have a look around how I can achieve this without disabling web security or eventually ask a question here.

Ajax request for file to be processed in JS on client-side

This is a very general question:
I would like to download a file from the server that is only available after some input-dependent processing was done on the server via an AJAX request (e.g. using jQuery). However, I don't want to pass that file explicitly to the user as a download in the browser.
Instead, I would like to use the file for displaying some figures, which I want to create on the client-side in JavaScript because they are dynamic (specifically, can be modified by the user with sliders). As a backend, I am using Django.
Any thoughts/code on how to do this exactly, or alternatively reasons why the pipeline I imagine is not a good idea?
This code retrieves a photo as a blob from he server and then sets SRC to it when/where needed.
xmlhttp.open('GET', PHOTO_URL, true);
xmlhttp.responseType = 'blob';
xmlhttp.onreadystatechange = function () {
if (xmlhttp.readyState == 4) {
if (xmlhttp.status == 200) {
var blob = xmlhttp.response;
photoImg.src = window.URL.createObjectURL(blob);
setTimeout(setOnCampusImage,0);
} else {
photoImg.src = 'unknown.png';
}
}
}

javascript - reading in an external local .txt file to load data into an array

I currently have javascript code (please see below) that searches an array for a month/day combination, and if it is found, assigns the name of a .jpg file (which is used for the background image of a page). Instead of hard-coding all of the data in the array, I'd like to be able to create an external .txt file with month/day codes and associated image file names, that could be read and loaded into the array. Thanks for your help!
var ourdates = ['0000','0118','0215','0530','0614','0704','0911','1111','1207']
if (ourdates.indexOf(monthday) != -1)
{
ourimage = "flag";
}
If you mean loading it from your server, that's a classic use-case for ajax, frequently combined with JSON:
var ourdates = null;
var xhr = new XMLHttpRequest();
xhr.open("GET", "/path/to/your/data");
xhr.onreadystatechange = function() {
if (xhr.readyState == 4 && xhr.status == 200) {
ourdates = JSON.parse(xhr.responseText);
// call something that uses `ourdates`
}
};
xhr.send(null)
If you mean from the user's computer, my answer here shows how to do that with the File API. Doing that requires an <input type="file"> input (or drag-and-drop event) that the user uses to grant access to the file to your script. You can't read a file from their machine without them specifically giving you access to the file.

Read directory contents using Javascript locally

I have a standard folder structure for a web app.
css
js
img
asetts
lib
index.html
Inside my assets folder I have a bunch of plain text files and I would like to first be able to list the filenames using Javascript, so I can store the URI's in the model, and read from them later on the in the application. I want all of this happening client side.
(Client-side) JavaScript does not have access to the file system like that.
This is not possible without some kind of browser plugin.
You can read the textfiles in the local folder.
function read()
{
var xHR = new XMLHttpRequest();
//replace textfile_url with the relative url of your text file
xHR.open("GET", "textfile_url", true);
xHR.onreadystatechange = function ()
{
if(xHR.readyState === 4)
{
//all your text is in the next line
var text = xHR.responseText;
}
}
xHR.send();
}

loading html into another html with javascript (without external files)

I have a code which I used to load external files into a html. How can I do it without importing external files or any libraries, so inside html I can type a short script and it will load another page?
i use this script so far:
$(document).ready(function(){
$('#outer').load('html_file.html');
});
but it requires to have additional files + libraries. How can I do everything directly in html?
Any ideas?
basically I want to include the whole another website inside the new one, but I can use only html + javascript inside the html file. All css files will be stored and reffered in the imported file.
Use this "html":
<script type="text/javascript">
window.onload = function() {
var xhr = window.XMLHttpRequest ? new XMLHttpRequest : new ActiveXObject("Microsoft.XMLHTTP");
xhr.open("GET", "html_file.html", false);
xhr.onreadystatechange = function() {
if (xhr.readyState === 4) {
document.getElementById("outer").innerHTML = xhr.responseText;
}
};
xhr.send(null);
};
</script>

Categories

Resources