title: Load jquery before jquery-ui when using Flask-Bootstrap
body: <p>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</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;script src="http://code.jquery.com/ui/1.11.2/jquery-ui.js" &gt;&lt;/script&gt;
  </code></pre>
  
  <p>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.</p>
  
  <pre class="lang-none prettyprint-override"><code>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
  </code></pre>
  
  <p>To temporarily solve this, I modified the <code>__init.py__</code> 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.</p>
  
  <p>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?</p>
  
  <pre class="lang-html prettyprint-override"><code>{% extends "base.html" %}
  {% import "bootstrap/wtf.html" as wtf %}
  
  {% block head %}
      {{ super() }}
      &lt;link href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css" rel="Stylesheet"&gt;&lt;/link&gt;
      &lt;script src="http://code.jquery.com/ui/1.11.2/jquery-ui.js" &gt;&lt;/script&gt;
  {% endblock %}
  
  {% block title %}Project-Z{% endblock %}
  
  {% block page_content %}
  &lt;div class="page-header"&gt;
      &lt;h1&gt; Members list &lt;/h1&gt;
      &lt;h2&gt;Find a member&lt;/h2&gt;
      &lt;br&gt;
      &lt;div class="col-md-4"&gt;
          {{ wtf.quick_form(form) }}
      &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;script type="text/javascript"&gt;
      $(function() {
          $( "#member_name" ).autocomplete({
              source: '{{url_for("main.autocomplete")}}',
              minLength: 2,
          });
      });
  &lt;/script&gt;
  {% endblock %}
  </code></pre>