CODEWITHSUNDEEP
javascriptjquerypythonajaxflask
Gillespie
Gillespie

Reputation: 2228

Make an AJAX request to Flask application

I'm trying to refresh a Jenkins build console output in my Flask web application, however I am having trouble with the jQuery/AJAX to do it.

As you can see below, i'm just trying to get this working using a refresh button. Ideally I want to refresh {{buildinfo}} on a timer.

Currently my test function/jQuery is returning the error: Uncaught TypeError: Illegal invocation.

Heres the (working) function from my app.py I was using before I started down this path:

@app.route('/buildinfo/<job_id>/<job_number>', methods=['GET', 'POST'])
def buildInfo(job_id, job_number):
    try:
        console_output = server.get_build_console_output(job_id, int(job_number))
        return render_template("buildinfo.html", buildinfo=console_output, job_id=job_id, job_number=job_number)
    except Exception as e:
        return render_template("buildinfo.html", error=str(e))

Here's the test function I have been using to receive the request and send back to the client:

@app.route('/_test')
def foo():
        a = request.args.get('a', None, type=str)
        b = request.args.get('b', 0, type=int)
        bar = server.get_build_console_output(a, int(b))
        return jsonify(result=bar)

And here is the buildinfo.html:

{% extends "base.html" %}
{% block content %}
<script type="text/javascript" src="{{ url_for('static', filename='jquery-1.12.0.min.js') }}"></script>
<script type="text/javascript">
var $SCRIPT_ROOT = {{ request.script_root|tojson|safe }};
</script>

$(function() {
    $('a#load').bind('click', function() {
        $.getJSON($SCRIPT_ROOT + '/_test', {
            a: $('{{job_id}}'),
            b: $('{{job_number}}')
        }, function(data) {
            $("#result").text(data.result);
        });
        return false;
    });
});
</script>

<div class="col-md-10">
    <h1>Build Info</h1>
    <br>
    <p>retrieving {{job_id}}, build number {{job_number}}</p>
    <br>
    <p>{{buildinfo}}</p>
    <br>
    <span id="result">?</span>
    <a href=# id="load">go</a>
</div>

{% endblock %}

Upvotes: 0

Views: 1593

Answers (2)

Gillespie
Gillespie

Reputation: 2228

For anyone in the same boat, I am able to refresh a Flask value using the following. I may update this answer to include clearInterval() once the build is complete. Thanks to GG_Python for pointing out my mistake.

app.py :

@app.route('/buildinfo/<job_id>/<job_number>', methods=['GET', 'POST'])
def buildInfo(job_id, job_number):
    try:
        console_output = server.get_build_console_output(job_id, int(job_number))
        return render_template("buildinfo.html", buildinfo=console_output, job_id=job_id, job_number=job_number)
    except Exception as e:
        return render_template("buildinfo.html", error=str(e))

@app.route('/_test')
def foo():
        a = request.args.get('a', None, type=str)
        b = request.args.get('b', 0, type=int)
        bar = server.get_build_console_output(a, int(b))
        return jsonify(result=bar)

buildinfo.html :

{% extends "base.html" %}
{% block content %}
<script type="text/javascript" src="{{ url_for('static', filename='jquery-1.12.0.min.js') }}"></script>
<script type="text/javascript">
var $SCRIPT_ROOT = {{ request.script_root|tojson|safe }};
</script>
<script type="text/javascript">

    setInterval(function() {
        $.getJSON($SCRIPT_ROOT + '/_test', {
            a: "{{job_id}}",
            b: {{job_number}}
        }, function(data) {
            $("#result").text(data.result);
        });
        return false;
    }, 3000);

</script>

<div class="col-md-10">
    <h1>Build Info</h1>
    <br>
    <p>retrieving {{job_id}}, build number {{job_number}}</p>
    <br>
    <p id="result">{{buildinfo}}</p>
    <br>
</div>

{% endblock %}

Upvotes: 0

GG_Python
GG_Python

Reputation: 3541

You're feeding a HTML elements to the ajax call, when you should be passing values. Change this:

a: $('{{job_id}}'),
b: $('{{job_number}}')

to this:

a: {{job_id}},
b: {{job_number}},
...

I'm not sure about the types you're sending, if you need to send strings- wrap quotes around the double-moustache, but this should get you going. See here for a similar issue.

Upvotes: 1

Related Questions