Javascript not work! - Githubissues

gianfelicevincenzo commented 4 years ago

eel 0.12.4 Linux/Debian 9 Chrome

Hi. when i try to launch a JavaScript function from python nothing happens!

(PS. All files are located in web dir, except the file python)

html code

<html>
   <head>
      <script type="text/javascript" src="eel.js"></script>
      <link rel="stylesheet" type="text/css" href="css/app.css">
      <link rel="stylesheet" href="css/font-awesome.min.css">
      <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, minimum-scale=1.0,maximum-scale=1.0">
      <title>App Login</title>
   </head>

   <body>
      <script type="text/javascript" src="eel.js"></script>
      <button onclick='eel.scan();'>Scansione</button>
      <h1>Hello!</h1>
   </body>
</html>

python code

# -*- coding: utf-8 -*-
import eel
import encodings
from iwlib import iwlist

eel.init('web', allowed_extensions=['.js', '.html','.css'])

@eel.expose
def scan():
    result=iwlist.scan('wlan0')

    for list_wireless in result:
        essid=list_wireless['ESSID']
        mac=list_wireless['ACCESS POINT']
        channel=list_wireless['CHANNEL']
        freq=list_wireless['FREQUENCY']

        print '{} {} {} ({})'.format(essid,mac,channel,str(freq)[0:4])

eel.start('index.html',port=10000,size=(308, 612))

eel.sStampa()

js code

eel.expose(sStampa);
function sStampa() {
   console.log('Hellooooo');
}

samuelhwilliams commented 4 years ago

What are the filenames you're using?

I think maybe your js code snippet is in a file called eel.js. If that's the case, your JavaScript won't be served because the Eel server serves its own eel.js file. Can you try renaming your JS code snippet to something else and then including that in the HTML file as well.

Also note that you're including eel.js again in the body of your HTML, which isn't needed.

Example:

index.html

<html>
   <head>
      <script type="text/javascript" src="eel.js"></script>
      <script type="text/javascript" src="app.js"></script>
      <link rel="stylesheet" type="text/css" href="css/app.css">
      <link rel="stylesheet" href="css/font-awesome.min.css">
      <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, minimum-scale=1.0,maximum-scale=1.0">
      <title>App Login</title>
   </head>

   <body>
      <button onclick='eel.scan();'>Scansione</button>
      <h1>Hello!</h1>
   </body>
</html>

app.js

eel.expose(sStampa);
function sStampa() {
   console.log('Hellooooo');
}

gianfelicevincenzo commented 4 years ago

Here is the directory structure:

login_app/
├── app.py
└── web
    ├── css
    ├── eel.js
    └── index.html

I tried again like you did, but nothing ... this python javascript doesn't seem to work. I have also added a / to the src in html (<script type="text/javascript" src="/eel.js"></script>), but nothing ... everything works except that function

samuelhwilliams commented 4 years ago

You need to change your file eel.js to be called something else. eel.js is a special file served by Eel and if you have your own javascript file called eel.js in the root of the web directory it will not be sent to, or loaded by, the browser.

Please also note that Eel has officially dropped support for Python 2.x, which you appear to be using. I'd recommend upgrading to Eel 0.13.0+ and using Python 3.6+.

gianfelicevincenzo commented 4 years ago

Ah, sorry for my english...i did not understand. Forgive me. however I changed the name of the file, I called it in another way, but nothing .... it still doesn't work

.
├── app.py
└── web
    ├── css
    ├── index.html
    └── test.js

HTML code

<script type="text/javascript" src="/test.js"></script>

samuelhwilliams commented 4 years ago

No worries @vincenzogianfelice.

Now that you've updated the HTML to include test.js, is it still including eel.js? It needs to include both.

gianfelicevincenzo commented 4 years ago

Yes.

.
├── app.py
└── web
    ├── css
    │   ├── app.css
    │   ├── font-awesome-4.7.0
    │   │   ├── css
    │   │   ├── fonts
    │   │   ├── HELP-US-OUT.txt
    │   │   ├── less
    │   │   └── scss
    │   └── font-awesome.min.css
    ├── index.html
    └── js
        └── test.js

HTML code

<script type="text/javascript" src="/eel.js"></script>
<script type="text/javascript" src="/js/test.js"></script>

But not work...incredible!

samuelhwilliams commented 4 years ago

Do you have a github repository with your code?

I've set up the code you provided and made the changes I recommended and it all seems to work OK ... so I can't really understand why it isn't working for you at the moment.

gianfelicevincenzo commented 4 years ago

Unfortunately not (this is test with eel). But I can write you the files here ...

Python Code

# -*- coding: utf-8 -*-
import eel
from iwlib import iwlist

eel.init('web', allowed_extensions=['.js', '.html','.css'])

@eel.expose
def scan():
    result=iwlist.scan('wlan0')

    for list_wireless in result:
        essid=list_wireless['ESSID']
        mac=list_wireless['ACCESS POINT']
        channel=list_wireless['CHANNEL']
        freq=list_wireless['FREQUENCY']

        print '{} {} {} ({})'.format(essid,mac,channel,str(freq)[0:4])

eel.start('index.html',size=(308, 612))
eel.sStampa()

HTML Code

<html>
   <head>
      <script type="text/javascript" src="/eel.js"></script>
      <script type="text/javascript" src="/js/test.js"></script>
      <link rel="stylesheet" type="text/css" href="css/app.css">
      <link rel="stylesheet" href="css/font-awesome.min.css">
      <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, minimum-scale=1.0,maximum-scale=1.0">
      <title>App Login</title>
   </head>

   <body>
      <button onclick='eel.scan();'>Scansione</button>
      <h1>Hello!</h1>
   </body>
</html>

JS Code

eel.expose(sStampa);
function sStampa() {
   console.log('Hellooooo');
}

RahulBadenkal commented 4 years ago

Can you open developer console and check what error you are getting while clicking the button?

gianfelicevincenzo commented 4 years ago

I tried to see and everything is working properly. JS files are loaded correctly and the button works correctly (from JS to Python). But when trying to do the opposite (Python to JS) it doesn't work. He's making me crazy!

samuelhwilliams commented 4 years ago

Do you get any errors or logs from the Python side?

samuelhwilliams commented 4 years ago

Ah. It might just be because Eel is started in blocking mode - which means it doesn't ever run eel.sStampa() until the eel server shuts down.

You will want to change it to non-blocking mode, which means that code after eel.start will be run while the server is alive.

Python code

# -*- coding: utf-8 -*-
import eel
from iwlib import iwlist

eel.init('web', allowed_extensions=['.js', '.html','.css'])

@eel.expose
def scan():
    result=iwlist.scan('wlan0')

    for list_wireless in result:
        essid=list_wireless['ESSID']
        mac=list_wireless['ACCESS POINT']
        channel=list_wireless['CHANNEL']
        freq=list_wireless['FREQUENCY']

        print '{} {} {} ({})'.format(essid,mac,channel,str(freq)[0:4])

eel.start('index.html',size=(308, 612), block=False)
eel.sStampa()

while True:
    eel.sleep(1)

You need the while True block to keep the script running after your own code, otherwise when Python reaches the end of the script it will close and the Eel server will shutdown.

gianfelicevincenzo commented 4 years ago

Hi ... after several attempts i found out what the problem was. I found that the console.log() statement in the chrome browser does not work. The "alternative" works instead, ie alert()... why? Also I would have another question: how do I close an eel window open?

Thank you

samuelhwilliams commented 4 years ago

console.log in chrome browser does work - it does something different to alert, so maybe you don't see the output. If you open chrome's developer tools and look at the console tab, you should see the output there.

I'm not sure what you mean by 'how do I close an Eel window'. You can just close the browser window it opens. If you mean through code, the only supported way at the moment is to exit the program altogether (sys.exit()) as I don't believe we track and retain the process id of the browser that gets launched.

I'm going to close this issue now as it seems you've got things working enough to at least use JavaScript alert.

python-eel / Eel

Javascript not work! #343