4 Replies Latest reply on Jan 21, 2009 10:33 AM by stephen.friedrich

    a4j:commandButton/Link: readonly attribute?

    stephen.friedrich

      The standard h:commandButton has both disabled and readonly attributes.
      The corresponding a4j component only has disabled.

      The problem is that disabled alone, correctly makes the browser ignore mouse clicks on the button, but there is no visual indication that the button is in fact "disabled".

      OTOH if the html for the button contains the "readonly" attribute, the browser will display the button as disabled/grayed out.

      I think its best to just add "readonly" attribute.

      Ok, to file a Jira issue?

        • 1. Re: a4j:commandButton/Link: readonly attribute?

           

          "stephen.friedrich" wrote:
          The standard h:commandButton has both disabled and readonly attributes.
          The corresponding a4j component only has disabled.

          The problem is that disabled alone, correctly makes the browser ignore mouse clicks on the button, but there is no visual indication that the button is in fact "disabled".

          OTOH if the html for the button contains the "readonly" attribute, the browser will display the button as disabled/grayed out.

          I think its best to just add "readonly" attribute.

          Ok, to file a Jira issue?


          Your solution to the problem is css.

          maybe this snippet of code will help:
          <a4j:commandButton disabled="#{someBean.shouldDisable}"
          styleClass="#{someBean.shouldDisable ? 'disabledClass' : 'enabledClass'} />
          


          or not to have any class at all if is enabled...

          <a4j:commandButton disabled="#{someBean.shouldDisable}"
          styleClass="#{someBean.shouldDisable ? 'disabledClass' : ''} />
          


          • 2. Re: a4j:commandButton/Link: readonly attribute?
            stephen.friedrich

             

            "tkalactomo" wrote:

            Your solution to the problem is css.

            Unfortunately it is a bit more complicated in my case:
            The disabled property is manipulated in Java code (in a renderer of a parent component of the buttons).

            I could expose that logic somewhere and manually adjust each and every button's style class attribute to check for the result of that calculation that is now in some private place, but that's fragile and relies too much on convention.

            Theoretically I _could_ also automatically modify the existing value of the style class, but that doesn't seem much better.

            Another option would be to add the style class using JavaScript/jQuery after the page has loaded/the ajax request finished. Equally bad.

            What I currently do as a workaround is to use h:commandButton instead, but only add a4j:support.


            It is my understanding that a4j:commandButton is meant as a drop-in replacement for h:commandButton, so in my not-so-humble opinion the a4j tag should support all attributes of JSF's standard tag.

            • 3. Re: a4j:commandButton/Link: readonly attribute?
              nbelaevski

              Hello,

              I've tried the code:

              <h:commandButton value="Button" disabled="true"/>
               <a4j:commandButton value="Button" disabled="true"/>
              
               <h:commandButton value="Button" />
               <a4j:commandButton value="Button" />


              The first and the second buttons are displayed disabled (grayed) in IE7 and FF3, the other two are enabled and shown as should: http://picbite.com/image/20320hwvbg/.

              Can you please provide page code reproducing the problem?

              • 4. Re: a4j:commandButton/Link: readonly attribute?
                stephen.friedrich

                I inserted the very same snippet in one of my pages, and the buttons look like this on my FF 3:
                [img]http://www.eekboom.com/buttons.png[/img]

                At first I thought it was the old Windows theme that caused this, but then I played around with Firebug and found that it is caused by

                input {
                 color: #333333;
                }

                that I have set in my global style sheet, because all text should have this color instead of pure black.

                Unfortunately this causes FF to not change the background color of the button when it is disabled - only adding the readonly attribute will make it look disabled.

                IE 6 + 7 do not have this problem.

                Anyway: Why omitting attributes that h:commandButton has?