The thing is I have a class that validates values and the results should be outputted with method document.getElementById().innerHTML.However, the second part of my logic works only after double click of button 'submit'. Here code of main file:
obj = new Validation()
async function validate(){
await obj.api_secret_key();
await obj.currency();
await obj.quantity();
await obj.pnl();
}
function start(){
let error_handler = '';
for (i in obj.validation_dict){
if (obj.validation_dict[i] === 'error'){
error_handler = i;
break;
}
}
if (error_handler !== ''){
error_msg = `
<p>Some parameters set improperly!</p>
<p>Please, check ${error_handler}.</p>
`;
console.log(error_msg);
document.getElementById('terminal').innerHTML = error_msg;
} else {
document.getElementById('terminal').innerHTML = "Successful connection!";
}
}
jQuery('#btn_start').on('click',async function(){
validate();
start();
});
I have not represent class of validation because there are a lot of files(2 python,1 js). The class has variable where it stores results (error, warning, success):
this.validation_dict = {
'keys' : "not set",
'currency': "not set",
'quantity': "not set",
'pnl': "not set"
};
All functions of the class are async to be able to await for execution of server part (module eel):
async quantity() {
let quantity = document.getElementById("input_quantity").value;
let result = await eel.quantity_input(quantity)();
this.setter_status('quantity', result);
if (result.indexOf("[ERROR]") == -1) this.info_account['quantity'] = quantity;
}
Probably, I have forgot to add that if I declare the function start() as class method then it works well. As you saw, the class only for validation therefore declaring class method is not way out.
Some addition of the validation: await eel.quantity_input(quantity)(); does the proccess and it created by module eel on Python:
import eel
@eel.expose
def quantity_input(qty=""):
is_valid = validation_obj.quantity_checker(qty=qty)
print(is_valid)
return is_valid
Step into the function:
def quantity_checker(self, qty = ""):
qty = float(qty)
if qty < 10:
return "[ERROR] The quantity is lower 10 dollars"
return "[SUCCESS] The quantity is right"
You're not waiting for validate() to finish before calling start(), so it will see the initial state of the obj.validation_dict (or the state resulting from the previous click), before it is modified asynchronously.
Change your code to
jQuery('#btn_start').on('click', async function(){
await validate();
// ^^^^^
start();
});