title: Ajax - Bootstrap modal screen - keeps redirecting
body: <p>I'm trying to achieve a modal screen that loads an Ajax page holding an artist profile.</p>
  
  <p>Here is my javascript:</p>
  
  <pre><code>$(document).ready(function() {
      // Support for AJAX loaded modal window.
      // Focuses on first input textbox after it loads the window.
      $('[data-toggle=modal]').click(function() {
  
      var url = $(this).attr('href');
      if (url.indexOf('#') == 0) {
      $(url).modal('open');
      } else {
      $.get(url, function(data) {
      $('&lt;div class="modal hide fade"&gt;' + data + '&lt;/div&gt;').modal();
      }).stop();
      }
      });
  });
  </code></pre>
  
  <p>Here is my HTML that is loaded by Ajax:</p>
  
  <pre><code>&lt;div class="modal-header"&gt;
  &lt;a class="close" data-dismiss="modal"&gt;&amp;times;&lt;/a&gt;
  &lt;h3&gt;&lt;?php echo $model-&gt;display_name; ?&gt;&lt;/h3&gt;
  &lt;/div&gt;
  &lt;div class="modal-body"&gt;
  &lt;p&gt;&lt;?php echo $model-&gt;description ?&gt;&lt;/p&gt;
  &lt;/div&gt;
  &lt;div class="modal-footer"&gt;
  &lt;a class="btn btn-primary" onclick="$('.modal-body &gt; form').submit();"&gt;Save Changes&lt;/a&gt;
  &lt;a class="btn" data-dismiss="modal"&gt;Close&lt;/a&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>This is an example link:</p>
  
  <pre><code>&lt;a class="artistOpenModal" data-toggle="modal" href="/index.php?r=artist/modal/id/25"&gt;&lt;div style="height: 37.5px; top: 187.5px;" id="25" class="artist"&gt;&lt;strong&gt;Question Mark&lt;/strong&gt; 15:45 - 45 min&lt;/div&gt;&lt;/a&gt;
  </code></pre>
  
  <p>I am using jquery 1.10 and the latest version of bootstrap.</p>
  
  <p>My page keeps redirecting to the url specified in the href of my a tag.</p>
  
  <p>Do you see any obvious reasons in my code for this behaviour?</p>
  
  <p>Thx in advance!</p>