CODEWITHSUNDEEP
jqueryblockui
Kunal Mukherjee
Kunal Mukherjee

Reputation:

Block UI until a page has fully loaded : jquery, blockUI plugin

How can I block the UI when the page is still loading using jquery and blockUI plugin? If the page was being loaded using an AJAX call I know the workaround, but when the page is loading with a postback, then how to block the ui until the page has finished loading completely?

Please help. Many thanks in advance for your effort and time.

Upvotes: 8

Views: 32258

Answers (6)

Kremena Lalova
Kremena Lalova

Reputation: 541

The complete code that finally worked for me is the following: 

$("body").block({ message: '<h2>Loading...</h2>' });

$(document).ready(function () {
     $("body").unblock();
});

Upvotes: 0

Ecropolis
Ecropolis

Reputation: 2025

Building on and correcting Seb's answer. If you are blocking the UI use .blockUI() and if targeting an object use .block(). I don't believe you need to target body, essentially that's what the function blockUI does on it's own. You DO need to call the function after the body tag... otherwise there is no <body> tag. If you really want to keep the UI blocked until every image is loaded, see the last line. If you only wanted the page content to load you could put the unblock function at the bottom of your familiar $(document).ready(function().

<script type="text/javascript">  
$("body").block(options);   
//--or--  
$.blockUI(options);  
</script>

<script type="text/javascript">   
$(document).ready(function() {  
   $(window).load(function() { $.unblockUI(); }); //load everything including images.  
//--or--  
   $.unblockUI(); //only make sure the document is full loaded, including scripts.  
});  
</script>

Upvotes: 4

Andy Evans
Andy Evans

Reputation: 7176

Have you tried this?

<script type="text/javascript">
    $(document).ready(function () {
        $.blockUI(options);
    });
</script>

Upvotes: 0

dhinesh
dhinesh

Reputation: 4764

Problem would be in refering the javascript files.

If block UI needs to be added in the ASP.NET Ajax pages try including the javascript files in the ScriptManager.

Upvotes: 0

Gustavo Cardoso
Gustavo Cardoso

Reputation: 747

You can try start the page with all components disabled and then enable their on the PageLoad event. Other idea is put a CSS class that hide all the page and change this on the load with JQuery.

Upvotes: 0

Seb
Seb

Reputation: 25147

You'll need to fire the blockUI plugin as soon as the body tag is output.

Instead of the traditional:

<script type="text/javascript">
  $(function (){
    $("body").blockUI(options);
  });
</script>

You'll need to forget about the enclosing $(function (){}) or $(document).ready(function (){}) so your script fires immediately:

<script type="text/javascript">
  $("body").blockUI(options);
</script>

Upvotes: 9

Related Questions