Jinja, loading javascript script

Question

I have a script that overrides autocomplete

<script type="text/javascript">
$(function() {
$("#autocomplete").autocomplete({
    source:function(request, response) {
        $.getJSON("{{url_for('user.autocomplete')}}",{
            search: request.term, 
        }, function(data) {
            response(data.results); 
        });
    },
    minLength: 2,
    }
});
})

</script>

Later in my code i have the following form

<form method=post action="{{ url_for('user.merge_user')}}">
    <input name="autocomplete" type="text" id="autocomplete" class="form-control input-lg", length="20"/>
    {{ form.user_name(id="autocomplete", class="form-control input-lg") }}
    <input class="btn btn-default" type=submit value=Register>
</form>

The HTML input uses the script as desired but the Jinja version uses the default autocomplete method. How can I get it to use the script?

score 2 · Accepted Answer · answered Sep 08 '16 at 01:44

This is probably the solution you are looking for. It enables Jinja2 to load the JavaScript file before HTML is rendered.

{% block javascript %}
    <script type="text/javascript">
        {% include "script.js" %}
    </script>
{% endblock %}

Also, a similar question can be found here.

Note that if you are using Flask with this solution (which you are), you may experience some issues related to Jinja not finding the JavaScript file on the server. IDK how to fix this; was too lazy anyways.

:3

Jinja, loading javascript script

1 Answers1