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>
Related
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>
I'm experimenting with getting my "javascript parts" seperated from my html. I followed this post on stack overflow. My goal is to have separate files for each class.
I got it working one time.
But then I keep getting the first "old" output in the browser console even when its changed.
As if it's stuck in there. I tried restarting everything, the computer ect. The other pages in my app that aren't separated works just fine.
I hope someone can help :) Thanks :)
index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>New page</title>
</head>
<body>
<p>test</p>
<canvas id="canvas" width="1000" height="500"></canvas>
<script type=text/javascript src="{{
url_for('static', filename='js/main.js') }}"></script>
</body>
</html>
my file main.js is in the static/js folder.
first I wrote
main.js:
console.log("new text"); // changed the text
It's likely your browser caching the .js, try opening your page in a incognito/private window (chrome/firefox), clearing your browser cache, or do a hard refresh (Shift + F5).
You can use Ctrl+F5 or Shift+F5 to reload your current page ignoring cached content.
Your issue is very probably just related to your previous data being cached by the browser in order to enhance performance and reduce the amount of downloaded data.
It's cache problem. You can use Flask-Assets extension so then whenever you make a change to your static files it will give it a unique version number. assets.%(version)s.js. Or you can just use Ctrl+r or Ctrl+F5 to purge cache.
I am trying to use the CircleType library to curve some text on a html page. I am getting some strange behaviour.
It works OK if I link directly to the circletype.mins.js file on github.
<html>
<body>
<h2 id="demo1">This works OK</h2>
<script type="text/javascript" src="https://rawgit.com/peterhry/CircleType/master/dist/circletype.min.js"></script>
<script>
const circleType = new CircleType(document.getElementById('demo1'));
circleType.radius(150);
</script>
</body>
</html>
If I download the js file and link to it locally I get an invalid or unexpected token error on the script. I have tried downloading the zip, cloning the git repo and running dos2unix, but can't get anything to work.
To make things even weirder, if I change the h2 value to the "Here’s some curved text flowing clockwise.", which is the value used in the online demo, it works both locally and when linking to the external file.
Does anyone have ideas what might be causing this?
Make sure you have <meta charset="UTF-8"> inside <head> on your html file
I'm following the React tutorial here https://facebook.github.io/react/docs/tutorial.html which is fine. I have the files downloaded and i have run the server which I can see at http://localhost:3000
The problem I am having is that I cannot seem to update any of the files in the directory. The changes are not being applied.
I'm being told to delete the examples.js line before I start so I no longer see the completed tutorial and start from scratch. Even when I do, nothing happens. I deleted a bunch of code from the package.json as well just for testing but no changes.
I feel I'm missing something after running the server and making changes to files to allow this to happen. Does anyone have any ideas? Reloading the server doesnt have an effect either.
Below is the code for the tutorial index.html
<head>
<meta charset="utf-8">
<title>React Tutorial</title>
<!-- Not present in the tutorial. Just for basic styling. -->
<link rel="stylesheet" href="css/base.css" />
<script src="https://unpkg.com/react#15.3.0/dist/react.js"></script>
<script src="https://unpkg.com/react-dom#15.3.0/dist/react-dom.js"></script>
<script src="https://unpkg.com/babel-standalone#6.15.0/babel.min.js"></script>
<script src="https://unpkg.com/jquery#3.1.0/dist/jquery.min.js"></script>
<script src="https://unpkg.com/remarkable#1.7.1/dist/remarkable.min.js"></script>
</head>
<body>
<div id="content"></div>
<script type="text/babel" src="scripts/example.js"></script>
<script type="text/babel">
// To get started with this tutorial running your own code, simply remove
// the script tag loading scripts/example.js and start writing code here.
</script>
</body>
thanks
Extreme beginner here guys so please explain as easily as possible.
I've read multiple variations of this and still am unable to figure it out, any help is greatly appreciated.
What I am wanting is a local environment to be able to learn HTML & javascript, but cannot get the script source inside HTML to correctly reference the .js file sitting in the exact same folder as the .html file. I am testing in a Chrome browser just referencing the .html file on my local machine via file:///C:/JavaScript/Index.html.
2 files(index.html and JS.js), both located locally on C:\Javascript
HTML Code:
<!doctype html>
<head>
<title>Title in browser tab</title>
</head>
<body>
"Text on the page"
<script src="C:\JavaScript\JS.js"></script>
</body>
</html>
-Based on what I read, if they are in the same folder I should be able to just reference <Script src="JS.js"> as there is no folder structure to look through, is that correct?
-I've also tried to absolute path via <script src="file:///C:/JavaScript/JS.js"> and related versions of <Script src="C:\Javascript\JS.js"> that do not work either.
In my JS.js file, I have nothing but alert(); to test functionality, as my reasoning for incorrect sourcing.
If I simply write <script>alert();</script> without referencing any outside source, the alert works as planned.
Thank you in advance!
I'd recommend popping open Chrome's Developer Tools to see where the issue may lie (and, if you're new to development, these are tools that are built into Chrome that will make your life so much easier).
Your assumption about not requiring a path should be correct: if you're referencing another file that lives in the same directory, omitting a full path will cause the browser to assume the path is relative (e.g. "right next to") to the current file:
<!doctype html>
<head>
<title>Title in browser tab</title>
</head>
<body>
"Text on the page"
<script src="JS.js"></script>
</body>
</html>