Lightrun
question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Using Eel calling JavaScript function in python only when a button is clicked

See original GitHub issue

Describe the problem I am trying to call a JavaScript function but only when a button is clicked , currently I am able to call JavaScript function but it trigger’s as soon as the UI is opened how can I avoid it as am new to Eel

Expected When btn1 is clicked function name2 should fire in python code i.e just want to end value from js to python when btn1 in clicked

Code snippet(s) Here is some code that can be easily used to reproduce the problem or understand what I need help with.

import time

import eel

eel.init("web")


@eel.expose
def printFromPython():
    return "hello from python"


@eel.expose
def getTime():
    return time.strftime('%c')


#creating a  python function to use js returned vals
def print_num(n):
    result = n
    print('Got this from Javascript:', result)
    print(result['c'])
    print(result['un'])
    print(result.keys())


print('Calling Javascript...')
eel.name2()(print_num)

eel.start('main.html')

...

<html>
   <html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  <meta name="Description" content="Enter your description here" />
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.0/css/bootstrap.min.css" />
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" />
  <title>Simple Demo</title>
</head>

<body>
  <div>
    <h3 class="text-center alert-info">Just A Simple Demo</h3>
    <p class="text-center alert-danger" id="demo"></p>
    <div class="container-fluid text-center ">
      <input class="form-control btn btn-outline-success m-3" placeholder="Enter username" id="un">
      <input class="form-control btn btn-outline-success m-3" placeholder="Enter password" id="pwd">
      <button class="btn btn-primary m-3" id="btn1">Click Me Regular from JS</button>

    </div>
  </div>

  <script type="text/javascript" src="/eel.js"></script>
  <script src="main.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.slim.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.1/umd/popper.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.0/js/bootstrap.min.js"></script>

</body>


</html>

const d = new Date();
document.getElementById("demo").innerHTML = d;



function name1() {

  var username = document.getElementById("un").value
  var password = document.getElementById("pwd").value

  alert(username + ":" + password);
  document.getElementById("un").value = ""
  document.getElementById("pwd").value = ""
}

eel.expose(name2);

function name2() {;

  const c = "Hello lp from JS"

  var username = document.getElementById("un").value
  var password = document.getElementById("pwd").value
  console.log(c)
  return {
    c: c,
    un: username
    pw: password
  };

}

document.getElementById("btn1").addEventListener("click", name1)

Desktop (please complete the following information):

  • OS: Windows
  • Browser chrome
  • Version 90

Issue Analytics

  • State:closed
  • Created 2 years ago
  • Comments:11

github_iconTop GitHub Comments

1reaction
dstrickscommented, Jul 28, 2021

Try this:

main.py

import time
import eel

eel.init("web")


@eel.expose
def printFromPython():
    return "hello from python"


@eel.expose
def getTime():
    return time.strftime('%c')


# creating a  python function to use js returned vals
@eel.expose
def print_fromjs(n):
    result = n
    print('Got this from Javascript:', result)
    print(result['un'])
    print(result['pwd'])
    print(result.keys())


print('Calling Javascript...')
eel.start('main.html', )

# eel.name2()(print_fromjs)  <This is not necessary>

main.js

const d = new Date();
document.getElementById("demo").innerHTML = d;

// just a regular js func
function name1() {
  let username = document.getElementById("un").value;
  let password = document.getElementById("pwd").value;

  alert(username + ":" + password);
  document.getElementById("un").value = "";
  document.getElementById("pwd").value = "";
}

// just calling regular js func
document.getElementById("btn1").addEventListener("click", name1)

// calling python function
document.getElementById("btn2").addEventListener("click", function () {

  // here x in returned val from python
  eel.printFromPython()(x => {
    alert(x)
  })

})

// calling python function 2 WITH SYNC AWAIT 
document.getElementById("btn3").addEventListener("click", async function getTime() {
  let value = await eel.getTime()();
  alert(value);
})


// need to send values from function name2 to python when btn4 is clicked ?

eel.expose(name2);
function name2() {
    var un = document.getElementById("un").value;
    var pwd = document.getElementById("pwd").value;
    console.log(un);
    eel.print_fromjs({un, pwd});
}

document.getElementById("btn4").addEventListener("click", name2)

The key is that your Python code must expose functions that you’d like to call from JavaScript, just like you did with the getTime(). In your original code, JavaScript was trying to call function python_func but the Python code did not expose any function called python_func. Since you already had Python function print_fromjs, I just exposed that in Python and called it from JavaScript.

1reaction
ofoxsmithcommented, Jul 19, 2021

Just get the values from HTML and pass them to a python function eg

  let input1 = document.getElementById("un").value,
  let input2 = document.getElementById("pwd").value,
  eel.python_func(input1, input2);
Read more comments on GitHub >

github_iconTop Results From Across the Web

Using Eel calling JavaScript function in python only when a ...
I've solved it after lots of trail and error, since I'm new to JavaScript, Eel and connecting both with Python, I only later...
Read more >
Using Eel calling JavaScript function in python only when a ...
Describe the problem I am trying to call a JavaScript function but only when a button is clicked , currently I am able...
Read more >
Using Eel calling JavaScript function in python ... - Bountysource
Describe the problem. I am trying to call a JavaScript function but only when a button is clicked , currently I am able...
Read more >
Javascript can`t see python function exposed with eel
Look at the below code, eel.start() should be in the end of the code: import eel. import pyowm. owm = pyowm.
Read more >
Simple distributable desktop app with Python and Web - Medium
This is the magic of eel lib, by using eel.expose(# js function here) you can make it callable at your python script. Cool...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found
Previous page

Setting block=False at eel.start() gives error

Next page

How to use eel with electron using mode='electron'?