CODEWITHSUNDEEP
javascriptpythonjqueryflask
L.P.
L.P.

Reputation: 3

Loader with python & flask

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?

Upvotes: 0

Views: 1658

Answers (2)

Josh Thrasher
Josh Thrasher

Reputation: 75

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.

Upvotes: 2

BugHunter
BugHunter

Reputation: 1204

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 });

Upvotes: 0

Related Questions