CODEWITHSUNDEEP
jqueryasp.netajaxblockuijquery-blockui
user2465744
user2465744

Reputation: 11

Blocking screen on ajax callback

I want to block my web page screen whenever there is ajax activity and unblock the screen when that ajax activity ends. For doing this I am using block ui. But its not working in my case, I dont know why. Here is my code:

<head runat="server">
<script type="text/javascript" src="jQuery 1.10.1.min.js"></script>
<script type="text/javascript" src="blockui.js"></script>
<script type="text/javascript">
    $(document).ready(function () {
        $(document).ajaxStart($.blockUI).ajaxStop($.unblockUI);
    });
</script>
<title></title>


<body>
    <form id="form1" runat="server">
    <div>
        <input id="Button1" type="button" value="button" onclick="__doPostBack('UpdatePanel1', '');" />
    </div>
    <asp:UpdatePanel ID="UpdatePanel1" runat="server">
        <ContentTemplate>
            <div id="blockit" style="width: 200px; height: 200px;">
            </div>
        </ContentTemplate>
    </updatepanel>
    </form>
</body>
</html>

I dont know what is wrong with my code. please help me out

Upvotes: 1

Views: 1020

Answers (1)

Aristos
Aristos

Reputation: 66649

When you use UpdatePanel, you can use the javascript functions that come with. The jQuery functions not work because they are for the jQuery ajax call, not for the UpdatePanel.

So you can setup this code where you open and close the full screen div.

<script type="text/javascript"> 
   // if you use jQuery, you can load them when dom is read.
   $(document).ready(function () {
       var prm = Sys.WebForms.PageRequestManager.getInstance();    
       prm.add_initializeRequest(InitializeRequest);
       prm.add_endRequest(EndRequest);
    });        

    function InitializeRequest(sender, args) {
       // Open the full wait screen
       $("#overlay").show();
    }

    function EndRequest(sender, args) {
       // close the full wait screen
       $("#overlay").hide();    
    }
</script>

Update:About the Sys. -> http://msdn.microsoft.com/en-us/library/bb311028.aspx

And the overlay part on the html....

<div id="overlay" style="display:none;"> </div>

css

#overlay {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color:#000;
    opacity: .75;
    z-index: 9999999;
}

Overlay reference: http://dabblet.com/gist/2894437
https://stackoverflow.com/a/10945291/159270

Upvotes: 1

Related Questions