BartzGH BartzGH - 5 days ago 5
Ajax Question

How to use flask url_for in an ajax call?

I have this route:

@my_app.route('/get_data'/<ticket_number>)
def get_data(ticket_number):
response = process_data(ticket_number)
return response


In a template, I have this javascript to call that route which grabs some data and returns html:

function updateData() {
var ticket = document.getElementById('ticket_num');
console.log(ticket.innerHTML);
var eventDataBaseUrl = "{{ url_for('get_data') }}"
var jqxhr = $.ajax(eventDataBaseUrl + "/" + String(ticket.innerHTML) )
.done(function(data) {
console.log("done");
$("#myTable").find('tbody').html(data);
$("#myTable").trigger('updateAll');
})
.fail(function(jqXHR, status, error) {
console.log("error: " + error);
})
.always(function() {
console.log("complete");
});
// Trim data to time window
// Reload table with trimmed data on interval
console.log("interval");
}
setInterval(updateData, 300000);


My problem is building the url with the ticket_number.

This is the culprit as far as I can tell:

var jqxhr = $.ajax(eventDataBaseUrl + "/" + String(ticket.innerHTML) )


I have another route that does similar without passing the url parameter that looks like this and it works fine:

var jqxhr = $.ajax("{{ url_for('get_json_data') }}")


Here's the full traceback:

Traceback (most recent call last):
File "/usr/local/lib/python2.7/dist-packages/flask/app.py", line 2000, in __call__
return self.wsgi_app(environ, start_response)
File "/usr/local/lib/python2.7/dist-packages/flask/app.py", line 1991, in wsgi_app
response = self.make_response(self.handle_exception(e))
File "/usr/local/lib/python2.7/dist-packages/flask/app.py", line 1567, in handle_exception
reraise(exc_type, exc_value, tb)
File "/usr/local/lib/python2.7/dist-packages/flask/app.py", line 1988, in wsgi_app
response = self.full_dispatch_request()
File "/usr/local/lib/python2.7/dist-packages/flask/app.py", line 1641, in full_dispatch_request
rv = self.handle_user_exception(e)
File "/usr/local/lib/python2.7/dist-packages/flask/app.py", line 1544, in handle_user_exception
reraise(exc_type, exc_value, tb)
File "/usr/local/lib/python2.7/dist-packages/flask/app.py", line 1639, in full_dispatch_request
rv = self.dispatch_request()
File "/usr/local/lib/python2.7/dist-packages/flask/app.py", line 1625, in dispatch_request
return self.view_functions[rule.endpoint](**req.view_args)
File "/vagrant/chg_app/chg_app.py", line 92, in eng_demo
return render_template('eng_demo.html', result=result)
File "/usr/local/lib/python2.7/dist-packages/flask/templating.py", line 134, in render_template
context, ctx.app)
File "/usr/local/lib/python2.7/dist-packages/flask/templating.py", line 116, in _render
rv = template.render(context)
File "/usr/local/lib/python2.7/dist-packages/jinja2/environment.py", line 989, in render
return self.environment.handle_exception(exc_info, True)
File "/usr/local/lib/python2.7/dist-packages/jinja2/environment.py", line 754, in handle_exception
reraise(exc_type, exc_value, tb)
File "/vagrant/chg_app/templates/eng_demo.html", line 1, in top-level template code
{% extends "base.html" %}
File "/vagrant/chg_app/templates/base.html", line 73, in top-level template code
{% block header %}{% endblock %}
File "/vagrant/chg_app/templates/eng_demo.html", line 258, in block "header"
var eventDataBaseUrl = "{{ url_for('get_data') }}"
File "/usr/local/lib/python2.7/dist-packages/flask/helpers.py", line 332, in url_for
return appctx.app.handle_url_build_error(error, endpoint, values)
File "/usr/local/lib/python2.7/dist-packages/flask/app.py", line 1811, in handle_url_build_error
reraise(exc_type, exc_value, tb)
File "/usr/local/lib/python2.7/dist-packages/flask/helpers.py", line 322, in url_for
force_external=external)
File "/usr/local/lib/python2.7/dist-packages/werkzeug/routing.py", line 1758, in build
raise BuildError(endpoint, values, method, self)
BuildError: Could not build url for endpoint 'get_data'. Did you forget to specify values ['ticket_number']?


Does anyone know the correct method to call that route from javascript with the ticket number parameter?

Answer

Rather than getting an "eventDataBaseUrl" by using url_for without a parameter and then concatenating the ID, you will have to pass it a dummy parameter and then replace it with your actual ID. Something like:

var eventDataBaseUrl = "{{ url_for('get_data', 'DUMMY_VALUE') }}"
var actualDataUrl = eventDataBaseUrl.replace(/DUMMY_VALUE/, ticket_id)

Also note you shouldn't be using innerHTML there; assuming ticket_num refers to an input, you should use .value.

Comments