BartzGH BartzGH - 1 year ago 85
Ajax Question

How to use flask url_for in an ajax call?

I have this route:

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');
var eventDataBaseUrl = "{{ url_for('get_data') }}"
var jqxhr = $.ajax(eventDataBaseUrl + "/" + String(ticket.innerHTML) )
.done(function(data) {
.fail(function(jqXHR, status, error) {
console.log("error: " + error);
.always(function() {
// Trim data to time window
// Reload table with trimmed data on 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/", line 2000, in __call__
return self.wsgi_app(environ, start_response)
File "/usr/local/lib/python2.7/dist-packages/flask/", line 1991, in wsgi_app
response = self.make_response(self.handle_exception(e))
File "/usr/local/lib/python2.7/dist-packages/flask/", line 1567, in handle_exception
reraise(exc_type, exc_value, tb)
File "/usr/local/lib/python2.7/dist-packages/flask/", line 1988, in wsgi_app
response = self.full_dispatch_request()
File "/usr/local/lib/python2.7/dist-packages/flask/", line 1641, in full_dispatch_request
rv = self.handle_user_exception(e)
File "/usr/local/lib/python2.7/dist-packages/flask/", line 1544, in handle_user_exception
reraise(exc_type, exc_value, tb)
File "/usr/local/lib/python2.7/dist-packages/flask/", line 1639, in full_dispatch_request
rv = self.dispatch_request()
File "/usr/local/lib/python2.7/dist-packages/flask/", line 1625, in dispatch_request
return self.view_functions[rule.endpoint](**req.view_args)
File "/vagrant/chg_app/", line 92, in eng_demo
return render_template('eng_demo.html', result=result)
File "/usr/local/lib/python2.7/dist-packages/flask/", line 134, in render_template
File "/usr/local/lib/python2.7/dist-packages/flask/", line 116, in _render
rv = template.render(context)
File "/usr/local/lib/python2.7/dist-packages/jinja2/", line 989, in render
return self.environment.handle_exception(exc_info, True)
File "/usr/local/lib/python2.7/dist-packages/jinja2/", 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/", line 332, in url_for
return, endpoint, values)
File "/usr/local/lib/python2.7/dist-packages/flask/", line 1811, in handle_url_build_error
reraise(exc_type, exc_value, tb)
File "/usr/local/lib/python2.7/dist-packages/flask/", line 322, in url_for
File "/usr/local/lib/python2.7/dist-packages/werkzeug/", 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 Source

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.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download