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:

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

<apex:page standardController="Contact">
    <script src=""/>
    <script src=""/>
    <script src="" />
    <link rel="stylesheet" type="text/css" media="screen" href="" />

     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'
            } }); 

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


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.


tagged , , , Bookmark the permalink. Trackbacks are closed, but you can post a comment.
  • Interesting. So this basically replaces the need for using ?

  • Effectively, yeah. You could juggle it with if you wanted – but not necessary. It would also work quite well with just JS Remoting as well. Call blockme() prior to the Async Remoting callback, unblock with the handler.

  • Cool. I use jQuery modal popup to achieve the same thing.

  • Łukasz Pietrzak

    I’d say not really.
    It’s still probably better to achieve effect using standard tags.

  • Anonymous

    Unfortunately , I was not able to use this as my VF page had inputFile .

  • Nash Zgonjanin

    Works fine but if you have standard validation message it won’t be displayed after you get back to form (if there was validation errors). You are still on your form in edit mode without red error messages.

  • good job