title: Bootstrap Modal: Undefined
body: <p>Im trying to add a modal to my website that appears when the Name field of a form is left empty, to notify the user.</p>
  
  <p>What I have so far is:</p>
  
  <pre><code>&lt;div id="myModal-winner" class="modal fade"&gt;
      &lt;div class="modal-dialog"&gt;
         &lt;div class="modal-content"&gt;
            &lt;div class="modal-header"&gt;
                 &lt;button type="button" class="close" data-dismiss="modal" aria-hidden="true"&gt;&amp;times;&lt;/button&gt;
                  &lt;h4 class="modal-title"&gt;There is a Problem!&lt;/h4&gt;
              &lt;/div&gt;
              &lt;div class="modal-body"&gt;
                   &lt;p&gt;Please Enter Name of Winner.&lt;/p&gt;
               &lt;/div&gt;
               &lt;div class="modal-footer"&gt;
                  &lt;button type="button" class="btn btn-info" data-dismiss="modal"&gt;Ok&lt;/button&gt;
               &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
   &lt;/div&gt;
  </code></pre>
  
  <p>The JS that should make the modal appear if Name is left empty:</p>
  
  <pre><code>//when user clicks on the "submit" button
      form.submit({point: point}, function (event) {
          //prevent the default form behavior (which would refresh the page)
          event.preventDefault();
  
          //form validation
          if( !$("input[name=name]", this).val() ) {
            $("#myModal-winner").modal('show');
          }
  
          //put all form elements in a "data" object
          var data = {
              name: $("input[name=name]", this).val(),
              address: $("textarea[name=address]", this).val(),
              about: $("textarea[name=about]", this).val(),
              month: $("select[name=month]",this).val(),
              year: $("select[name=year]",this).val(),
              lat: event.data.point.overlay.getPosition().lat(),
              lon: event.data.point.overlay.getPosition().lng()
          };
          trace(data)
  
          //send the results to the PHP script that adds the point to the database
          $.post("addwinner.php", data, tidy_maps.saveStopResponse, "json");
  </code></pre>
  
  <p>But the console returns: <code>Uncaught TypeError: undefined is not a function</code>, on the line:</p>
  
  <pre><code>  $("#myModal-winner").modal('show');
  </code></pre>
  
  <p>This is the form, with submit button:</p>
  
  <pre><code> &lt;div class="winner-add"&gt;
  &lt;form class="form-horizontal winner-form" method="post" style="display: none" action="addwinner.php"&gt;
      &lt;h4&gt;Add Winner&lt;/h4&gt;
      &lt;img src="" &gt;
      &lt;fieldset&gt;
          &lt;label for="name"&gt;
              &lt;span&gt;Event Name :&lt;/span&gt;
              &lt;input id="name" type="text" name="name" placeholder="Enter Name of Winner" /&gt;
          &lt;/label&gt;
          &lt;label for="address"&gt;
              &lt;span&gt;Description :&lt;/span&gt;
              &lt;textarea id="address" name="address" placeholder="Address of Winner"&gt;&lt;/textarea&gt;
          &lt;/label&gt;
          &lt;label for="about"&gt;
              &lt;span&gt;Description :&lt;/span&gt;
              &lt;textarea id="about" name="about" placeholder="Details of Award"&gt;&lt;/textarea&gt;
          &lt;/label&gt;
          &lt;label for="image"&gt;
              &lt;span&gt;Upload a Photo:&lt;/span&gt;
              &lt;input type="file" id="image" name="image" /&gt;
          &lt;/label&gt;
          &lt;hr&gt;
  
          &lt;div class="form-actions"&gt;
              &lt;input name="Save" type="submit" class="btn btn-success btn-sm" value="Save"&gt;
          &lt;/div&gt;
      &lt;/fieldset&gt;
  &lt;/form&gt;
  </code></pre>