I tried to embed a rich text text editor in my HTML page. The text editor works when the page is loaded seperately. But when I load the page through my django server, the Rich Text Editor does not work. the HTML page:
<html>
<head>
<script type="text/javascript" src="/home/aswin/python/myblog/tinymace/js/tinymce/tinymce.min.js"></script>
<script type="text/javascript">
tinymce.init({
selector: "textarea"
});
</script>
</head>
<body>
<form method="post" action = "/home/add/">
<input type = "text" value = "Title" name = "title">
<textarea >Hello</textarea>
<input type = "submit" value = "Post">
</form>
</body>
</html>
Can anyone help me?
You are trying to load a JavaScript file from location directly on your local hard drive (/home/aswin/python/myblog/tinymace/js/tinymce/tinymce.min.js). Websites you load from a server (even a Django development server running on your local machine) are not supposed to be able to load files from user's local hard drive, so your browser blocks this.
Please, read about managing static files through Django.
Related
I am developing a web app on App Script (to use Google APIs). I have a chrome extension that works alongside the web app so that I can send information about the browser.
I am using a content script that initializes once the Web App loads. I want to simply send a message from the extension to the web app through the content script. However, DOM doesn't work because App Script uses iFrames. Here is the code from my actual web app:
<!DOCTYPE html>
<html>
<head>
<base target="_top">
</head>
<body>
<input type="text" id="pageId" onchange="updateSessionInfo()">
</body>
<script>
function updateSessionInfo(){
var pageId = document.getElementById("pageId").value;
google.script.run.update(pageId);
}
</script>
</html>
I was trying to use DOM to send the pageId to the input element and by having a change in the value, the update function would send the information.
However, this is the structure I receive on my browser:
Chrome Dev Tools
Am I thinking correctly? Or is editing the DOM both dirty and unfeasible? Is there another way?
UPDATE:
I have found the actual document HTML elements by looking deeper down the tree:
New Console
But if the element with id="pageId" is down there, why does it return null when I call it?
UPDATE:
I noticed times when it returns null, and sometimes where the element is detected:
Newest Console
This works for me as a dialog:
Typically I would expect that if this will run as a dialog it will also run as a webapp with the addition of a doget();
gs:
function runmydialog() {
const ui = SpreadsheetApp.getUi();
ui.showModelessDialog(HtmlService.createHtmlOutputFromFile('ah2'),'test');
}
function update(msg) {
SpreadsheetApp.getUi().alert(msg);
}
html:
<!DOCTYPE html>
<html>
<head>
<base target="_top">
</head>
<body>
<body>
<input type="text" id="pageId" onchange="updateSessionInfo()">
<script>
function updateSessionInfo(){
var pageId = document.getElementById("pageId").value;
google.script.run.update(pageId);
}
</script>
</body>
</html>
Dialog:
Alert:
I noticed that your script is not inside the body. I don't know if that makes a difference.
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 (){...})
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/
In the html form given below, the user posts a value resid1, which is matched with the resid stored in the database.
<meta http-equiv="content-type" content="text/html;charset=UTF-8" />
<form name="form1" method="post" action="honda.php","tomcat\webapps\blazeds\e2.html">
Now if you will see the action field in the form, i want to post this value of resid to two different forms. Is it possible. Nd secondly, honda.php is in the htdocs folder of the Apache webser thus the value is easily posted, but the e2.html file is stored in Tomcat Blazeds folder. Thus i am unable to post value in this html.
Please if any one can help me ASAP. This thing have stuck me from the last 2 days..
The way you are attempting this is not possible. A browser will only submit a form once, to the URL specified by the action attribute. This is a fundamental browser behaviour that cannot be changed.
However, it is possible to work around the basic behaviour. In all cases you're going to require some Javascript manipulation, so it will only work if the user has JS enabled.
The basic approach would be to handle the form in the onsubmit event and manipulate it so that multiple URLs could be requested. You could utilize Ajax to make multiple requests, or you could even dynamically package the form data into another form element on the page and submit it.
Ajax would be the way I would approach it. There are excellent Ajax tools available that would facilitate this, such as JQuery.
For example, you could do something like this (I'm using JQuery here):
<script src="http://www.google.com/jsapi" type="text/javascript"></script>
<script type="text/javascript">google.load("jquery", "1.3.2");</script>
<script type="text/javascript">
function handleForm()
{
$.ajax({
url: 'honda.php',
data: $('#form1').serialize()
});
$.ajax({
url: 'tomcat\webapps\blazeds\e2.html',
data: $('#form1').serialize()
});
return false;
}
</script>
<form id="form1" onsubmit="return handleForm()" name="form1" method="post">
<!-- stuff -->
</form>
You could do something as described here.