Hopefully, I'm missing something simple here but when I run the following HTML code through Flask the Javascript file fails to run. When I put my Javascript code from my file inline: alert('boo'), it works fine, so my Javascript code isn't the issue. The javascript file is indeed in my static folder and the names match, also the issue is the same on multiple browsers.
No error is shown and the HTML page loads normally as though there is no Javascript/it is ignoring it.
EDIT - There is an error, I was only looking in terminal. In the browser console it says Uncaught SyntaxError: Unexpected identifier and highlights my src.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Test</title>
<script> type="text/javascript" src="{{url_for('static', filename='javascripts.js')}}"></script>
</head>
<body>
<h1>Hello World</h1>
</body>
</html>
Okay, it's sorted now. My mistake was thinking the url_for had to be in between the script tags instead of apart of the tag. The working code is.
<script type="text/javascript" src="{{url_for('static', filename='javascripts.js')}}"></script>
Related
I have hard time in solving this problem when using Eel. I've used the free CoinGeckoAPI to display widgets in my page (using this template). Everything seemed fine until I checked the console of chrome devtools and found out these errors:
It seems that the error comes from this line in my index.html file (which is needed to correctly retrieve data from Coin Gecko):
<script src="https://widgets.coingecko.com/coingecko-coin-price-static-headline-widget.js"></script>
I've read many discussions about this bug, but none solve my issue. I also increased the shutdown_delay as a temporary fix just to prevent the webpage to be killed when refreshed fast enough (which also opened another problem to me). Any idea would be appreciated.
My app.py file (reduced):
import eel
#launch the webpage
try:
x = eel.start('index.html', mode='chrome', host='localhost', port=8080, cmdline_args=['--start-maximized'], shutdown_delay=2)
except OSError:
pass
index.html (very reduced):
<!DOCTYPE html>
<html lang="en">
<head>
<!-- to enable Eel framework-->
<script type="text/javascript" src="/eel.js"></script>
<!-- CoinGeckoAPI widget-->
<script src="https://widgets.coingecko.com/coingecko-coin-price-static-headline-widget.js"></script>
</head>
<body>
...
<coingecko-coin-price-static-headline-widget coin-ids="bitcoin" currency="php" locale="en"></coingecko-coin-price-static-headline-widget>
</body>
</html>
I am at the start of learning Javascript, but within the first 10min I hit on a Chrome issue. I'm attempting to display the code I wrote with Visual Studio in the Chrome console, but rather than showing the code in the section below the menus 'Element', 'Console', 'Source' etc, the code displays exactly as I wrote it, but in the view panel including all html tags below the menu section 'Apps', 'Bookmarks', 'Customize Links' etc. How do I resolve this, any answers?
I tried to use ctrl-o to open the .js file whilst in Visual Studio and also whilst on Chrome, but only the file path to the .js file opened, and when subsequently clicking on the file it looked like the image below.
chrome not displaying JavaScript code in the location I want it to be
To clarify - you are loading a .js file in the browser which is what is displaying in chrome (the content of that file).
What you want to do is run that js file and have Chrome's JavaScript interpreter (V8) parse that information. To do that, you must add your script to an index.html page and then in index.html, load that e.g something like <script type="text/javascript" src="script.js"></script>
Alternatively, you can just run the JavaScript directly in index.html via
<script type="text/javascript">
// your JavaScript
</script>
You are opening the javascript file directly in the browser, not opening an .html file with a javascript tag. That's why Chrome is showing you the file content.
If you want to execute your javascript code in the Chrome console, paste it directly in the "console" tab of the developer tools.
If you want to execute your javascript code in a web page, you have to create an html file with a script tag loading your javascript code, something like:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<script src="main.js"></script>
</head>
<body>
</body>
</html>
In order to see your html content on browser you should load .html file instead of loading .js file
you can include your javascript code in two ways
Add your Javascript code inside the script tagcreate a new javascript file with extension .js and add it in your html file
Example1 (Adding Javascript inside script tag)
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<script>
console.log("good morning");
alert("good morning");
</script>
</body>
</html>
Example2 (Adding Javascript from external file)
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<script src="nameOfFile.js"></script>
</body>
</html>
I just started learning javascript about 30 minutes ago. I'm doing an online course and they gave me this code as an example. The person in the video did the exact same thing, but it only works for me when I do inline not external. My .js name is right and they're in the same folder.
The html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>JavaScript Basics</title>
<script src=“cripts.js”></script>
</head>
<body>
<div class="container">
<h1>Where to place your JavaScript code.</h1>
</div>
</body>
</html>
and the js:
alert("YOU");
Nothing appears for me. I've tried everything to make it work, including different browsers. Could it be my computer or did I make a simple mistake?
It looks like your quotes are invalid :') Good beginner move! But it will be a simple fix. Note the “ should be ", this usually happens when copying and pasting code!
<script src="cripts.js"></script>
Also make sure your path and file name is correct?! cripts.js sounds like it is suppose to be scripts.js
A beginner mistake I made was to use <script>...</script> tags in the external javascript file. From HTML if you use:
<script type="text/javascript" src="../myApp/myFile.js"></script>
Then the external js file should just contain just the code such as:
function myFunction {}
with no script tags. This is unlike linking to external css files which include the <style>...</style> tags.
I am trying to create list with React, so I am using the module from here https://github.com/pqx/react-ui-tree
I am trying the sample application:
https://github.com/pqx/react-ui-tree/blob/gh-pages/example/app.js
This application renders the following:
React.render(, document.getElementById('app'));
In the same folder, I have an HTML file within which I try to display the tree created by the sample app:
<!doctype html>
<html lang="en">
<head>
<script src="http://fb.me/react-0.13.0.js"></script>
<script src="http://fb.me/JSXTransformer-0.13.0.js"></script>
</head>
<body>
<script src="app.js" type="javascript"></script>
<div id="tree">
</div>
</body>
</html>
However, when I open the HTML page in the browser, nothing is rendered.
I don't have much experience with Javascript or React.
Why is this happening?
Do I need to use Gulp or some other tool?
<script src="app.js" type="javascript"></script>
The MIME type for JavaScript is application/javascript (or the legacy text/javascript). Browsers do not recognise the non-standard javascript MIME type so will ignore the script.
This error would have been picked up if you had used the validator.
Omit the type attribute entirely. HTML 5 makes it optional and it defaults to JavaScript.
Your next problem is:
React.render(<App/>, document.getElementById('app'));
You have no element with that ID in your document.
You have one with the id tree, but that appears after the script, so won't exist at the time you run the script.
What I have is probably simple.
Here's my HTML file:
<!DOCTYPE html>
<html>
<head>
<title>MC</title>
<link href="public/css/style.css" rel="stylesheet" />
</head>
<body data-page="home">
<div class="avatar" data-type="mc_face"></div>
<script type="text/javascript">mc_face("Voobus");</script>
<script type="text/javascript" href="public/js/mc_face.js"></script>
</body>
</html>
You see, I have my external javascript file being declared at the very bottom. Right above it, I am trying to execute the function that is in that file (while passing a variable to it). Everything works fine if it's all in the same file, but the goal is to later have that function being executed in a php loop, so I need the seperate.
Am I just going about it all wrong? Why doesn't it work as-is?
This is the error I'm currently getting:
Uncaught ReferenceError: mc_face is not defined
So clearly, it's having a hard time even finding the function in the external file. I've tried it with their orders reversed, with the external file in the header, and some other things. I'm really scratching my head here.
Use src not href. Also put your code below your import.