jquery - 使用 Flask-Bootstrap 时在 jquery-ui 之前加载 jquery

Question

我需要加载jquery-ui来实现jquery的自动完成功能，flask-bootstrap没有。我用这一行将它添加到模板中

<script src="http://code.jquery.com/ui/1.11.2/jquery-ui.js" ></script>

但是，我让 Flask-Bootstrap 加载 jquery.js，它总是在模板加载 jquery-ui 之后加载它，因此 jquery-ui 失败，因为它需要先加载 jquery。

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

为了暂时解决这个问题，我修改了flask-bootstrap的__init.py__使其不加载jquery，在模板中手动加载。此页面有效，但其他所有页面都停止工作，因为不再加载 jquery。

有没有办法确保 flask-bootstrap 先加载 jquery，然后让模板加载 jquery-ui 或 flask-bootstrap 加载 jquery-ui 本身？

{% 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 %}

Answer 1

我没有将脚本放在头部，而是将它放在脚本部分，以便它按顺序加载。这样它就可以在 Flask-bootstrap jquery.js 加载后正确加载。 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 %}