search

python-eel / Eel

A little Python library for making simple Electron-like HTML/JS GUI apps
MIT License
6.34k stars 581 forks source link

javascipt does not work #556

Open marnov042 opened 2 years ago

marnov042 commented 2 years ago

running javascript when i update html code to something else(with javascipt in it) the javasctipt doesnt looks like its running

main.py

import eel  

@eel.expose
def loginr(username,password):
    print(username,password)

   return ceUI.accept_login(username)

class ceUI:
    def innit():
        eel.init('ui-components')
        eel.start("templates/index.html", size=(400,500),block=False)
        while True:
            eel.sleep(1)

    def accept_login(username):

html = ""
        for line in open(f"ui-components/templates/index2.html","r"):
            html += line

        return html

ceUI.innit()

main.js

async function login(user,passw){
    await eel.loginr(user,passw)(function(x){
        document.getElementById("body").innerHTML = x;
        document.title = "";

    });  
}

window.addEventListener("resize", function(){
    window.resizeTo(400, 500);
});

index.html

<!DOCTYPE html>
<html translate="no">
    <head>
        <meta name="google" content="notranslate">
        <meta charset="UTF-8">
        <meta name="keywords" content="HTML,CSS,XML,JavaScript">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="preconnect" href="https://fonts.googleapis.com">
        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
        <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@600&display=swap" rel="stylesheet"> 
        <link rel="stylesheet" href="../styles/main.css">
        <title></title>
    </head>
    <body id="body">
        <div id="loginScreen">
            <h1>LOGIN</h1>
            <input id="username" autocomplete="new-password" spellcheck="false" type="username" placeholder="Username"><br>
            <input id="password" type="password" placeholder="••••••••••••••">
            <div id="loginButtons">
                <button onclick="login(document.getElementById('username').value,document.getElementById('password').value)" style="margin-left:0;background-color: #41CE4B;color: #0C0C0C;">LOGIN</button>
                <button id ="reg" style="color: #41CE4B;background-color: transparent;border:2px solid #41CE4B;">REGISTER</button>
            </div>
            <div id="links">
                <a href="" target="blank">TOS</a><br>
                <a href="" style="margin-top:-20px;" target="blank">FAQ</a>
            </div>
        </div>

    </body>

    <script src="/eel.js"></script>
    <script src="/javascript/main.js"></script>

</html>

index2.html

<!DOCTYPE html>
<html translate="no">
        <head>
        <meta name="google" content="notranslate">
        <meta charset="UTF-8">
        <meta name="keywords" content="HTML,CSS,XML,JavaScript">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="preconnect" href="https://fonts.googleapis.com">
        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
        <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@600&display=swap" rel="stylesheet"> 
        <link rel="stylesheet" href="../styles/main.css">
        <title></title>
    </head>
    <body id="body"><div id="earn">
        <div id="welcomeBack">
            <h1>WELCOME BACK</h1>
        </div>
        <div id="logo">
            <img id="logoImg" src="https://media.discordapp.net/attachments/927650748685242388/927654178606706808/A.png?width=418&amp;height=418">
        </div>
        <div id="buttonContainer">
            <button id="startbut" onclick="eel.starts()" style="position: relative; z-index: 100; background-color: #42c84b;">START</button>
            </div>
        <div id="discord">
            <img src="/img/discord.png">
        </div>
    </div>
    </body>

    <script src="/eel.js"></script>
    <script src="/javascript/main.js"></script>
    <script type="text/javascript">
   const btn = document.getElementById("startbut");

btn.addEventListener("click", ()=>{

    if(btn.innerText === "START"){
        btn.innerText = "STOP";
    }else{
        btn.innerText= "START";
    }
});
</script>
</html>

the javascpit code in index2.html doesnt run, i know the script works , even when i put it inside console

Desktop :

abdurryy commented 2 years ago

Once clicked I do see it fires starts in Python because it prints "started" and from there you can fire a javascript function as callback to change the text!

So it would be: PYTHON ` @eel.expose def starts():

START MINER

eel.change()()
print("started")

`

JAVASCRIPT eel.expose(change); function change() { if (document.getElementById("startbut").innerHTML == "START"){ document.getElementById("startbut").innerHTML = "STOP" }else{ document.getElementById("startbut").innerHTML = "START" } }