Skip to main content

Disable button on submit, the global way

A

A year ago I have shared a tip how to use the same mechanism for closing modal dialogs. Today, I would like to share few more tips about levaraging the Global page.


When you have a button on page and the action behind is a bit slow or if you have users who are constantly double clicking on everything, you might want to disable clicked button. You can easily fix this with a simple dynamic action. But instead of repeating this DA on each button, you can define it on the Global page. The trick is to use the jQuery selector and CSS class on each of these buttons.

So go to your Global page.

  • Create DA called SUBMIT_AND_DISABLE_BUTTON on Click event.
  • Set Selection Type to jQuery Selector
  • Set value to "button.SUBMIT_DISABLE"
  • Switch the default true action to Execute JavaScript code
  • Define the action code:
  • var button_id = this.triggeringElement.getAttribute('id');
    console.log('SUBMIT_AND_DISABLE_BUTTON:', button_id, this);
    document.getElementById(button_id).disabled = true;  // disable button
    apex.submit(button_id);  // submit page with the button id, so you can use it in REQUEST
    

Now when you have your magical DA in place, all you need is to add a SUBMIT_DISABLE class to your bottons (in Apperiance, CSS Classes).


Another thing I often need is to submit the page when use change the value in a select box (the thingy with list of options). Well, sometimes I render the refresh the affected components on page via DA, but fo complex pages it is easier just to refresh the whole page.

So lets setup the DA for this, same mechanism.

  • Create DA called SUBMIT_CHANGED_SELECTBOX on Change event.
  • Set Selection Type to jQuery Selector
  • Set value to ".SUBMIT select"
  • Switch the default true action to Execute JavaScript code
  • Define the action code:
  • var button_id = this.triggeringElement.getAttribute('id');
    console.log('SUBMIT_CHANGED_SELECTBOX:', button_id);
    apex.submit(button_id);  // submit page with the item name, so you can use it in REQUEST
    


That is all for today.


Comments