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.