Why can't I disable this XUL menuitem?

Question

I'm at my wits end, and it's probably something really simple. Basically I've have got this code:

var menuitem = document.getElementById('mymenuitem');
alert(menuitem);
alert(varImChecking == null);
menuitem.setAttribute('disabled', (varImChecking == null) ? 'true' : 'false');

It should be disabling the 'mymenuitem' menu item, but has no effect. When run, the alerts say '[Object XulElement]' followed by 'true'. I know the getElementById is selecting the correct menuitem element because onclick bindings to the menuitem variable work.

Some alternatives I've tried:

menuitem.setAttribute('disabled', (varImChecking == null));
menuitem.disabled = (varImChecking == null);

So why isn't the setAttribute having any effect? It doesn't even gray out the menu item. Is there another way I'm supposed to do this?

Edit: Forgot to mention, no warnings or errors show up in the console.

Answer 1

I think I finally figured this out. The problem is that I had the menuitem I was trying to edit was hardcoded inside a .xul file. For whatever reason, this made it impossible to change the disabled or hidden attributes.

So I removed the menuitem from the .xul file and dynamically created it in the javascript instead. Now it works exactly as expected:

var menuitem = document.getElementById('mypopupitem').appendChild(document.createElement('menuitem'));
menuitem.setAttribute('disabled', 'true'); // Works.
menuitem.removeAttribute('disabled'); // Also works.

Does anyone know, is this a feature/quirk of XUL, or am I just doing it wrong?

UPDATE: As many comments have pointed out, the above is not correct. You absolutely can change the disabled attribute on an item hard coded in a XUL file.

After much more debugging, paring the problem down to its core elements, pulling hair, etc, it turned out to be.... a typo. Grrr.. Sorry.

It turns out my document.getElementById('menuitem') was grabbing the XUL element, not the element. The fact that the onclick method seemed to be firing correctly seems to have been thanks to event bubbling (I guess?). I still have no idea why setAttribute('label', 'changed') worked when I tried that, but unfortunately, in the frenzy of debugging, I don't have that version to check again.

Anyway, it's working now, without having to dynamically create the menuitem. Thanks for all the help!

Answer 2

Regarding the disabling issue: If a menuitem contains a command, the menuitem can only be disabled by setting the "disabled" attribute of that command. If the menuitem contains an oncommand, disabling should work on the menuitem itself.

Answer 3

I believe that setAttribute will be looking for a string "true"/"false", as you originally had.

Although I don't see a bug immediately in why you can't disable. For a test, have you tried simply menuitem.setAttribute('disabled', 'true'); ? If that doesn't work - perhaps nothing will. It seems odd to disable a menuitem - are you sure you're not wanting to disable the menulist?

I do see a problem with your enabling code. I can't find great documentation for it, but I did deal with this previously. One example you can find in bugzilla is the fact that setting disabled=false actually disables items on Linux. The recommended way from Mozilla is to remove the attribute when you want it enabled.

So although your solution is more concise, you should probably look at something more like this:

var menuitem = document.getElementById('mymenuitem');
alert(menuitem);
alert(varImChecking == null);
if(null==varImChecking){
   menuitem.setAttribute('disabled', 'true');
}else{
   menuitem.removeAttribute('disabled');
}

Answer 4

I had the very same problem. I've used iconic menu items together with commands. The clue was to set the disabled attribute of the menuitem AND the command to true or false. I also had to set the disabled Attribute after the parent menupopup was opened,e.i. onpopupshown . Now i can update my menuitems dynamically.

I've spend more than an hour to solve this problem xD I hope this will help people to minimize their time expenses.

BTW:

1. my xul is inside an firebug extension

Answer 5

may be this will work:

var menuitem = document.getElementById('mymenuitem');
alert(menuitem);
alert(varImChecking == null);
menuitem.setAttribute('disabled', (varImChecking == null) ? true : false);

I used true and false rather than 'true' and 'false'

Answer 6

I am using tag to add a custom context menu. When I use "onpopupshowing" event to handle the enable/disable of a menu-item, my context menu is getting populated with a lot of menu items which I have not intended to add. Here is the new popup tag that I added in the overlay.xul

<popup onpopupshowing="isAssertTextEnabled(this)" id="contentAreaContextMenu">
<menuitem id="context-recorderpopup" label="Assert text present"
accesskey="T"
insertafter="context-stop" oncommand="onAssertionMenu(event)" />
</popup>

please let me know if I am missing out something

Thanks, Vinay