title: Uncaught TypeError: undefined for Bootstrap Modal
body: <p>View code:</p>
  
  <pre><code>&lt;div class="modal fade" id="warning_modal"&gt;
    ...
  &lt;/div&gt;
  </code></pre>
  
  <p>Javascript:</p>
  
  <pre><code>if (&lt;%= flash[:warning] %&gt; === true ) {
    console.log("it's now in the function")
    $('#warning_modal').modal({
      show: true,
      keyboard: true
    });
  }
  </code></pre>
  
  <p>My <code>console.log</code> runs and the error is at the <code>$('#warning_modal').modal({</code> line, it's saying <code>Uncaught TypeError: undefined is not a function</code>. What could be causing this?</p>
  
  <p>Note: I've required <code>bootstrap.js</code> in my <code>application.js</code> file as below, but this does appear to be a loading problem, since in the console, <code>$('#warning_modal')</code> finds the object but <code>$('#warning_modal').modal</code> returns undefined</p>
  
  <pre><code>//= require jquery
  //= require jquery_ujs
  //= require_tree .
  //= require bootstrap.js
  </code></pre>
  
  <p>Also, I tried adding the bootstrap.js via a CDN as so, but it also didn't work.</p>
  
  <pre><code>&lt;head&gt;
    &lt;link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js" rel="stylesheet"&gt;
  &lt;/head&gt;
  </code></pre>