Bootstrap modal - Модальное закрытие сразу после нажатия

Question

Я пытаюсь выполнить запрос GET на сервер и заполнять модальные данные из базы данных. Я пытаюсь сделать это как API, чтобы мне было легче в будущем.

Добавляя showAjaxModal класс ко всем привязным тегам, я пытаюсь автоматически загружать модальный код и делать ajax-запрос атрибуту href тега привязки.

Однако, при этом, все это работает, но модальный немедленно исчезает, и я получаю сообщение об ошибке:

Синхронный XMLHttpRequest на основной поток является устаревшим из-за его вредного воздействия на опыт конечного пользователя. Для получения дополнительной помощи проверьте https://xhr.spec.whatwg.org/.

JS Fiddle: https://jsfiddle.net/43jj3q30/

Код:

<a class="btn btn-primary showAjaxModal" data-toggle="modal" href="/api/path-to-request" data-target="#modal-id">Trigger modal</a> 

Modal:

<div class="modal fade" id="modal-id"> 

    <div class="modal-dialog"> 

     <div id="modal-loading-icon"></div> 

     <div class="modal-content"> 

      <div class="modal-header"> 
       <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button> 
       <h4 class="modal-title">Modal title</h4> 
      </div> 

      <div class="modal-body"> 
       Modal body ... 
      </div> 

      <div class="modal-footer"> 
       <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
      </div> 

     </div><!-- /.modal-content --> 
    </div><!-- /.modal-dialog --> 
</div><!-- /.modal --> 

Мой Ajax код:

$('.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'); 

      }); 
     }); 

Что именно я делаю неправильно здесь? Пожалуйста помоги.

Спасибо!

Answer 1

изменить ссылку:

<a class="btn btn-primary showAjaxModal">Trigger modal</a> 

и добавить

$('#modal-id').modal('show'); //add this line to your success callback 

-

success(function (data) { 
    event.preventDefault(); 
    $('#modal-id').modal('show'); //add 
    loadingIcon.hide(); 
    // $('.modal-body').html(data); 
    $('.modal-body').html('test'); 

    }); 

рабочую демо: https://jsfiddle.net/43jj3q30/3/