locked
Load modal get stuck sometime after partial postback RRS feed

  • Question

  • User2107475791 posted

    Hello,

    have issue when partial postback is performed I display a progress modal, after partial post back it stays stuck. Also I want to note this happens sometimes, how can I ensure that the progress modal is close after processing is complete everytime, I tried the RequestEnd, and pageLoaded event doesn't seem to do the trick.

    <script type="text/javascript">
    
                Sys.Application.add_init(appl_init);
                // Sys.Application.add_load(WireEvents_<%=this.ID%>);
    
                // $(WireEvents_<%=this.ID%>);
    
                function appl_init() {
                    var pgRegMgr = Sys.WebForms.PageRequestManager.getInstance();
    
                    pgRegMgr.add_beginRequest(BeginRequestHandler);
                    pgRegMgr.add_endRequest(EndRequestHandler);
                    pgRegMgr.add_pageLoaded(PageLoadedHandler);
                }
    
                function WireEvents_<%=this.ID%>() {
                    var isBoolBreak = true;
    
                    if (isBoolBreak) {
    
                    }
                };// end WireEvents_
    
    
                function BeginRequestHandler() {
                    // beforeAsyncPostBack
                    //var curtime = new Date();
                    //alert('Time before PostBack:   ' + curtime);
                    var pgRegMgr = Sys.WebForms.PageRequestManager.getInstance();
    
                    //if (pgRegMgr.get_isInAsyncPostBack()) {
                    ShowProgress();
                    //}
                }
    
                function EndRequestHandler() {
                    // afterAsyncPostBack
                    //var curtime = new Date();
                    //document.getElementById('Label1').innerHTML = 'Time after PostBack:    ' + curtime;
                    var pgRegMgr = Sys.WebForms.PageRequestManager.getInstance();
    
                    //if (pgRegMgr.get_isInAsyncPostBack()) {
                    EnsureHideProgress();
                    //}
                }
    
                function PageLoadedHandler(sender, args) {
                    EnsureHideProgress();
                }
    
            </script>
    
            <script>
    
                function dPbtnSaveClick() {
                    $("#btnSave").click();
                }
                function dpBtnCancelClick() {
                    $("#btnCancel").click();
                }
    
                function ShowProgress() {
                    setTimeout(function () {
                        var modal = $('<div />');
                        modal.attr('id', 'divModalMask');
                        modal.attr('style', 'display:block;');
                        modal.addClass("modal");
                        $('body').append(modal);
                        var loading = $(".loading");
                        loading.show();
                        var top = Math.max($(window).height() / 2 - loading[0].offsetHeight / 2, 0);
                        var left = Math.max($(window).width() / 2 - loading[0].offsetWidth / 2, 0);
                        loading.css({ top: top, left: left });
                    }, 200);
                }
                function EnsureHideProgress() {
                    var modal = $("#divModalMask");
                    //modal.attr('style', 'display:none;');
                    modal.remove();
    
                    var popup = $('#divPopup');
                    popup.attr('style', 'display:none;');
                }
    
            </script>
    
            <style type="text/css">
                .modal {
                    ;
                    top: 0;
                    left: 0;
                    background-color: black;
                    z-index: 99;
                    opacity: 0.8;
                    filter: alpha(opacity=80);
                    -moz-opacity: 0.8;
                    min-height: 100%;
                    width: 100%;
                }
    
                .loading {
                    font-family: Arial;
                    font-size: 10pt;
                    /*border: 5px solid #67CFF5;*/
                    width: 200px;
                    height: 100px;
                    display: none;
                    ;
                    background-color: transparent; /*white*/
                    z-index: 999;
                }
    
                .GrdHeaderCaption {
                    font-size: smaller;
                }
            </style>

    <html>
    <head><title></title><head>
    <body>
    
    <form id="form1">
    
    <asp:UpdatePanel ID="Update1" runat="server" UpdateMode="Conditional" ChildrenAsTriggers="true">
                        <Triggers>                        
                            <asp:AsyncPostBackTrigger ControlID="btnSave" EventName="Click" />
                        </Triggers>
    <ContentTemplate>
    
    </ContentTemplate>
    
    </asp:UpdatePanel>
    
    <div id="divPopup" class="loading" align="center">
                Loading. Please wait.<br />
                <br />
                <img src="../images/loading_black.gif" alt="" />
            </div>
        </form>
    
    </body>
    </html>

    Saturday, December 24, 2016 4:20 PM

Answers

  • User-271186128 posted

    Hi awaredoc,

    Load modal get stuck sometime after partial postback

    According to your description, I try to create a sample using your code, and achieve your requirement. But, it not success.

    I suggest you could refer to the following code and try to use UpdateProgress control to display the progress model.

        <style type="text/css">
            body {
                margin: 0;
                padding: 0;
                font-family: Arial;
            }
    
            .modal1 {
                ;
                z-index: 999;
                height: 100%;
                width: 100%;
                top: 0;
                background-color: Black;
                filter: alpha(opacity=60);
                opacity: 0.6;
                -moz-opacity: 0.8;
            }
    
            .center {
                z-index: 1000;
                margin: 300px auto;
                padding: 10px;
                width: 130px;
                background-color: White;
                border-radius: 10px;
                filter: alpha(opacity=100);
                opacity: 1;
                -moz-opacity: 1;
            }
    
                .center img {
                    height: 128px;
                    width: 128px;
                }
        </style>
                <asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server"></asp:ToolkitScriptManager>
                <asp:UpdateProgress ID="UpdateProgress1" runat="server" AssociatedUpdatePanelID="UpdatePanel1">
                    <ProgressTemplate>
                        <div class="modal1">
                            <div class="center">
                                <img alt="" src="loader.gif" />
                            </div>
                        </div>
                    </ProgressTemplate>
                </asp:UpdateProgress>
                <asp:UpdatePanel ID="UpdatePanel1" runat="server">
                    <ContentTemplate>
                        <div align="center">
                            <h1>Click the button to see the UpdateProgress!</h1>
                            <asp:Button ID="Button1" Text="Submit" runat="server" OnClick="Button1_Click" />
                        </div>
                    </ContentTemplate>
                </asp:UpdatePanel>

    Code behind:

       protected void Button1_Click(object sender, EventArgs e)
            {
                System.Threading.Thread.Sleep(5000);
            }

    More details, see:

    http://www.aspsnippets.com/Articles/Display-ASPNet-AJAX-UpdateProgress-in-center-of-page-with-background-covering-whole-screen.aspx

    http://www.aspsnippets.com/Articles/Show-progress-bar-on-Button-Click-in-ASPNet.aspx

    Best regards,
    Dillion

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, December 28, 2016 2:33 AM

All replies

  • User-271186128 posted

    Hi awaredoc,

    Load modal get stuck sometime after partial postback

    According to your description, I try to create a sample using your code, and achieve your requirement. But, it not success.

    I suggest you could refer to the following code and try to use UpdateProgress control to display the progress model.

        <style type="text/css">
            body {
                margin: 0;
                padding: 0;
                font-family: Arial;
            }
    
            .modal1 {
                ;
                z-index: 999;
                height: 100%;
                width: 100%;
                top: 0;
                background-color: Black;
                filter: alpha(opacity=60);
                opacity: 0.6;
                -moz-opacity: 0.8;
            }
    
            .center {
                z-index: 1000;
                margin: 300px auto;
                padding: 10px;
                width: 130px;
                background-color: White;
                border-radius: 10px;
                filter: alpha(opacity=100);
                opacity: 1;
                -moz-opacity: 1;
            }
    
                .center img {
                    height: 128px;
                    width: 128px;
                }
        </style>
                <asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server"></asp:ToolkitScriptManager>
                <asp:UpdateProgress ID="UpdateProgress1" runat="server" AssociatedUpdatePanelID="UpdatePanel1">
                    <ProgressTemplate>
                        <div class="modal1">
                            <div class="center">
                                <img alt="" src="loader.gif" />
                            </div>
                        </div>
                    </ProgressTemplate>
                </asp:UpdateProgress>
                <asp:UpdatePanel ID="UpdatePanel1" runat="server">
                    <ContentTemplate>
                        <div align="center">
                            <h1>Click the button to see the UpdateProgress!</h1>
                            <asp:Button ID="Button1" Text="Submit" runat="server" OnClick="Button1_Click" />
                        </div>
                    </ContentTemplate>
                </asp:UpdatePanel>

    Code behind:

       protected void Button1_Click(object sender, EventArgs e)
            {
                System.Threading.Thread.Sleep(5000);
            }

    More details, see:

    http://www.aspsnippets.com/Articles/Display-ASPNet-AJAX-UpdateProgress-in-center-of-page-with-background-covering-whole-screen.aspx

    http://www.aspsnippets.com/Articles/Show-progress-bar-on-Button-Click-in-ASPNet.aspx

    Best regards,
    Dillion

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, December 28, 2016 2:33 AM
  • User2107475791 posted

    thx, dillion, I also figure out what was wrong with mine the setTimeout value was set to high, so when the page finish and it hadn't executed the function to display the progress status, endrequest had already when executed which leaves it stuck after the page has processed. Also your response is great also. :) marking your post as answered.

    thx,

    willie

    Wednesday, January 11, 2017 3:42 PM