How to use flask url_for in an ajax call?

Question

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?

You could alternatively pass the ticket number via GET as the `url_for()` call won't work without a `ticket_number`. The `'DUMMY_VALUE'` method is a good workaround. — abigperson, Nov 29 '16 at 15:53

score 1 · Accepted Answer · answered Nov 29 '16 at 15:50

1

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.

answered Nov 29 '16 at 15:50

Daniel Roseman

588,541
66
880
895

Thank you @"Daniel Roseman" for leading me toward the solution. This is what worked: `code` var eventDataBaseUrl = "{{ url_for('get_event_data', ticket_number='DUMMY_VALUE') }}"; var actualDataUrl = eventDataBaseUrl.replace(/DUMMY_VALUE/, String(ticket.innerHTML)); – BartzGH Nov 29 '16 at 17:26

How to use flask url_for in an ajax call?

1 Answers1