Skip to main content
 首页 » 编程设计

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

2024年10月25日34pander-it

我需要加载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 %} 

请您参考如下方法:

我没有将脚本放在头部,而是将它放在脚本部分,以便它按顺序加载。这样它就可以在 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 %}