Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
jQuery BlockUI Plugin
Nowadays, asynchronous JavaScript is becoming more popular as we don’t require to reload the web page to update the data of the web page. We can use the AJAX request to fetch data from the database and update it on the web page without reloading it.
However, it always takes some minimal time to update the data, which can be either in milliseconds or seconds. It can be irritating for users to see the app is updating data, and users can think that the app is hanging while the app is fetching the data. So, In such cases, we can show a loading UI that can’t allow users to interact with the app.
The Jquery blockUI plugin allows us to block the UI with a nice loading screen, and we can stop users from interacting with the application. Also, we can set the web page or custom HTML as a loading UI using the plugin.
Syntax
Users can follow the syntax below to use Jquery’s block UI plugin to block and unblock the UI.
//Blocking the UI $.blockUI(); //Unblocking the UI $.unblockUI();
In the above syntax, we used the ‘blockUI()’ method to block the UI of the application and ‘unblockUI()’ to unblock the UI of the application.
Example 1
In the example below, we used the blockUI plugin via CDN. Whenever users click the block UI button on the web page, it will call the blockUI() function.
In the blockUI() function, we block the UI using the blockUI() method, and after that, we use the setTimeOut() method to unblock the UI after 2000 milliseconds using the unblockUI() method.
<html>
<head>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.4/jquery.min.js"> </script>
<script src = "https://malsup.github.io/jquery.blockUI.js"> </script>
</head>
<body>
<h3>Using jQuery's blockUI plugin to block UI with a default message</h3>
<p>Click on the below button to block UI</p>
<button onclick = "blockUI()"> Block UI </button>
<script>
function blockUI() {
// block UI
$.blockUI();
setTimeout(function () {
//Unblock UI
$.unblockUI();
}, 2000);
}
</script>
</body>
</html>
Example 2
The example below demonstrates the custom blocking message using the blockUI plugin. Here, we passed the object containing a blockUI() method parameter. The object contains a message as a key and HTML as a value that we want to show on the blocking screen.
In the output, users can observe the custom message on the blocking screen.
<html>
<head>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.4/jquery.min.js"> </script>
<script src = "https://malsup.github.io/jquery.blockUI.js"> </script>
</head>
<body>
<h3>Using the jQuery's blockUI plugin to block UI with a custom message.</h3>
<p>Click on the below button to block UI.</p>
<button onclick = "blockUI()"> Block UI </button>
<script>
function blockUI() {
// block UI
$.blockUI({ message: '<h1><img src="https://cdn-icons-png.flaticon.com/512/6356/6356659.png" height="50px" width="50px"/> Wait for 4 seconds total ... </h1>' });
setTimeout(function () {
// unblock UI
$.unblockUI();
}, 4000);
}
</script>
</body>
</html>
Example 3
In the example below, we demonstrated to add CSS to the custom blocking message and style it. We require to use HTML and CSS to represent any web page, and that’s what the block UI plugin allows us to do.
We can pass the object as a parameter of the blockUI() method, which can contain a message, and CSS as a key with the respected values. We can pass the HTML content of the web page as a value of the message and CSS as a value of the ‘css’ key.
In this way, we can show an attractive web page as blocking UI.
<html>
<head>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.4/jquery.min.js"> </script>
<script src = "https://malsup.github.io/jquery.blockUI.js"> </script>
</head>
<body>
<h3>Using the jQuery's blockUI plugin to block UI with a custom message.</h3>
<p>Click on the below button to block UI.</p>
<button onclick = "blockUI()"> Block UI </button>
<script>
function blockUI() {
// block UI
$.blockUI({ message: '<h1><img src="https://cdn-icons-png.flaticon.com/512/6356/6356659.png" height="50px" width="50px"/> Wait for 4 seconds total ... </h1>' });
setTimeout(function () {
// unblock UI
$.unblockUI();
}, 4000);
}
</script>
</body>
</html>
Example 4
In the example below, we created input fields to take users' custom messages and block duration. In JavaScript, we access the value of inputs, and according to that, we show the blocking message and block the web page till a particular duration.
In the output, users can enter the custom block message and time duration and click on the button to see their choice of blocking message.
<html>
<head>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.4/jquery.min.js"> </script>
<script src = "https://malsup.github.io/jquery.blockUI.js"> </script>
</head>
<body>
<h3>Using the jQuery's blockUI plugin to block UI with custom messages and custom CSS</h3>
<p>Enter the custom blocking message and block duration.</p>
<input type = "text" id = "message" placeholder = "Enter the message to be displayed" /><br> <br>
<input type = "number" id = "duration" placeholder = "Enter the duration in milli seconds" /> <br> <br>
<button onclick = "blockUI()"> Block UI </button>
<script>
function blockUI() {
var message = document.getElementById("message").value;
var duration = document.getElementById("duration").value;
$.blockUI({ message: message });
setTimeout(function () {
$.unblockUI();
}, duration);
}
</script>
</body>
</html>
Users learned to use the block UI plugin to block the UI of web applications. It is useful to show blocking UI while updating the web page's data. Also, it allows us to customize the blocking message and duration.
1K+ Views
