javascript - Python Flask calling functions using buttons

Question

Once the button in my flask template is pressed I'd like it to call a python function defined in app.py that I made to be available to be called within the template by typing the following below where I define the function:

Example function in app.py:

@app.route('/foo')
def foo(x,y):
    pass
app.jinja_env.globals.update(foo=foo)

Template:

<button  type="button" onclick="myFunction(this)" name="enable" id="{{counter}}"> Enable </button>

In my button I have the onclick attribute just to test that the correct button out of many is pressed using javascript like such:

{% block scripts %}
    {{ super() }}
    <script>
    function myFunction(elem){
        if(confirm('Are you sure you want to ' + elem.name) == true){
            alert("its done.");            
         }
         else { 
            return false;
         }          
    }
    </script>
{% endblock %}

The issue I'm facing is I need the function that I'm making available within the template to correspond to the correct button. For example, if the button says Enable, then I need to call the enable function defined already or otherwise if the button corresponds to false, I'd like the disable function to be used.

I feel like I'm headed in the right direction but can't get past this part. Please be as detailed as you can.

Answer 1

If you want to execute your function without generating a request to the server, then your function must be defined in JavaScript. Otherwise, you need to fire an HTTP request.

Now in your case, if all you're trying to do is enable/disable buttons, it would make sense to do all that in javascript (no need to go to the server).

Example:

<button type="button" onclick="disableButton(this)" name="enable">Enable</button>

javascript

function disableButtonState(elem) {
    if(confirm('Are you sure you want to disable this button?') == true) {
        elem.disabled = true;
        alert("its done.");            
    }
    else { 
        return false;
    }          
}
</script>

However if what you want is to call a method on your server that, for example, sends an email, then you should use a form POST/GET or AJAX POST/GET

Example:

app.py

@app.route('/foo', methods=['GET', 'POST'])
def foo(x=None, y=None):
    # do something to send email
    pass

template

<form action="/foo" method="post">
    <button type="submit" value="Send Email" />
</form>

When you click the "Send Email" button an HTTP POST request is sent to "/foo" on your application. Your function foo can now extract some data from the request and do whatever it wants to do on the server side and then return a response to the client web browser.

It would suggest going through the Flask Tutorial to get a better understanding of client/server interactions when it comes to web applications built with Flask.