Using jQuery BlockUI with Visualforce

I came across this post on the boards concerning using the jQuery BlockUI plugin, which was handy because I hadn't had any exposure to the plugin previously. BlockUI is very handy way of controlling your interface to avoid unwanted user behavior. For instance, if you're sending a JavaScript Remoting call over the wire which might take a decent amount of time to process on the Apex side, you could use BlockUI to grey out the page and display a message like this...

I came across this post on the boards concerning using the jQuery BlockUI plugin, which was handy because I hadn’t had any exposure to the plugin previously.  BlockUI is very handy way of controlling your interface to avoid unwanted user behavior.  For instance, if you’re sending a JavaScript Remoting call over the wire which might take a decent amount of time to process on the Apex side, you could use BlockUI to grey out the page and display a message like this:

Here’s some baseline code which would show a brief message like that one when quicksaving a record:

<apex:page standardController="Contact">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"/>
    <script src="https://ajax.microsoft.com/ajax/jquery.ui/1.8.5/jquery-ui.js"/>
    <script src="http://malsup.github.com/jquery.blockUI.js" />
    <link rel="stylesheet" type="text/css" media="screen" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/themes/base/jquery-ui.css" />

    <script>
     j$ = jQuery.noConflict(); 

    function blockme() {
        j$.blockUI({ css: {
            border: 'none',
            padding: '15px',
            backgroundColor: '#000',
            '-webkit-border-radius': '10px',
            '-moz-border-radius': '10px',
            opacity: .5,
            color: '#fff'
            } }); 

      }
    </script>
    <apex:form >
        <apex:commandButton onclick="blockme()" oncomplete="j$.unblockUI();" value="Save!" action="{!quickSave}" />
    </apex:form>
</apex:page>

 

I would recommend downloading the plugin and serving it from a static resource, however, to avoid any “non-secure content on a secure page” type browser warning. BlockUI has a lot of different options to it and several templates of displaying error messages. Let us know how you might use it for your project.

 

Leave your comments...

Using jQuery BlockUI with Visualforce