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

R

6

8

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.

Robtrobust answered 30/4, 2009 at 12:44 Comment(3)

Do you want to block all of the user interface, Like the entire page, or just data entry fields or other controls. – Porcia 30/4, 2009 at 12:49

Postback? Is that a mistake/typo? If you're posting back then it is impossible – Seabolt 30/4, 2009 at 13:5

hey @Porcia I want to block a table row. Can you help me? – Thermography 30/7, 2012 at 9:52

F

9

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>

Fides answered 30/4, 2009 at 12:55 Comment(2)

I am trying to block table row, but I am unable to do in this way, my code: $('#required-tr').block({message: null}); It blocks whole page – Thermography 30/7, 2012 at 9:46

The proper method is block(options) – Marylnmarylou 3/6, 2015 at 20:22

S

4

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>

Swink answered 3/12, 2010 at 23:12 Comment(1)

this works but blocks all the form elements once the page is unblocked – Marylnmarylou 3/6, 2015 at 20:12

L

0

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.

Laud answered 30/4, 2009 at 13:15 Comment(0)

A

0

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.

Annals answered 26/7, 2010 at 12:10 Comment(0)

M

0

Have you tried this?

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

Morvin answered 4/8, 2010 at 15:20 Comment(0)

M

0

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

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

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

Marylnmarylou answered 3/6, 2015 at 20:20 Comment(0)

Recommended topics

Hot tags