javascript call python side failed

hi-Nobody commented 3 years ago

Hi, I want to let my program print some information in terminal from front-end. But my JS call python seems failed. I always lock in the following code eel.sign_in(myAccount.value, myPwd.value); Could you help me solve problem, please Thank you~

PYTHON:

import eel

eel.init('static')

@eel.expose
def sign_in(account, pwd):
    print(f"our account is {account} & password is {pwd}")
eel.start('sign_in.html',size=(350,400),disable_cache=True)

sign_in.html:

<!DOCTYPE html>
<html>

<head>
    <title>login</title>
    <meta charset="utf-8">

    <!-- eel.js , this is necessary  -->
    <script type="text/javascript" src="js/eel.js"></script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css">
    <link type="text/css" rel="stylesheet" href="css/style.css">

</head>

<body>
    <div class="container">
        <h1>Account Login</h1>
        <form onsubmit="validate_form()" id="myform">
            <div class="form-group row">
                <label for="account1" class="custom-control-label">Account</label>
                <input type="text" class="form-control account-input" id="account1">
            </div>
            <div class="form-group row">
                <label for="pwd" class="custom-control-label">Password</label>
                <div class="input-group" id="show_hide_password">
                    <input type="password" class="form-control account-input show_hide_pwd" id="pwd">
                      <div class="input-group-append">
                        <button class="btn reveal" type="button">
                            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-eye-fill" viewBox="0 0 16 16">
                              <path class="pwd_svg" d="M10.5 8a2.5 2.5 0 1 1-5 0 2.5 2.5 0 0 1 5 0z"/>
                              <path class="pwd_svg"  d="M0 8s3-5.5 8-5.5S16 8 16 8s-3 5.5-8 5.5S0 8 0 8zm8 3.5a3.5 3.5 0 1 0 0-7 3.5 3.5 0 0 0 0 7z"/>
                            </svg>
                        </button>

                      </div>
                </div>

            </div>
            <div class="custom-control custom-checkbox row">
                <input type="checkbox" class="custom-control-input" id="checking" onclick="myCheckBox()">
                <label class="custom-control-label" for="checking">Remember</label>

            </div>
            <i class="bi bi-eye-fill"></i>
            <button type="submit" class="btn btn-primary btn-block" onclick="btn_click()">login</button>

        </form>
    </div>

    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js"></script>
    <script type="text/javascript" src="js/sign_in.js"></script>
</body>

</html>

sign_in.js:

const redirectUrl = 'home.html';
// Get the checkbox
var checkBox = document.getElementById("checking");
// Get the output text
var myAccount = document.getElementById("account1");
var myPwd = document.getElementById("pwd");

$(document).ready(function (){
    window.resizeTo(350, 400);
    document.getElementById("pwd").innerHTML = localStorage.getItem('my_Checkbox');
    if (checkBox.checked === true){
        document.getElementById("account1").innerHTML = localStorage.getItem('my_Account');
        document.getElementById("pwd").innerHTML = localStorage.getItem('my_Pwd');
    }
});

function validate_form(){
    var valid = true;
    eel.sign_in(myAccount.value, myPwd.value);
    if (myAccount.value === ''){
                alert ( "Pleas input your information" );
                valid = false;
        }

    if (myPwd.value === ''){
                alert ( "Pleas input your information" );
                valid = false;
        }

    if (valid === true){
        alert('valid:'+valid);
        //window.open (redirectUrl, '', 'height=600, width=500,resizable=no');
        //window.resizeTo(800, 600);
        document.getElementById('myform').action = redirectUrl;
    }
}

ibrahimyaacob92 commented 3 years ago

your function needs to be async

hi-Nobody commented 3 years ago

your function needs to be async

do you mean my code need to change to the following?: function validate_form() changes to async function validate_form() and eel.sign_in(myAccount.value, myPwd.value); changes to await eel.sign_in(myAccount.value, myPwd.value);

But it is still can't print in terminal after I changed. Or could you teach me how to change? Thank you

luciferamji commented 3 years ago

eel.sign_in(myAccount.value, myPwd.value); changes to await eel.sign_in(myAccount.value, myPwd.value)(); One more () after the function

Try with this hope it will work..

hi-Nobody commented 3 years ago

eel.sign_in(myAccount.value, myPwd.value); changes to await eel.sign_in(myAccount.value, myPwd.value)(); One more () after the function

Try with this hope it will work..

I change <script type="text/javascript" src="js/eel.js"></script> , function validate_form() and eel.sign_in(myAccount.value, myPwd.value); to <script type="text/javascript" src="/eel.js"></script>, async function validate_form() and await eel.sign_in(myAccount.value, myPwd.value)(); It's work!!! Thank you very much~

python-eel / Eel

javascript call python side failed #424