Sign Up ›

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
kpeterskpeters 

Disabling all user input during AJAX action

I know I can use an actionStatus to disable a specific button or input field during an action/rerender.  However, I would like to disable all user inputs (check boxes, date inputs, etc.) during a rerender that is triggered by just one input.  Basically, I'd like an actionStatus that all of the inputs are listening on so that they all disable themselves until the the action is complete. 

Best Answer chosen by Admin (Salesforce Developers) 
TehNrdTehNrd

This should do the trick.

 

 

<apex:page controller="DisableInputs" id="page">
    <apex:form id="form" >
        <apex:inputText value="{!inputText}"/>
        <apex:inputField value="{!opp.CloseDate}"/>
        <apex:inputCheckbox value="{!inputBox}"/><br/>
    
        <apex:commandButton value="Click me!" onclick="disableInputs();" oncomplete="enableInputs();"/>
    </apex:form>
    
    <apex:outputPanel id="somethingToRerender">
        Nothing    
    </apex:outputPanel>
    
    <script>
        function disableInputs(){
            var page = document.getElementById("page:form");
            var inputs = page.getElementsByTagName("input");
            for (var i = 0; i < inputs.length; i++) {
                inputs[i].disabled = true;
            }
        }
        
        function enableInputs(){
            var page = document.getElementById("page:form");
            var inputs = page.getElementsByTagName("input");
            for (var i = 0; i < inputs.length; i++) {
                inputs[i].disabled = false;
            }
        }
    </script>
</apex:page>

 

 

All Answers

TehNrdTehNrd

This should do the trick.

 

 

<apex:page controller="DisableInputs" id="page">
    <apex:form id="form" >
        <apex:inputText value="{!inputText}"/>
        <apex:inputField value="{!opp.CloseDate}"/>
        <apex:inputCheckbox value="{!inputBox}"/><br/>
    
        <apex:commandButton value="Click me!" onclick="disableInputs();" oncomplete="enableInputs();"/>
    </apex:form>
    
    <apex:outputPanel id="somethingToRerender">
        Nothing    
    </apex:outputPanel>
    
    <script>
        function disableInputs(){
            var page = document.getElementById("page:form");
            var inputs = page.getElementsByTagName("input");
            for (var i = 0; i < inputs.length; i++) {
                inputs[i].disabled = true;
            }
        }
        
        function enableInputs(){
            var page = document.getElementById("page:form");
            var inputs = page.getElementsByTagName("input");
            for (var i = 0; i < inputs.length; i++) {
                inputs[i].disabled = false;
            }
        }
    </script>
</apex:page>

 

 

This was selected as the best answer
kpeterskpeters

Thanks!  This approach worked for me and I even made jQuery to do the disabling work:

 

 

function BtnDisable()
{
     jQuery(':checkbox').each(function(index,value)
     {
          value.disabled = true;
     })
        
     jQuery(':text').each(function(index,value)
     {
          value.disabled = true;
     })            
}

 

 
TehNrdTehNrd

Yup, jQuery is a great option for this. I would normally use it but didn't want to over complicate the solution.
davcondevdavcondev

How about for an inputField onchange event? inputField doesn't have an oncomplete attribute, and actionsupport oncomplete doesn't seem to work - actionsupport appears to get overridden by the inputField onchange...?

 

<apex:inputField value="{!field__c}" onchange="disableInputs();">

    <apex:actionSupport event="onchange" action="{!doAjax}" oncomplete="enableInputs();"/>

</apex:inputField>

 

I'm guessing there's a better way to do this with only one onchange function that calls both disableInputs and doAjax?