simple example for .blockUI in jquery

N

6

8

Please guide me to the purpose of blockUI with a simple demonstration.

Nibelung answered 26/10, 2009 at 13:13 Comment(0)

U

16

Take a look at the demos on the plugin page.

You need to do have the following in a page (in this order)

Add a reference to the jQuery core script
Add a reference to the Block UI script
Add the jQuery code required to achieve the overlay when it is required

Underfoot answered 26/10, 2009 at 13:15 Comment(0)

S

2

To create a js file jquery.blockUI.js from this link.and put it into your project where the js files inclu

and in html write this code:

    <div id="throbber" style="display:none;">
        <img src="/static/image/gears.gif" /><h4>Please..</h4>
    </div>
    {% block customjs %}
    <script type="text/javascript">
        $(document).ajaxStop($.unblockUI);
        $(document).ready(function() {
    $.blockUI({ message:$('#throbber') }); 
       });
    </script>

This is a simple demonstration.May be it will be helps to you

Add a reference to the jquery.blockUI.js

Slyviasm answered 30/1, 2017 at 11:26 Comment(0)

P

2

<script type="text/javascript">
$(document).ready(function() { 
    $('#demo10').click(function() { 
        $.blockUI({ 
            message: '<h1>Auto-Unblock!</h1>', 
            timeout: 2000 
        }); 
    }); 
}); 
</script>

Par answered 11/8, 2017 at 9:8 Comment(0)

C

2

I just got help from Adrian Brand and made it work...
So if anyone else is looking for a working sample:

function block() {
  $.blockUI();
  setTimeout(unBlock, 5000); 
}

function unBlock() {
  $.unblockUI();
}

function alertUser() {  
  alert('Alert User'); 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.blockUI/2.70/jquery.blockUI.js"></script>

<button onclick="alertUser()">Alert</button>
<button onclick="block()">Block!</button>
<button onclick="unBlock()">UnBlock!</button>

Chauncey answered 8/2, 2019 at 17:1 Comment(0)

P

1

From the homepage:

The jQuery BlockUI Plugin lets you simulate synchronous behavior when using AJAX, without locking the browser1. When activated, it will prevent user activity with the page (or part of the page) until it is deactivated. BlockUI adds elements to the DOM to give it both the appearance and behavior of blocking user interaction.

If you want to have ajax, but you also want to block user input while a long ajax request is happening, then BlockUI is for you.

Paramo answered 26/10, 2009 at 13:16 Comment(1)

Hi i would like to simple demonstation from you people since i am new to JQuery it woulld be more helpful to me. --Thanks – Nibelung 27/10, 2009 at 7:29

H

0

Here is a very basic example:

<!DOCTYPE html>
<html>
<head>
    <title>Jquery BlockUi Plugin</title>
    <script type="text/javascript" src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
    <script src="http://malsup.github.io/jquery.blockUI.js" type="text/javascript"></script>
</head>
<body>
    <button class="btn">
        Click me to block UI
    </button>

</body>
<script type="text/javascript">
    $('.btn').click(function(argument) {
        $.blockUI({message:"Ui is blocked"});
        setTimeout($.unblockUI,2000)
    })
</script>

</html>

Hausa answered 12/9, 2019 at 11:1 Comment(0)

Recommended topics

Hot tags