function readOnly(count){ }
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
+ Start a Discussion
SuperdomeSuperdome 

Disable the button until the page is fully loaded

While user clicks the button just while the custom page is loading, it will make the mistake.

 

How to disable the button until the page is fully loaded?

 

Have tried and searched, it seems to use $(Document).ready with visualforce or <BODY onLoad=...> javascript.

 

Is it the solution to prevent from the problem ?

 

Best Answer chosen by Admin (Salesforce Developers) 
Avidev9Avidev9

How about changing the execution lil bit

<apex:page controller="orders">
<head>
<script>
    var isLoadComplete = false;
var previousOnload = window.onload; window.onload = function() { if (previousOnload) { previousOnload(); } alert("onload");
isLoadComplete = true; document.getElementById('j_id0:j_id2:order_button').disabled=false; document.getElementById('j_id0:j_id2:order_button').className="btn"; }
function callP3(){

} </script> </head> <apex:form >
<apex:actionFunction name="p3" action="{!p3}" /> <apex:commandButton onclick="if(isLoadComplete){p3();}" value="Next Page(Button 1)" id="order_button" disabled="true"/> <apex:commandButton action="{!p3}" value="Next Page(Button 2)" id="order_button2"/> </apex:form> </apex:page>

 

 

 

 

 

 

All Answers

Avidev9Avidev9
I guess the best possible solution will be $(Document).ready of jquery. Use that to enable disable button. Jquery provides more easy control and selection of vf components
SuperdomeSuperdome
According to http://stackoverflow.com/questions/3438054/i-have-to-disable-button-when-page-is-loading-after-full-loading-page-i-a-have, it should wok but it doesn't

The attribute of apex:commandButton can't be override.

If just using <input type="button".... then it's ok.

Have anyone tried it successfully ?
SuperdomeSuperdome

Some enhance: not only disabled to be set to false after page loaded. And, className should have reset to "btn" to turn on the button.

 

But, it still not work.

 

The button1 is enabled after page loaded, but it still can't work. After click button1, it just reload the same page again, it doesn't move to next page.

 

The button2 is just ok to move to next page and it proves the action - "p3" is ok.

 

Here's the code...

 

<apex:page controller="orders">
<head>
<script>
    var previousOnload = window.onload;
    window.onload = function() {
        if (previousOnload) {
            previousOnload();
        }
        alert("onload");
        document.getElementById('j_id0:j_id2:order_button').disabled=false;
        document.getElementById('j_id0:j_id2:order_button').className="btn";
    }
</script>
</head>
<apex:form >
       <apex:commandButton action="{!p3}" value="Next Page(Button 1)" id="order_button" disabled="true"/>

       <apex:commandButton action="{!p3}" value="Next Page(Button 2)" id="order_button2"/>
</apex:form>
</apex:page>

 

 

Avidev9Avidev9

How about changing the execution lil bit

<apex:page controller="orders">
<head>
<script>
    var isLoadComplete = false;
var previousOnload = window.onload; window.onload = function() { if (previousOnload) { previousOnload(); } alert("onload");
isLoadComplete = true; document.getElementById('j_id0:j_id2:order_button').disabled=false; document.getElementById('j_id0:j_id2:order_button').className="btn"; }
function callP3(){

} </script> </head> <apex:form >
<apex:actionFunction name="p3" action="{!p3}" /> <apex:commandButton onclick="if(isLoadComplete){p3();}" value="Next Page(Button 1)" id="order_button" disabled="true"/> <apex:commandButton action="{!p3}" value="Next Page(Button 2)" id="order_button2"/> </apex:form> </apex:page>

 

 

 

 

 

 

This was selected as the best answer
SuperdomeSuperdome
Can't be better. Thank you. And I found we are the same bday
Avidev9Avidev9
same bday?