Twitter Bootstrap Question posted in

Twitter bootstrap – Load jquery before jquery-ui when using Flask-Bootstrap

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="http://code.jquery.com/ui/1.11.2/jquery-ui.js" ></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://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/css/bootstrap.css [HTTP/1.1 200 OK 123ms]
GET http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css [HTTP/1.1 200 OK 181ms]
GET http://code.jquery.com/ui/1.11.2/jquery-ui.js [HTTP/1.1 200 OK 324ms]
GET http://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.2/jquery.js [HTTP/1.1 200 OK 289ms]
GET http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/js/bootstrap.js [HTTP/1.1 200 OK 111ms]
GET http://cdnjs.cloudflare.com/ajax/libs/moment.js/2.5.1/moment-with-langs.min.js [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="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css" rel="Stylesheet"></link>
    <script src="http://code.jquery.com/ui/1.11.2/jquery-ui.js" ></script>
{% endblock %}

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

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

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

2

Answers


  1. Chosen as BEST ANSWER
    0

    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. http://pythonhosted.org/Flask-Bootstrap/faq.html#how-can-i-add-custom-javascript-to-the-template

    {% block scripts %}
  {{super()}}
   <script src="http://code.jquery.com/ui/1.11.2/jquery-ui.js" ></script>
{% endblock %}

  2. 0

    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="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></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 https://github.com/mbr/flask-bootstrap/blob/3e2695bb36f29bf72befce86c9e63609c3016203/flask_bootstrap/templates/bootstrap/base.html#L26-L29

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

Back To Top
Search