I'm using ajax to update a value without refreshing the page.
When I use this html code the website gives an 404 not found error. But when I leave the script tag out of the html, the site works fine and show the p tag. What am i doing wrong in the script tag?
<!DOCTYPE html>
<html lang="nl">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Smart_home</title>
</head>
<body>
<div id="verbruik">
<p></p>
</div>
<script>
function loadDoc() {
const xhttp = new XMLHttpRequest();
xhttp.onload = function () {
document.getElementById("verbruik").innerHTML =
this.responseText;
}
xhttp.open("GET", "/home/pi/smart_home/ajax_info.txt", true);
xhttp.send();
setTimeout(loadDoc, 2000);
}
loadDoc();
</script>
</body>
</html>
Related
I am trying to include a partial on the page with my backend coming later. I want to use an event listener button. It dosent work. I am using express.ejs and node.js with vanilla js.
I am using this for my vanilla js
const button = document.getElementById('button')
button.addEventListener('click',()=>{
const hi = document.createElement(`<%-require('../views/partials/hi.ejs')%>`)
document.appendChild(hi)
})
this for my html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>hi</title>
<link rel="stylesheet" href="main.css">
</head>
<body>
<button id="button">Im a button</button>
<script src="main.js" type="module"></script>
</body>
</html>
and this for my node
const express = require('express')
const app = express()
app.set('view engine','ejs')
app.use(express.static('public'))
app.get('/',(req,res)=>{
res.render('layout')
})
app.listen(5000,()=>{
console.log('server listening')
})
I get this error when i try to use the partial with the button
main.js:4 Uncaught DOMException: Failed to execute 'createElement' on 'Document': The tag name provided ('<%-require('../views/partials/hi.ejs')%>') is not a valid name.
at HTMLButtonElement.<anonymous> (http://localhost:5000/main.js:4:25)
this comes from client side....why and how to fix?
I'm trying to get the HTML DOM from the following website: https://www.inputbcn.com/en/tickets#/events
The 'default' DOM of this website its the following:
<!doctype html>
<html lang="">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
</head>
<body>
<div id="xceed-widget"></div>
<script src="https://s3-eu-west-1.amazonaws.com/xceed-widget/2019-version/dist/loader.js" type="text/javascript"></script>
</body>
</html>
As you can see, when the page loads, a JavaScript script is called which will fill the page DOM.
I want to get the full page DOM after the script is executed and I'm using PhantomJS for this purpose. I began with the following code:
var page = require('webpage').create();
page.open("https://www.inputbcn.com/en/tickets#/events", function(status) {
console.log("Status: " + status);
if (status === "success") {
console.log(page.content);
}
});
But after executing this piece of code, I can see the response status fails.
How can I get the full document of this specific website?
NOTE: this answers did not help my purpose.
I am trying to render HTML with res.sendFile using absolute path but it is sending encoded HTML in a pre tag so the response shows HTML unrendered in a pre tag.
Here is my express code
app.get('/', (req,res) =>{
res.sendFile(__dirname+'/a.html');
});
and here is my html file
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<h1>I am Html</h1>
</body>
</html>
and here is the result when I navigate to localhost:8800/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<h1>I am Html</h1>
</body>
</html>
It prints the html as it is without rendering it.
You need to use res.render() to actually render the html.
I can't post a comment because I don't have enough reputation, but what I was going to say is that I ran your code on my system (OSX Mojave 10.14.6, Node v12.13.0, latest versions of Firefox and Chrome) with some additions to make it work (posted below), and didn't run into your problem. Perhaps you have some other code or middleware that you haven't posted. Also, you are correct that res.render is for templates.
const express = require('express');
const app = express();
const port = 3000;
const path = require('path');
app.get('/', (req, res) => {
res.sendFile(__dirname + '/a.html');
// better to use the path API, but both work
// res.sendFile(path.join(__dirname, 'a.html'));
});
app.listen(port, () => console.log(`Example app listening on port ${port}!`));
The HTML is the same. Folder structure is:
.
├── app.js
├── a.html
Could you post more details?
I created an iframe into which I can post formatted text (from a Word document for example) and receive it as html. Is it possible to also recieve the unformatted version (without the html tags), such as created when copying formatted text into a textarea?
My code for logging the html of formatted text:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script>
window.addEventListener("load", function () {
var editor = theWYSIWYG.document;
editor.designMode = 'on';
action.addEventListener('click', function() {
var formattedHTML = editor.body.innerHTML
console.log(formattedHTML);
}, false)
}, false)
</script>
</head>
<body>
<div id="textEditor">
<button id="action" title="Bold"><b>Click me</b></button>
<div id="richTextArea"></div>
<iframe id="theWYSIWYG" name="theWYSIWYG" frameborder="0"></iframe>
</div>
</body>
</html>
Technically I could ask the user to also paste the formatted text into a seperate textarea box, but I would prefer to do it in a single time.
Thanks in advance
Try this var text = editor.body.innerText || editor.body.textContent;
Taken from this answer https://stackoverflow.com/a/6743966/2668119
I am working on a simple webpage. I have a following sample json file and an HTML template
data.json
{
"NAME":"SAMPLE_NAME",
"ADDRESS":"New Brunswick Avenue"
}
index.html
<div class="name"></div>
<div class="address"></div>
So i have to display the name and address on the template reading from the json file. Is there any library that i can user for this or any other way to accomplish this?
I think you are looking for a compile-time templating or pre-compiled templating engine sort of thing.
You can build one your own with html, css and using javascript or jquery to change the text of certain elements, but this is going to take a long time if you have big pages.
However there is a library out there that does something like this and its called Handlebars.
Heres a link: http://berzniz.com/post/24743062344/handling-handlebarsjs-like-a-pro
This might give you an idea of what it does: What is the difference between handlebar.js and handlebar.runtime.js?
Here is an example using your html:
<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.12/handlebars.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<script>
// Load your html / template into this variable
var template = '<div class="name">{{name}}</div><div class="address">{{address}}</div>';
var jsonData = {
"name":"John",
"address": "City Street"
}
var compiledTemplate = Handlebars.compile(template);
// The output html is generated using
var html = compiledTemplate(jsonData);
document.getElementsByTagName('body')[0].innerHTML = html;
</script>
</body>
</html>
If you would rather write html outside of the javascript variables you could also do it like this:
<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.12/handlebars.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="template">
<div class="name">{{name}}</div>
<div class="address">{{address}}</div>
</div>
<script>
// Load your html / template into this variable
var template = document.getElementById('template').innerHTML;
var jsonData = {
"name":"John",
"address": "City Street"
}
var compiledTemplate = Handlebars.compile(template);
// The output html is generated using
var html = compiledTemplate(jsonData);
document.getElementById('template').innerHTML = html;
</script>
</body>
</html>