Disable a button

How can you disable a button :
unclickable,
image and text grayed?

This is what I do:

btn  = new AW.System.Control;
with(btn)
{
  setId("myButton");
  setTag("button");
  setContent("html", "button text");
  setAttribute("disabled", "disabled");
}

This will give you a disabled button. I don't beleive that you can setAttribute("disabled", "disabled") on an AW.UI.Button.

Yes, this is a disabled button, but there seems to be no skin support for those system.control button???

Correct. This is a standard browser button. Like I said in my first mesage, I don't think that you can disable an AW.UI control. Alex might be able to elaborate on this.

I know this is a fix but I did the following to disable a button.

var live_button = 1;

  var bobj1 = new AW.UI.Button;
  bobj1.setId("myButton1");	// necessary for CSS rules
  bobj1.setControlText("New");
  document.write(bobj1);

  var bobj2 = new AW.UI.Button;
  bobj2.setId("myButton2");	// necessary for CSS rules
  bobj2.setControlText("Update");
  document.write(bobj2);

bobj1.onClick = function(text){
     live_button = 0;
     bobj2.setStyle("color", "red");
};

bobj2.onClick = function(text){
     if(live_button){
          alert("alive");
     }
};

which mean that you can click the button but it does nothin

to make it alive again just place this someplace

live_button = 1;
     bobj2.setStyle("color", "black");

hope this helps

Here's a slightly different version:

var obj = new AW.UI.Button;
obj.setId("myButton");
obj.setControlText("Button and more text here");
obj.setAttribute("disabled", null);
document.write(obj);

obj.onClick = function(text){
if (this.getAttribute("disabled") == null) {
alert("Button click")
}
};

var button = new AW.UI.Button;
button.setControlText("Click me");
document.write(button);

button.onClick = function(){
obj.setAttribute("disabled", obj.getAttribute("disabled") == null ? true : null);
obj.refresh();
}

I've yet to figure out how to stop the button being highlighted when there is a mouse-down event on a disabled button.

The following is a second attempt at disabling buttons. This is a superclass of AW.UI.Button which provides the methods disable(boolean) and isDisabled(). These methods replace the need to drive the disabled attribute directly.

Note that only onControlClicked is currently disabled. If you need to disable other events, add these to the controller created in init().

Alex: it might be nice if this functionality could be incorporated into AW.System.Control.

Button = AW.UI.Button.subclass(); 
Button.create = function() { 

    var obj = this.prototype; 
    
    obj.init = function() {
    var _handleDisabled = function() {
        if (this._disabled) return true;
    }
    
    this.setController("disabled", {
        onControlClicked: _handleDisabled
    });
    
    this._controllers.unshift(this._controllers.pop());
    }
    
    obj.disable = function(value) {
    if (!this._disabled && value) {
        // now disabled
   		this._disabled = true;
   		this.setAttribute("awx", null);
   		this.setAttribute("disabled", true);
   	} else if (this._disabled && !isDisabled) {
   		// now enabled
   		this._disabled = false;
   		this.setAttribute("awx", "button");
   		this.setAttribute("disabled", null);
   	}
    }

    obj.isDisabled = function() {
    return this._disabled;
    }
    
    obj._disabled = false;
}

New version ...

Button = AW.UI.Button.subclass(); 
Button.create = function() { 

    var obj = this.prototype;
    var UNDEFINED;
    
    obj.init = function() {
        var _handleDisabled = function() {
            if (this._disabled) return true;
        }
    
        // disable events
        this.setController("disabled", {
            onControlClicked: _handleDisabled
        });
    
        // set disable controller to top precedence
        this._controllers.unshift(this._controllers.pop());
    }
    
    obj.disable = function(value) {
   		if (!this._disabled && value) {
   			// now disabled
   			this._disabled = true;
   			this.setAttribute("awx", UNDEFINED);
   			this.setAttribute("disabled", true);
   		} else if (this._disabled && !value) {
   			// now enabled
   			this._disabled = false;
   			this.setAttribute("awx", "button");
   			this.setAttribute("disabled", UNDEFINED);
   		}
        this.refresh();
    }

    obj.isDisabled = function() {
        return this._disabled;
    }
    
    obj._disabled = false;
}

Hi LostInSpace

I am hoping to use this, but having difficulty getting it to work.

I have copied the above code into my page header (after loading AW) and then i am creating a button object in the usual way (e.g. cancel_button = new AW.UI.Button) and then trying

cancel_button.disable(true)

but I cannot see this working. Is this how to use the subclass or am I setting this up in the wrong way.

Many thanks
Will

Hi folks

I'm still hoping to get a button to be disabled...but struggling with LostInSpace's suggestion. (I figured that to use it you just create a new object ie. "new Button", but I found it only displayed half the actual button).

I'm now trying to take the Jim approach at the top of the post. I would like to start with a button showing as enabled and then when clicked to changes to disabled (pretty obvious). So I'm changing Jim's to have "setAttribute("disabled", null);" and then trying to add an onclick event with "setEvent("onclick", function(){ alert("toto");}.

This is OK, but I don't know how I can also add an "setAttribute("disabled", "disabled") or something into the onclick event so the button itself then becomes disabled.

Any thoughts on this greatly appreciated!
Thanks
Will

Has anybody figured this out?