부트 스트랩 모달 - 클릭시 즉시 모달 닫기

Question

서버에 GET 요청을 보내고 데이터베이스의 데이터로 모달을 채우려고합니다. 나는 그것을 API처럼 만들려고 노력 중이므로 나중에 나에게 더 쉽다.

모든 앵커 태그에 showAjaxModal 클래스를 추가하면 자동으로 모달을로드하고 앵커 태그의 href 속성에 ajax 요청을 수행하려고합니다. 때문에 최종 사용자의 경험에의 악영향으로 사용되지 않는 메인 스레드에서

동기 XMLHttpRequest의 :

그러나, 그래서, 모두 작동하지만 모달 즉시 사라 일에 나는이 오류 메시지가 표시됩니다. 도움이 필요하면 https://xhr.spec.whatwg.org/을 확인하십시오.

JS 바이올린 : 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> 

모달 :

<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/