How to disable the command buttons and Grey out the total vf page on any action?

Usually we multiple records creates whenever multiple click on save button on custom save button on VF page. So to overcome this issue we can hide the all buttons once user click on buttons.

VF Page:

<apex:commandButton action=”{!doSave}” id=”saveButton ” value=”save” onclick=”disableAllButtons()”/>

<apex:commandButton action=”{!doCancel}” id=”cancelButton” value=”cancel” onclick=” disableAllButtons()”/>

<Script>

var j$ = jQuery.noConflict();

function disableAllButtons(){

j$(“[id$= saveButton],[id$= cancelButton]”).hide();

}

function showButtons(){

j$(“[id$= cancelButton],[id$= saveButton]”).show();

}

</Script>
showButtons function is to show the button once the action.
If we can use the same code for the input fields as well which have the action function. So that we can restrict the user to change the field and click the buttons immediately.
Some times we have to restrict the user to modify the fields on that page after click on button or change on any fields of having action function.

So, here we have to grey out the total VF page to restrict the user to change the fields if any action is In-progress.

The below code is to grey out the page. Gering out the backgrouond,status box and all tex boxes in the page.

<apex:commandButton action=”{!doSave}” id=”saveButton ” value=”save” onclick=”disableAllButtons()”/>

<apex:commandButton action=”{!doCancel}” id=”cancelButton” value=”cancel” onclick=” disableAllButtons()”/>

<div id=”processingSimbol” style=”display:none;”>

“Processing…….” </div>

<Script>

var j$ = jQuery.noConflict();

function disableAllButtons(){

j$(“[id$= saveButton],[id$= cancelButton]”).hide();

j$(“# processingSimbol “).show();

j$(“[id$=formId]”).append(j$(“<div>”,{“id”:”blurybackground”})

,j$(“<div>”,{“id”:”statusBox”})

.append(

j$(“<img>”,{“src”:”/img/loading32.gif”}),

j$(“<div>”,{“id”:”textBox”}).text(“{!$Label.MDF_Status_Processing}”)));

}

function showButtons(){

j$(“[id$= cancelButton],[id$= saveButton]”).show();

j$(“#blurybackground, #statusBox”).remove();

if(globalFocus != null){

globalFocus.focus();

if(globalFocus.attr(‘class’).indexOf(‘amountInput’)!=-1){

var focusId = globalFocus.attr(‘id’).split(‘:’).join(‘\\\\:’);

setTimeout(function(){

j$(“#”+focusId).focus();

},300);

}

}

}

</Script>

<style>

#blurybackground {

z-index:1000;

//bottom:0;

position:absolute;

left:0px;

top:0px;

width:100%;

height:100%;

text-align:center;

vertical-align: middle;

background-color: #222;

opacity:0.6;

filter:alpha(opacity=60);

}

#statusBox {

// for Modzilla

-moz-background-clip:border;

-moz-background-inline-policy:continuous;

-moz-background-origin:padding;

-moz-border-radius-bottomleft:5px;

-moz-border-radius-bottomright:5px;

-moz-border-radius-topleft:5px;

-moz-border-radius-topright:5px;

-moz-box-shadow:1px 6px 5px #888888;

-webkit-border-bottom-left-radius:5px;

-webkit-border-bottom-right-radius:5px;

-webkit-border-top-left-radius:5px;

-webkit-border-top-right-radius:5px;

-webkit-box-shadow:1px 6px 5px #888888;

box-shadow: 1px 6px 5px #888888;

z-index:1000;

background:#FFFFFF none repeat scroll 0 0;

height:42px;

width:150px;

left:45%;

top:35%;

padding-left:15px;

padding-top:11px;

position:absolute;

vertical-align:middle;

}

#textBox {

margin-left:40px;

margin-top:-20px;

font-weight:bold;

font-size:14px;

}

</style>