Jquery button click to send AJAX request with Flask and Python

Question

I am trying to make a web application that accepts button clicks. The button clicked then sends a specific device, and operation code to the python application which then calls a irsend command using Lirc. This is based off of the source code/instructions from here:

https://github.com/slimjim777/web-irsend

http://randomtutor.blogspot.com/2013/01/web-based-ir-remote-on-raspberry-pi.html

The html for the button is simple and is in "Xbox.html"

<button onclick="clickedOp('Xbox', 'OnOff');"> Power </button>

This launches the js function:

<script>
function clickedOp(device_name, op) {
    $.ajax({url:'/' + device_name + '/clicked/' + op});
}

I know that the function is firing on a click event because if i put an alert command in the clickedOp function the alert command runs

the python/flask app looks like this:

from flask import Flask
from flask import render_template
from flask import request, redirect, url_for

BASE_URL = ''

app = Flask(__name__)


@app.route("/")
def menu():
    return render_template('menu.html')

@app.route("/<device_name>")
def remote(device_name):
    if device_name == "Xbox":
        return render_template('Xbox.html')


@app.route("/<device_name>/clicked/<op>")
def clicked(device_id=None, op=None):
    return render_template('test.html')

if __name__ == "__main__":
    app.run('0.0.0.0', port=80, debug=True)

All of the code up to the ajax request works. going to "/" loads the menu.html template and presents links to different devices, for instance

<a href="Xbox"> Xbox </a>

will route to

"/<device_name>" 

in the python program and "Xbox.html" is loaded. Then the button loads and clicking it fires the "clickedOp(device_name, op)" function. This is where it breaks down. Even though the ajax request routes to

"/<device_name>/clicked/<op>" 

the "test.html" page is not loaded

This is the case even though the Flask debugger says that there was a successful GET request(it returns 200) to "/Xbox/clicked/OnOff" (filling in the variables for the example above)

so any ideas why test.html is not being loaded from the ajax request, when it seems that in the source code/tutorial I provided he uses the same ajax method?

Answer 1

In the code the template will render and be returned to the jquery Ajax object, which will do nothing with it - it won't render it in the browser. Have you used your browser's developer tools to see if a response is received by the browser - again, if Flask logs HTTP 200 OK then I would imagine the request is being handled correctly. You should also be able to put print statements in your Flask method and see them logged too (I think).

Answer 2

You can simply do this with help of AJAX... Here is a example which calls a python function which prints hello without redirecting or refreshing the page.

In app.py put below code segment.

//rendering the HTML page which has the button
@app.route('/json')
def json():
    return render_template('json.html')

//background process happening without any refreshing
@app.route('/background_process_test')
def background_process_test():
    print "Hello"
    return "nothing"

And your json.html page should look like below.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type=text/javascript>
    $(function() {
      $('a#test').on('click', function(e) {
        e.preventDefault()
        $.getJSON('/background_process_test',
            function(data) {
             console.log(data)
        });
      });
    });
</script>


//button
<div class='container'>
<h3>Test</h3>
    <form>
        <a href=# id=test><button class='btn btn-default'>Test</button></a>
    </form>

</div>

Here when you press the button Test simple in the console you can see "Hello" is displaying without any refreshing.