skip to Main Content

I need to load jquery-ui for the autocomplete function of jquery, which flask-bootstrap doesn’t have. I added it to the template with this line

<script src="" ></script>

However, I let Flask-Bootstrap load jquery.js, it always loads it AFTER the template loads jquery-ui, so jquery-ui fails since it requires jquery to be loaded first.

GET [HTTP/1.1 200 OK 123ms]
GET [HTTP/1.1 200 OK 181ms]
GET [HTTP/1.1 200 OK 324ms]
GET [HTTP/1.1 200 OK 289ms]
GET [HTTP/1.1 200 OK 111ms]
GET [HTTP/1.1 200 OK 175ms]
ReferenceError: jQuery is not defined jquery-ui.js:14:2
ReferenceError: $ is not defined

To temporarily solve this, I modified the __init.py__ of flask-bootstrap to prevent it from loading jquery and manually loaded it in the template. This page worked but every other page stopped working since jquery wasn’t loaded anymore.

Is there any way to make sure flask-bootstrap loads jquery first, then make the template load jquery-ui or flask-bootstrap load jquery-ui itself?

{% extends "base.html" %}
{% import "bootstrap/wtf.html" as wtf %}

{% block head %}
    {{ super() }}
    <link href="" rel="Stylesheet"></link>
    <script src="" ></script>
{% endblock %}

{% block title %}Project-Z{% endblock %}

{% block page_content %}
<div class="page-header">
    <h1> Members list </h1>
    <h2>Find a member</h2>
    <div class="col-md-4">
        {{ wtf.quick_form(form) }}

<script type="text/javascript">
    $(function() {
        $( "#member_name" ).autocomplete({
            source: '{{url_for("main.autocomplete")}}',
            minLength: 2,
{% endblock %}



  1. Chosen as BEST ANSWER

    Instead of putting the script in the head, I have to put it in the script section so it loads later in the sequence. This way it loads correctly after the Flask-bootstrap jquery.js loads.

    {% block scripts %}
       <script src="" ></script>
    {% endblock %}

  2. If jquery-ui is not loaded after jquery and before bootstrap, then some bootstrap JS effects may be broken, like in Bootstrap tooltip css not working.

    It’s not ideal, but here is another solution. Do not add the super() to your block, and directly copy the original content, adding your jquery-ui import at the right place.

    {% block scripts %}
      <script src="{{bootstrap_find_resource('jquery.js', cdn='jquery')}}"></script>
      <script src=""></script> <!-- Add it here -->
      <script src="{{bootstrap_find_resource('js/bootstrap.js', cdn='bootstrap')}}"></script>
    {% endblock %}

    Original content can be found in the project template

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top