带有python和flask的加载器

Question

I make a premise: I'm working on a school project and the technologies that I can use are: python, flask, bootstrap, JavaScript and JQuery.

I have a button (that I will call to "Update Product") that "onclick" must enable one of these buttons: https://www.w3schools.com/howto/howto_css_loading_buttons.asp , the "Update Product" button must be hidden and must call a function in python (example: updateProducts ()). At the end of this function (the function returns ok or ko), I return the message (using flash), but I do not know how to hide the Loading button and show the "Update Product" button again.

Can you help me?

Answer 1

Here is one way.
When you render the template in python you could pass a variable to control the visibility of the button.

render_template('page.html', visible=True)

Then, on your page perhaps something like this (found at Hiding a button in Javascript and adapted)

<script>
var hidden = {{ visible|safe }};
function action() {
    if(hidden) {
        document.getElementById('button').style.visibility = 'hidden';
    } else {
        document.getElementById('button').style.visibility = 'visible';
    }
}

You can also change the variable with an onclick function on then page itself. Your button to call a python function could look something like this.

<input type="button" id="toggler" value="Toggler" onClick="/funcionName" />

Remember to use the @app.route("/functionName") before the python function.

Hope this is close to what you wanted.

Answer 2

Here are the steps to achieve this.

1. Add loading button with hidden class.

2. When you click update Product button, following things should happen.

   $(".update_button").on("click", function(e){ $(".loading_button").show(); // show loading button $(".update_button").hide(); // hide update button $.ajax({}) // send ajax request to update product, on success, hide loader and show update button });