Flask - Using javascript and url_for to replace html

Question

I am new to Flask (as well as whatever else is involved in what I'm trying to do, apparently) and I'm creating a small using M. Grinberg's Mega-Tutorial as reference (Flask==2.2.3, jQuery==3.6.4).

I'm trying to incorporate a range html input element

<input id="slider" type="range" min="0" max="10" name="slider" value="1"/>

whose value I'm trying to take via jQuery and use to trigger an endpoint to create an image:

@main.route("/graph.png/order=<order>")

which I then want to display in another element in the page, without re-rendering the entire thing from scratch.

I'm incorporating a script in the template:

{% block base_script %}
<script src="{{ url_for('static', filename='js/client_render.js') }}"></script>
{% endblock %}

I would think that this would do the trick:

$(document).on('input', '#polyfit_order_slider', function () {
    slider_val = $('#polyfit_order_slider').get()[0]['value'];
    console.log(slider_val);

    $(document.getElementById('cur-input')).text('Current input: ' + slider_val)

    $(document.getElementById('graph_fit')).html(
        "<img src='{{ url_for('main.graph', order="+slider_val+") }}'></img>"
    )
});

but it so happens that every time I move the input slider I'm getting a yellow 404 in the terminal "GET /%7B%7B%20url_for( HTTP/1.1" and a GET http://localhost:8000/%7B%7B%20url_for( 404 (NOT FOUND) from the console.

What is the correct syntax to use for this scenario? I've implemented the functionality using entire page re-renders on the server side by having the user click submit on a flask wtf form but I feel a more dynamic client interaction would be better, if possible.

Notes:

I'm trying to follow Flask docs' Generating URLs but when putting anything like const user_url = {{ url_for("user", id=current_user.id)|tojson }} in the tags I'm getting SyntaxErrors.
The reference I mentioned does something very similar here.

Your js file is probably not being interpreted as a template. Check https://stackoverflow.com/questions/37259740/passing-variables-from-flask-to-javascript — James, Mar 11 '23 at 00:47
Hi @James, indeed if I replace the snippet above with the actual JS code in the script tag, I no longer get SyntaxErrors, at least. Is my original way an incorrect way to use scripts in templates? I tried adding a `type='text/javascript'` in the original call but it didn't help. However, I'm still having problem using JS variables in the url_for, trying the most upvoted method shown here https://stackoverflow.com/questions/36143283/pass-javascript-variable-to-flask-url-for doesn't seem to work. — John Karkas, Mar 11 '23 at 11:24
Nevermind the second part, I got the string to be parsed correctly. If possible, please let me know what would be the correct way to call JS snippets from outside the template and have them behave correctly, if possible! — John Karkas, Mar 11 '23 at 11:32

score 1 · Accepted Answer · answered Mar 11 '23 at 23:30

The base url comes from the server, and the order parameter comes from user input in the client. You'll need to use url_for in a template to generate a javascript variable containing the base url, and then modify that variable with the order parameter.

Something like this:

// this part is in a jinja template
<script>
  const graphURL = {{ url_for('main.graph') }};
</script>



// this part is in client_render.js
$(document).on('input', '#polyfit_order_slider', function () {
    slider_val = $('#polyfit_order_slider').get()[0]['value'];
    console.log(slider_val);

    $(document.getElementById('cur-input')).text('Current input: ' + slider_val)

    $(document.getElementById('graph_fit')).html(
        `<img src='${graphURL}/order=${slider_val}'></img>`
    )
});

Thank you very much! This works, although I had to 1) put double quotes around the graphURL variable and 2) implement a plain '/graph.png/' route. — John Karkas, Mar 13 '23 at 11:54

Flask - Using javascript and url_for to replace html

1 Answers1