Jquery 대화창에 통화 중 표시가 나타나지 않습니다.

Question

jquery 확인 대화 상자가 있습니다. 사용자가 OK를 누르면 몇 초가 걸릴 Ajax 호출을 실행합니다. 이 지연 중에 대화 상자에 gif 애니메이션을 표시하여 사용자가 자신의 데이터를 처리하고 있음을 알고 싶습니다. 그러나 대화 상자에 gif가 표시되지 않습니다.

HTML은 다음과 같습니다

는

<div id="dlgReleaseConfirmation" title="ConfirmRelease" style="display : none" > 
    <div id="release-in-progress" style="display:none"> 
      <img src="images/ajax-loader.gif" ></img> 
    </div> 
</div> 

의 js 파일의 코드는 다음과 같습니다

 $("#dlgReleaseConfirmation").dialog({ 
     modal: true, 
     buttons: { 
      "Release": function() { 
       $("#release-in-progress").show();  // show the busy div - not working, blocked by dialog? 
       Release(); // release assays 
       loadTable();   // refresh datatable 
       $("#release-in-progress").hide();  // hide the busy div 
       $(this).dialog("close"); // close this dialog 
      }, 
      Cancel: function() { 
       $(this).dialog("close"); 
      } 
     } 

사람이 내가 뭘 잘못 볼 수 있을까요?

해결책으로 업데이트하십시오.

알렉산더가 나를 올바른 길로 보냈습니다. 결론은 Ajax 호출을 비동기로 호출해야 대화 상자가 사용중 표시기를 표시하도록 업데이트된다는 것입니다. 그러나이 작업을 수행하면 아약스 호출이 비동기식으로 진행되는 동안 코드가 계속되고 화면이 닫히는 문제가 발생하여 사용자에게 피드백이 제공되지 않습니다.

이 문제를 해결하기 위해 비동기 Ajax가 진행되는 곳을 호출하는 동안 Busy 표시기를 숨기고 표시하기 위해 ajaxStart() 및 ajaxStop()에 대한 호출을 추가했습니다.

"Release": function() { 
    $(this).ajaxStart(function() { 
     $("#release-in-progress").show(); 
    }); 
    $(this).ajaxStop(function() { 
     $("#release-in-progress").hide(); 
     $(this).dialog("close"); // close this dialog 
    }); 
    Release(); // release assays 
    loadTable();   // refresh datatable 
}; 

Answer 1

을 요청이 완료되고, 이미지 리소스가 로딩되지 않을 때까지 실행을 동결하는 loadTable() 함수 동기 AJAX 호출 (async: false)을 실행함으로써, 다음은 작동 해제 버튼 핸들러 코드이다. 원하는 것을 얻기 위해 비동기 호출을 사용해야합니다.