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.