Using jQuery BlockUI with Visualforce | Salesforce Developers Blog

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.

Stay up to date with the latest news from the Salesforce Developers Blog

Subscribe