Eel python: Javascript error eel is not a function - javascript

I am using eel to communicate with python. I'm working in dir C:\Users\Desktop\Eel where I have app.py and inside the UI folder I have index.html, myjava.js, style.css, images but nothing called eel.js. I said this because in docs it says to include script called /eel.js.
index.html
<head>
<script type="text/javascript" language="JavaScript" src="./myjava.js"></script>
<script type="text/javascript" src="/eel.js"></script>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container" onclick="runeel()">
</body>
my Javascript is:
function runeel(){
eel.runpy()
}
app.py
import eel
eel.init('UI')
eel.start('index.html', size=(900, 550))
#eel.expose
def runpy():
....code which creates an excel file in desktop...
When I run the py file, the index.html loads up and then when I click the div I get into the function and but it throws the error:
myjava.js:2 Uncaught TypeError: eel.runpy is not a function
What am I missing?

It seems that the init statement is written first.
What about writing the #eel.expose statement right after the import statement?
I'm not good at English, so I'm worried that it will make sense.
But I would be happy if I could help.

In my case, I had to start eel after exposing the function via the decorator:
import eel
eel.init('UI')
#eel.expose
def runpy():
....code which creates an excel file in desktop...
eel.start('index.html', size=(900, 550))

i had the same problem until I removed the /eel.js from
<script type="text/javascript" src="/eel.js"></script>
now it's look like
<script type="text/javascript" src="eel.js"></script>

Related

JavaScript modules are not loading

I am trying to import a module to my JavaScript code, which should later run on a WordPress server.
Currently i wanted to test it on localhost, but it gives me an error like:
The Skript from "http://127.0.0.1:46513/js/main.js" was loaded, despite it's MIME-Typ ("text/html") is not valid in JavaScript
Which is strange because it is js code and not html.
My main.js looks like this:
const { Origin, Horoscope } = require('./circular-natal-horoscope-js/dist/index.js');
And index.html like this:
<html>
<head> Horoscope </head>
<body>
<script type="text/javascript" src="js/require.js"></script>
<script type="text/javascript" src="js/main.js"></script>
</body>
</html>
I also tried different import syntax:
import { Origin, Horoscope } from '/circular-natal-horoscope-js/dist/index.js';
Which gives me the same error.
The only thing which is working is, when i type in node main.js into console, then the Origin and Horoscope functions are beeing loaded.
How can i use this to be working in my js-files without using the console?

d3 pie chart with flask server

I'm using the built-in flask server and I want to show an animated pie chart, like here:
http://codepen.io/tpalmer/pen/jqlFG
or
http://jsfiddle.net/thmain/xL48ru9k/1/
For simplicity, I use the latter one.
The python flask server code is:
from flask import Flask, render_template, request, flash
from forms import ContactForm
app = Flask(__name__)
app.secret_key = 'blah'
#app.route('/', methods = ['GET', 'POST'])
def test():
return render_template('test.html')
if __name__ == '__main__':
app.run(debug = True)
I did copy the javascript code provided on the webpage to the file static/script2.js
and the css code to static/css/style_d3.css
My HTML code is
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="//style_d3.css" type="text/css">
</head>
<body>
<p>test</p>
<div class="animated-ring">
<svg></svg>
</div>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="//script2.js"></script>
</body>
</html>
I run the webpage through the flask server. But I get a webpage that just says "test", there's no chart.
What do I do wrong?
I'd really appreciate if someone could help me.
You only render the test.html at "/" path, the script2.js needs to be rendered too at "/script2.js".
Try this one liner at your project's root directory to host all files:
python -m SimpleHTTPServer
I think you need to set to a path your js file. In your app dir create a static folder then put your script2.js file and when you call this file at html use flask url_for() function
src="{{url_for('static', filename='script2.js'}}"

Separating html and JavaScript in Flask [duplicate]

This question already has answers here:
How to serve static files in Flask
(24 answers)
Closed 6 years ago.
Hey I've got the following problem:
I am building a little flask app, and usually i just stick with bootstrap and jinja templates to get what I want, but this time I needed a bit more customised version. In order to get a grip I started with a simple example of using custom js and flask to get the basic right. But lets go into detail:
Assume I have a simple flask web app called app.py located in my_app/ which looks like this
from flask import Flask, render_template
app = Flask(__name__)
#app.route('/')
def index():
return render_template('index.html')
if __name__ == '__main__':
app.run(port=8080, debug=True)
and the corresponding index.html, which is located in my_app/templates, is simply
<!DOCTYPE html>
<html>
<body>
<p>Clicking here will make me dissapear</p>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"> </script>
<script>
$(document).ready(function() {
$("p").click(function(event){
$(this).hide();
});
});
</script>
</body>
</html>
then I see the expected result, that is, i can click on the paragraph to make it disappear.
BUT: I would like to put the javascript part into a main.js file under static/js/. like so:
$(document).ready(function() {
$("p").click(function(event){
$(this).hide();
});
});
and the index.html becomes:
<!DOCTYPE html>
<html>
<body>
<p>Clicking here will make me dissapear</p>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src='/js/main.js'></script>
</body>
</html>
Unfortunately nothing will happen. I have tried other ways of referencing the script file as well but until now nothing works. I have the impression im missing something really simple. Thanks in advance!
Simply invoke the url_for function within the template, referencing the special static endpoint so that the correct url to the desired target resource be created. As the desired target is the main.js file inside static/js, this would lead to the following:
<script type=text/javascript src="{{
url_for('static', filename='js/main.js')
}}"></script>
The rest of the quickstart guide contains additional useful information.

coffeescript: suppress "ReferenceError"

Currently working through this tutorial on using Backbone.js with coffeescript.
Leveraging the following index.html file:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>CoffeeScript, Meet Backbone.js: Part N</title>
<link rel="stylesheet" href="style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script src="http://ajax.cdnjs.com/ajax/libs/json2/20110223/json2.js"></script>
<script src="http://ajax.cdnjs.com/ajax/libs/underscore.js/1.1.6/underscore-min.js"></script>
<script src="http://ajax.cdnjs.com/ajax/libs/backbone.js/0.3.3/backbone-min.js"></script>
<script type="text/javascript" src="./index.js"></script>
</head>
<body>
<header>
<h1>CoffeeScript, Meet Backbone.js: Part 1</h1>
</header>
</body>
</html>
which loads an index.js file after loading Backbone, jQuery, etc from a cdn. Hoping to work within a script.coffee file that I'd like to have automatically compile into the script.js file loaded by index.html above by running something like coffee script.coffee -c -w.
Trouble is, I'm getting ReferenceErrors when I try to run the above command on the following script.coffee file:
jQuery ->
class ListView extends Backbone.View
el: $ 'body'
initialize: ->
_.bindAll #
#render()
render: ->
$(#el).append '<ul><li>Hello, Backbone!</li></ul>'
list_view = new ListView
For instance:
ReferenceError: jQuery is not defined
...
because, clearly, jQuery is being loaded in the index.html file.
Is there a way to suppress the error reporting from the coffeescript compiler so that it just converts the code without the error?
The options must go before the file, e.g.:
coffee -cw script.coffee
Otherwise, it will try to run script.coffee right then and there as a Node.js script, passing it the options -c and -w. That's not what you want; if you want the CoffeeScript compiler to get the options, it's got to be before the file name.

Import javascript into html on play 2.0 framework

I'm having problems including local javascript files into my html that is on the play framework. The paths are correct and I even tried including the javascript file in the same directory. However, imports from the web (the main libraries i'm using) work just fine.
#(execId: String)
<html>
<head>
<title>Timeline</title>
<script type="text/javascript" src="http://mbostock.github.com/d3/d3.js"></script>
<script type="text/javascript"
src="http://code.jquery.com/jquery-latest.js"></script>
<script type = "text/javascript" src = "../../public/javascripts/profilesJS/stack.js"> </script>
</head>
<body>
<input id="profiles" type="button" value="Profiles" />
<script type="text/javascript">
alert(tester());
</script>
</body>
</html>
the javascript file simply looks likes this
function tester(){
return "test";
}
And the error i get is:
tester is not defined
at the line with the alert
According to the assets documentation (and routing in general) you need to use the reverse routing in your template:
<script type="text/javascript" src='#routes.Assets.at("javascripts/profilesJS/stack.js")'></script>
it builds the correct src path to your /public/javascripts/profilesJS/stack.js file (by default routing config it will be /assets/javascripts/profilesJS/stack.js)

Categories