title: Uncaught ReferenceError: $ is not defined python flask
body: <p>I'm trying to run my JavaScript to just produce alert when the button is clicked on python flask. The problem I am having is i'm having is an error in JS file first line: <code>Uncaught ReferenceError: $ is not defined</code>. Even swapping first <code>$</code>
  with jQuery still doesn't work.</p>
  
  <p>My structure is:</p>
  
  <pre><code>app: - main.py
       - static    - js - mainJs.js
                      - lib -  jquery-2.2.4.min.js
                            -  jquery-ui.js
  
                   - css - stylesheet.css
       - templates - index.html
  </code></pre>
  
  <p>I am sure I imported everything correctly, since my html file is:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
      &lt;title&gt;First doc&lt;/title&gt;
      &lt;meta charset="UTF-8"&gt;
      &lt;link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='css/stylesheet.css') }}"&gt;
      &lt;script type="text/javascript" src="{{ url_for('static', filename = 'js/mainJs.js') }}"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="{{ url_for('static', filename = 'js/lib/jquery-2.2.4.min.js') }}"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="{{ url_for('static', filename = 'js/lib/jquery-ui.js') }}"&gt;&lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
  
      {{err}}
      &lt;form id="commentForm" action="/addComment" method="POST"&gt;
          &lt;table&gt;
              &lt;tr&gt;
                  &lt;td&gt;
                      &lt;textarea id="username" rows="1" cols="50"  name="username"&gt;&lt;/textarea&gt;
                  &lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
                  &lt;td&gt;
                      &lt;textarea rows="4" cols="50" id="textArea" name="thetext"&gt;&lt;/textarea&gt;
                  &lt;/td&gt;
              &lt;/tr&gt;
          &lt;/table&gt;
          &lt;input id="rand" type ="submit" value="Submit" onclick = "substitute()" /&gt;
      &lt;/form&gt;
  
      {% for item in Message %}
      &lt;table&gt;
          &lt;tr&gt;
              &lt;td&gt;
                  {{item}}
              &lt;/td&gt;
          &lt;/tr&gt;
      &lt;/table&gt;
      {% endfor %}
      &lt;div id="testDiv"&gt; 
      &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>And my JavaScript file is simply:</p>
  
  <pre><code>$(document).ready(function(){
      $("#rand").click(function(){
          window.alert("its working!");
      });
  });
  </code></pre>