jQuery .post 또는 UI 대화 상자에는“기다려주세요. .” 아이콘 옵션?

StackOverflow https://stackoverflow.com/questions/1817602

문제

링크를 클릭하면 JavaScript 함수에 jQuery .post 호출이 있습니다. 여기에서는 부분적으로 부분적으로 jQuery UI 대화 상자로 반환하는 컨트롤러 작업을 호출합니다.

컨트롤러가 일부 계산 등의 모델을 호출함에 따라이 프로세스는 몇 초가 걸릴 수 있습니다. .

어쨌든 어쨌든 "잠깐만 기다려주세요." 또는 링크가 클릭 한 후 대화 상자가 표시 될 때까지 애니메이션 아이콘?

도움이 되었습니까?

해결책

Ajax로드 이미지를 잡습니다 ajaxload.info. 페이지에 숨겨진 div에 넣은 다음 Ajax 물건이 발생하는 동안 DIV를 표시하십시오. Ajax 호출이 완료되면 다시 숨기십시오.

다른 팁

JavaScript 타임 아웃을 만들어 이것을 구현 한 다음 jQuery가 반환 할 때 숨겨져있는 Div를 기다리는 제발 DIV를 보여줍니다.

내 js는

function ClearTimeoutError(timeoutId) {
    clearTimeout(timeoutId);
    if ($('.timeout').is(':visible')) { $('.timeout').fadeOut(100); };
}

이것은 jQuery postback을 수행하는 내 방법에 있습니다. 모든 비 필수 코드를 제거했습니다.

var timeoutId = setTimeout(function() { $('.timeout').center(); $('.timeout').fadeIn(250); }, 2000);

    $.ajax({
        type: "POST",
        .
        .
        .
        success: function(msg) {
            ClearTimeoutError(timeoutId);

다른 시간 초과를 만들어 너무 오래 걸릴 때 기다렸다가 오류 div 또는 무언가를 표시함으로써 다른 시간 초과를 만들어서 더 으르렁 거릴 수 있습니다.

ASP.NET AJAX 라이브러리를 사용할 때는 PageRequestManager에 쇼 메소드와 숨기기 메소드를 등록하여 모달 비동기 표시기를 등록 할 수 있습니다.

예를 들어 마스터 페이지에 다음 코드를 배치합니다.

<%@ Register Assembly="AjaxControlToolkit" 
    Namespace="AjaxControlToolkit" 
    TagPrefix="cc1" %>
...
<style>
.modalBackground {
    background-color: #efefef;
    filter: alpha(opacity=70);
    MozOpacity: 0.7;
    opacity: 0.7; 
}  
.updateProgress div {
    border-width: 1px;
    border-style: solid;     
    background-color: #ffffff;
    position: relative; 
    top: 30%; 
    text-align: center;
    padding: 5px 5px 5px 5px;
}
</style>
...
<asp:Panel ID="pnlUpdateProgress" runat="server" 
    CssClass="updateProgress" 
    style="display: none; height: 0;">
<div>
    <asp:Image ID="commentViewThrobber" runat="server" 
            ImageAlign="AbsMiddle" 
            AlternateText="Please Wait..." 
            ImageUrl="~/images/throbber-slow.gif" 
            EnableViewState="false" />
    Please wait...
</div>
</asp:Panel>
<cc1:ModalPopupExtender ID="ModalProgress" runat="server"
    TargetControlID="pnlUpdateProgress" 
    BackgroundCssClass="modalBackground" 
    PopupControlID="pnlUpdateProgress" />

다음을 시작 스크립트로 등록하십시오.

<script language='JavaScript' type='text/javascript'>

var ModalProgress ='<%= ModalProgress.ClientID %>'
Sys.WebForms.PageRequestManager.getInstance().add_beginRequest(beginReq); 
Sys.WebForms.PageRequestManager.getInstance().add_endRequest(endReq);    

function beginReq(sender, args) {
// shows the Popup     
$find(ModalProgress).show();        
}  

function endReq(sender, args) {
//  hides the Popup     
$find(ModalProgress).hide(); 
}

</script>

글로벌 "jquery가 ajax 물건을하고있다"핸들러를 원한다면 jQuery는 일부가 있습니다. 글로벌 Ajax 이벤트 당신이들을 수 있습니다. 그들은 무엇과 같은 것을 트리거하기에 좋은 장소입니다 크리스 제안.

편집하다 그리고 화면을 회색으로 만드는 좋은 방법을 찾고 있다면 성공했습니다. 단순 모달 과거에. 가까이 통과하는 것을 잊지 마십시오 : 옵션에서 거짓이지만, 사용자가 대기 메시지를 닫는 것을 원하지 않을 것입니다 :-)

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top