title: Bootstrap modal - Modal closing immediately on click
body: <p>I am trying to do a GET request to server and populate the modal with data from database. I am trying to make it like a API so that it is easier for me in the future.</p>
  
  <p>By adding <code>showAjaxModal</code> class to all anchor tags, I am trying to automatically load the modal and do an ajax request to the <code>href</code> attribute of the anchor tag.</p>
  
  <p>However, upon doing so, it all works but the modal immediately disappears and I get this error message: </p>
  
  <blockquote>
    <p>Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience. For more help, check <a href="https://xhr.spec.whatwg.org/" rel="nofollow">https://xhr.spec.whatwg.org/</a>.</p>
  </blockquote>
  
  <p>JS Fiddle: <a href="https://jsfiddle.net/43jj3q30/" rel="nofollow">https://jsfiddle.net/43jj3q30/</a></p>
  
  <p>Code:</p>
  
  <pre><code>&lt;a class="btn btn-primary showAjaxModal" data-toggle="modal" href="/api/path-to-request" data-target="#modal-id"&gt;Trigger modal&lt;/a&gt;
  </code></pre>
  
  <p>Modal:</p>
  
  <pre><code>&lt;div class="modal fade" id="modal-id"&gt;
  
      &lt;div class="modal-dialog"&gt;
  
          &lt;div id="modal-loading-icon"&gt;&lt;/div&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;Modal title&lt;/h4&gt;
              &lt;/div&gt;
  
              &lt;div class="modal-body"&gt;
                  Modal body ...
              &lt;/div&gt;
  
              &lt;div class="modal-footer"&gt;
                  &lt;button type="button" class="btn btn-default" data-dismiss="modal"&gt;Close&lt;/button&gt;
              &lt;/div&gt;
  
          &lt;/div&gt;&lt;!-- /.modal-content --&gt;
      &lt;/div&gt;&lt;!-- /.modal-dialog --&gt;
  &lt;/div&gt;&lt;!-- /.modal --&gt;
  </code></pre>
  
  <p>My Ajax code:</p>
  
  <pre><code> $('.showAjaxModal').click(function (event) {
              var loadingIcon = $('.modal-loading-icon');
              var ajaxUrl = $(this).attr('href');
  
              $.ajax({
                  url: ajaxUrl,
                  beforeSend: function () {
                      loadingIcon.show();
                  }
              }).success(function (data) {
  
                  event.preventDefault();
                  loadingIcon.hide();
  //              $('.modal-body').html(data);
                  $('.modal-body').html('test');
  
              });
          });
  </code></pre>
  
  <p>What exactly am I doing wrong here? Please help.</p>
  
  <p>Thank you!</p>