부트 스트랩 모달 창 + mysql의 Ajax

Question

사용자가 내 앱에서 해당 버튼을 클릭하면 팝업 창이 시작됩니다. 나는

$('#modal').on('show', function() { 
    $.ajax({ ... }); 
}); 

를 사용하고 아약스와 나는 모달 헤더, 모달 - 몸과 모달 - 바닥 글 삽입 할 MySQL의에서 일부 JSON 콘텐츠를 부탁드립니다. 이것은 일반적으로 내 웹 페이지에 내가 사용하는 html로, 버튼 선택을 할 때 새로 고침하고 보여주기를 원합니다.

 <div class="modal hide fade" id="modal"> 
      <div class="modal-header"></div> 
      <div class="modal-body"></div> 
      <div class="modal-footer"></div> 
     </div> 

문제는 모달가 업데이트 케이크를 제공 등등 그래서 아약스 빈 나타나거나 이전 전달 내용을 보여줍니다 1 초 후 또는이다. 따라서 콘텐츠 업데이트는 사용자 눈앞에서 슬프게 실행됩니다. Modal API는 'show'보다 더 나은 옵션을 제공하지 않으므로 전체 내용을 Ajax가 가져 와서 최종 사용자의 화면에 전달할 준비가되었을 때만 모달을 표시 할 수 있습니다.

Answer 1

좋아, 나는 다른 sth 시도했다. 버튼을 클릭하면 성공 옵션의 첫 번째 내용이 보관 된 후 ajax 호출을 실행 한 다음 수동으로 모달 창을 호출하여 업데이트 된 항목을 표시합니다.

$('a[href=#viewProperty]').click(function(e) { 

    var dataString = "action=viewProperty&propertyId=" + $.cookie('propertyId'); 

    $.ajax({ 
     type  : "GET", 
     dataType : "json", 
     url  : "ajax/property.php", 
     data  : dataString, 
     success : function(data){ 
      console.log("ajax works"); 
      //$.removeCookie('propertyId'); 
      console.log(data.house_type); 
      $('#viewProperty h3').empty().html('View Property: ' + data.house_type); 

      $('#viewProperty').modal('show');    
     }, 
     error : function(){ 
      console.log("ajax failed"); 
     } 
    }); 

    return false; 
}); 

잘 작동합니다. 단지 남은 것은 아약스 호출이 완료되기 전에 로더를 추가하는 것입니다.