Freitag, 13. Januar 2012

Taming the button, attr disabled...

I had to change my basic approach due to a much easier way to control the execution of the onclick action. Thanks for the hint Dan. I'm very certain, that I tried something like that before, but it looks like I made a mistake. Anyway....

The new approach is based on two things
  1. The css class apex_disable to control the layout and  
  2. The attribute disabled to control the onClick event
I use CSS files and adapted templates to control the layout of different themes. This has not changed and can be found in my last postings. You only have to add the disabled attribute to the Button Disabled template to make it work.

I use a custom shared javascript file called (you may already have guessed that...) Custom.js to store the very simple scripts to enable and disable elements.

/*!
 * Custom.js
 *
 * Author: Martin M.
 *
 * use on your own risk
 *
 * Date: 2012/01/13
 */
 function disableElement(name){
   $(name).addClass('apex_disabled');
   $(name).attr('disabled', 'disabled');
 }
 
 function enableElement(name){
   $(name).removeClass('apex_disabled');
   $(name).removeAttr('disabled');
 }

Upload the file as shared Component => Static File and add the line

<script src="#WORKSPACE_IMAGES#Custom.js" type="text/javascript"></script>

to the header of the page template(s) you want to use to make the code available on all pages.

Custom.js, ThemesAdmin_3.sql, DisableButtonExample_5.sql

Unfortunately... when I switched back to Theme Crimson - 23... :( But that is another story!

To be continued...

Donnerstag, 12. Januar 2012

Disable a Dynamic action during runtime

Ok, I need a hint! So please show me a way...

In my last post I said that I would like to wrap up the "disable button" functionality and have it all handled in one ingle step.

In the meantime I encountered (at least) one major problem.

The only way I know to stop a button from firing a dynamic action is a condition.
So what I'm looking for is way to stop the button firing that dynamic action without a condition.

I thought that changing the button id could be an option.

if ($('#BUTTON_P1_TOGGLED').hasClass('apex_disabled')){
  $('#BUTTON_P1_TOGGLED').toggleClass('apex_disabled');
  $('#BUTTON_P1_TOGGLED').attr('id', 'P1_TOGGLED');
}else{
  $('#P1_TOGGLED').toggleClass('apex_disabled');
  $('#P1_TOGGLED').attr('id', 'BUTTON_P1_TOGGLED');
}

But that does not work. It looks like the binding is on another level even if the triggeringButtonId points to P1_BUTTON.

{"triggeringElementType":"BUTTON","triggeringButtonId":"P1_TOGGLED","bindType":"bind","bindEventType":"click",actionList:[{"eventResult":true,"executeOnPageInit":false,"stopExecutionOnError":true,javascriptFunction:function (){ alert('P1_TOGGLED is not disabled')},"action":"NATIVE_JAVASCRIPT_CODE"}]}];

So please give me a hint if you know a way to

  • enable/disable a dynamic action with Javascript or something else
  • have any other idea...
Dan's comment offered the clue I was looking for.

So I changed my code to



$('#P1_TOGGLED').toggleClass('apex_disabled');
if ($('#P1_TOGGLED').hasClass('apex_disabled')){
  $('#P1_TOGGLED').attr('disabled', 'disabled');
}else{
  $('#P1_TOGGLED').removeAttr('disabled');
}


and finally it worked. I will integrate this solution into my taming the button  example and come back with a packaged solution.

Thanks for the support guys.