So I am working on a project for my rPi which collects network speed information and logs it in a webserver locally. The Script is working all fine, but for some reason the JQuery code runs differently in Windows (where it read a file and displayed correctly) as in my rpi. Let me explain: The file is modified every so often to change what is displayed in the webserver so it is up-to-date. For some reason, without modifying anything, the JQuery code reads the file incorrectly (old data after changing the file, even after restarting the whole program). I have even tried to move the file out of the dir it was in, to verify that there wasn't any other duplicate file, and there wasn't another.
This is the HTML file
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script src='jquery-3.6.0.min.js'></script>
<script>
$.get('./assets/current.txt', function(data) {
var items = data.split(',');
$('#date').html(items[0]);
$('#ping').html(items[1]);
$('#download').html(items[2]);
$('#upload').html(items[3]);
})
</script>
<p>Date: <span id="date"></span></p>
<p>ping: <span id="ping"></span> ms</p>
<p>dowload: <span id="download"></span> MB/s</p>
<p>upload: <span id="upload"></span> MB/s</p>
</body>
</html>
This behaviour is possible if browser is caching the file. In order to force the file from server all the time extend the url as $.get('./assets/current.txt?_u='+Date.now(), function (){...})
Related
I have an HTML page with a script to auto-convert a Markdown file. The file is embedded between <zero-md></zero-md>, and does get converted successfully. Now the converted text has to be formatted by my custom stylesheet. As instructed by the script provider, I inserted a snippet that modifies the script's constructor to reference my CSS (to override the default theme). It fails to format the text. Here's my code:
<head>
<script type="module" src="https://cdn.jsdelivr.net/gh/zerodevx/zero-md#2/dist/zero-md.min.js"></script>
<script>
window.ZeroMdConfig = {
cssUrls: [
'style.css'
]
}
</script>
</head>
<body>
<zero-md src="content.md"></zero-md>
</body>
This is equivalent to:
<head>
<script type="module" src="https://cdn.jsdelivr.net/gh/zerodevx/zero-md#2/dist/zero-md.min.js"></script>
</head>
<body>
<zero-md src="content.md">
<template>
<link rel="stylesheet" href="style.css">
</template>
</zero-md>
</body>
Neither works for me.
The path to the css file is correct. Replacing <template><link rel="stylesheet" href="style.css"></template> with <template><style>...</style></template> (i.e. inserting the css code itself into <zero-md></zero-md>) does work, it does the formatting, but I want it to be an external file.
I'm previewing it with Visual Studio, opening the page in Chrome through a port. (Incidentally, when I open the page directly from the browser or drag-drop the HTML onto the browser instead of using VS's preview function, the conversion script fails, it doesn't display the text content of the Markdown file, for whatever reason.)
Any suggestion?
A bit late, but first things first - ZeroMdConfig should be defined before importing the module:
<head>
<script>
window.ZeroMdConfig = {
cssUrls: [
'style.css'
]
}
</script>
<script type="module" src=".../zero-md.min.js"></script>
</head>
You're right that the gist above is semantically equivalent to the one below:
<zero-md src="content.md">
<template>
<link rel="stylesheet" href="style.css">
</template>
</zero-md>
Second thing - if you're using an external stylesheet, that file must be hosted. All modern browsers won't allow a .html file to access the local filesystem for security reasons. So if you're dragging the the .html file into the browser window to open it, I'm quite certain it wouldn't work.
However, when you're previewing it from VSCode, internally VSCode actually launches a HTTP server that serves these files to you - this probably explains why your preview works.
Not sure how else I can help though - perhaps if you can explain your use-case in detail, I (or others) can give some suggestions.
I know there are other answers to this problem and I have tried them all. Is it possible to only use html to show csv data. So far the only solutions I can find are not working
My code is:
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
</head>
<body>
<h1> The message you want to send is <i><big><b>{{ message }}</b></big></i></h1>
<h1>You will send the message to these people</h1>
#I want to show the csv file here
<button> Send message to everyone in the list</button>
</body>
</html>
Your title asks about no server, and the question asks about html only. So, to answer both:
With HTML only you cannot get anything from anywhere. You need to add it manually.
Without a connection to a server, you would have to update the code manually every time the CSV file changes. If the CSV is hosted somewhere else, you can fetch using JavaScript. If the CSV is yours, you need to host it somewhere i.e. a server, to be able to access it.
I am trying to get a batch file to load in my head tag when I open my document
I have tried these and they don't seem to work:
<head onLoad="shutdown.bat">
<head onLoad="window.open('shutdown.bat')">
I've tried this as well putting it in to a function then calling it on load up
<head onLoad="shut">
<script>
function shut() {
}
</script>
</head>
I have made sure the batch file works by opening it as well
This is only possible to do when you are opening your HTML file through file:/// on your local computer. As soon as you host it on a server it will throw an error.
What you want to do though is this:
window.open("file:"///C:/Path/To/File/some_bat_file.bat"
Is there a simple way (or what could be the simplest way) to include a html-code fragment, which is stored in a text file, into a page code?
E.g. the text file fragment.txt contains this:
<b><i>External text</i></b>
And the page code should include this fragment "on the fly". (Without php ...?)
The Javascript approach seems to be the preferred one. But with the examples below you possibly can get problems with cross origin requests (localhost to internet and vice versa) or you can have security problems when including external scripts which are not served via HTTPS.
An inline solution without any external libraries would be:
<!DOCTYPE html>
<html>
<body>
<div id="textcontent"></div>
<script>
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
document.getElementById('textcontent').innerText = xhttp.responseText;
};
xhttp.open("GET", "content.txt", true);
xhttp.send();
</script>
</body>
</html>
Here you need a file content.txt in the same folder as the HTML file. The text file is loaded via AJAX and then put into the div with the id textcontent. Error handlings are not included in the example above. Details about XMLHttpRequest you can find at http://www.w3schools.com/xml/xml_http.asp.
EDIT:
As VKK mentioned in another answer, you need to put the files on a server to test it, otherwise you get Cross-Origin-Errors like XMLHttpRequest cannot load file:///D:/content.txt. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource.
You need to use Javascript to do this (or perhaps an iframe which I would avoid). I'd recommend using the JQuery framework. It provides a very simply DOM method (load) that allows you to load the contents of another file into an HTML element. This is really intended for AJAX calls, but it would work in your use case as well. The fragment.txt would need to be in the same server directory as the html page (if it's in a different directory just add on a path).
The load method is wrapped in the $(document).ready event handler since you can only access/edit the contents element after the DOM (a representation of the page) has been loaded.
Most browsers don't support local AJAX calls (the load method uses AJAX) - typically the HTML and txt files would be uploaded to a server and then the html file would be accesed on the client. Firefox does support local AJAX though, so if you want to test it locally use Firefox.
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-2.2.4.js"></script>
<script>
$(document).ready(function() {
$("#contents").load("fragment.txt");
});
</script>
</head>
<body>
<div id="contents"></div>
</body>
</html>
With javascript. I use it.
Example:
<!DOCTYPE html>
<html>
<script src="http://www.w3schools.com/lib/w3data.js"></script>
<body>
<div w3-include-html="content.html"></div>
<script>
w3IncludeHTML();
</script>
</body>
</html>
var fs = require('fs'); // require file system module
var http = require('http'); // require http module
http.createServer(function(request,response){
var newFile = fs.createWriteStream("readme_copy.txt");
request.pipe(newFile);
request.on('end',function(){response.end('uploaded')});
}).listen(8888);
I am trying to use this piece of code.I am uploading a file to node server and I am creating a new copy of the uploaded file.
I mentioned My HTML file below.It is hitting the server and uploading the file but the copy of file is empty.
If I am using curl in command prompt for uploading the same file it is working fine.
Any idea what I am missing??
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=ISO-8859-8">
</head>
<body>
<form action="http://localhost:8888/">
<input type="file" name="readme.txt" method="post" enctype="multipart/form-data">
<input type="submit">
</form>
<p><strong>Note:</strong> The accept attribute of the input tag is not supported in Internet Explorer 9 and earlier versions.</p>
<p><strong>Note:</strong> Because of security issues, this example will not allow you to upload files.</p>
</body>
</html>
Your Javascript is missing the actual piece that does the writing to the readme_copy file that you created by calling createWriteStream.
Here's an example of what you need to do:
http://www.html5rocks.com/en/tutorials/file/filesystem/