9 Replies Latest reply on Apr 5, 2013 5:45 PM by Brian Leathem

    Component control doesn't work when a button is disabled

    Migore S Newbie

      Hi, I'm trying the workaround for Link.

      To do that, I'm creating a button with component control, here is the code:

       


      {code:xml}

      <h:commandButton id="delete-all-button" value="#{msgs.geral_excluir_selecionados}"

                       rendered="#{transacaoBean.dataModel.rowCount != 0}" styleClass="realbtn radius3"

                       type="button" disabled="true">

          <rich:componentControl event="click" target="confirm-popup" operation="show">

              <a4j:param noEscape="true" value="event" />

              <rich:hashParam>

                  <f:param name="width" value="500" />

                  <f:param name="height" value="300" />

                  <f:param name="minWidth" value="300" />

                  <f:param name="minHeight" value="150" />

                  <a4j:param noEscape="true" name="left" value="(jQuery(window).width()/2)-250" />

                  <a4j:param noEscape="true" name="top" value="(jQuery(window).height()/2)-150" />

              </rich:hashParam>

          </rich:componentControl>

      </h:commandButton>

      {code}


       

       

       

      But it doesn't work, from my findings it is because the button is initially disabled, however, if the button is enabled it works perfectly.

       

      If I call the modal using the onclick event it call normally. I found out the the generated onclick events creates this:

       

       

      {code}

      onclick="RichFaces.ui.ComponentControl.execute(event,{"selector":null,"target":["pesquisa\u002Dtransacao\u002Dform:confirm\u002Dpopup"] ,"callback":function(event,component){component['show'].apply(component,[event,{"width":"500","height":"300","minWidth":"300","minHeight":"150","left":(jQuery(window).width()/2)-250,"top":(jQuery(window).height()/2)-150} ] );}} ); return false;"

      {code}


       

       

      My question is, is there a way to make rich:componentControl to work when the button is initially disabled? Is it a bug? I get sad to have to put this huge block of JS insite my xhtml page. Is there another workaround for this?

       

      Cheers

        • 1. Re: Component control doesn't work when a button is disabled
          Migore S Newbie

          My temporaty (hopefully) solution to this:

           

           

          {code:xml}

          <h:commandButton id="delete-all-button" value="#{msgs.geral_excluir_selecionados}"

                           rendered="#{transacaoBean.dataModel.rowCount != 0}" styleClass="realbtn radius3"

                           type="button" disabled="true"

                           onclick="RichFaces.ui.ComponentControl.execute(event,{'selector':null,'target':['pesquisa\u002Dtransacao\u002Dform:confirm\u002Dpopup'] ,'callback':function(event,component){component['show'].apply(component,[event,{'left':(jQuery(window).width()/2)-250,'top':(jQuery(window).height()/2)-150} ] );}} ); return false;">

              <rich:componentControl target="confirm-popup" operation="show"></rich:componentControl>

          </h:commandButton>

          {code}

           

          I need to leave the rich:componentControl so that the proper javascript is imorted by richfaces.

          • 2. Re: Component control doesn't work when a button is disabled
            Lukáš Fryč Master

            Hey Migora,

             

            I belive that no disabled button should actually react on user's click.

             

            It works from point of view of JavaScript - the event can be registered.

            But on the other hand, the h:commandButton just won't add a click event handler and decode behaviors (like f:ajax or rich:componentControl) because the button is in it's disabled state.

             

            At least it leads into bad user experience- me as a user won't expect disabled button to open popup.

            • 3. Re: Component control doesn't work when a button is disabled
              Migore S Newbie

              The button is disabled when the page is loaded, after a user action on another component, the button is enabled.

               

              The butotn is disabled on page load, then, when the user select a row in the table of the page to be deleted, the button is activated.

               

              When the button is disabled it doesn't trigger the click event, that is the reason that I'm using it so that the popup can only be opened when there is something to be deleted.

              • 4. Re: Component control doesn't work when a button is disabled
                Brian Leathem Master

                To be clear, you are not expecting the component control to be invoked when the button is disabled, but rather, after the button has been enabled.  To be more precise, what you expect is:

                 

                1. Load the page (button is disabled, clicking it does not invoke the component control)
                2. Some user action triggers the button to become enabled
                3. Clicking on the button should now invoke the component control

                 

                Howver what you observe is that in step 3, the component control is not activated after you enable the button.  Is this correct?

                 

                Have you tried re-rendering (via f/a4j:ajax) the button after the button becomes enabled?  That should cause the component control to be registered.

                • 5. Re: Component control doesn't work when a button is disabled
                  Migore S Newbie

                   

                  Brian Leathem wrote:

                   

                  To be clear, you are not expecting the component control to be invoked when the button is disabled, but rather, after the button has been enabled.  To be more precise, what you expect is:

                   

                  1. Load the page (button is disabled, clicking it does not invoke the component control)
                  2. Some user action triggers the button to become enabled
                  3. Clicking on the button should now invoke the component control

                   

                  Howver what you observe is that in step 3, the component control is not activated after you enable the button.  Is this correct?

                   

                  Have you tried re-rendering (via f/a4j:ajax) the button after the button becomes enabled?  That should cause the component control to be registered.

                  Yes, that's correct.

                   

                  Have you tried re-rendering (via f/a4j:ajax) the button after the button becomes enabled?

                   

                  No, I haven't, I'm enabling the button through client side JS.

                  • 6. Re: Component control doesn't work when a button is disabled
                    Brian Leathem Master

                    Can you try re-rendering (via f/a4j:ajax) the button after the button becomes enabled (or use an ajax call to enable the button)?  That should cause the component control to be registered.

                    • 7. Re: Component control doesn't work when a button is disabled
                      Migore S Newbie

                      It works, but I wouldn't like to make a ajax call to do that.

                      • 8. Re: Component control doesn't work when a button is disabled
                        Brian Leathem Master

                        Thanks for trying it.  It demonstrates that the framework doesn't register event handlers for disabled components.  JSF really is a server-side rendering framework, and is not meant to work with client-side manipulations of the render.  We would have to expose some sort of client-side-disabled attribute

                         

                        A workaround for this would be to have the button enabled in the facelet tag, then have some javascript that executes on page load to disable the button.  Then later re-enabling the button via javascript would work, as the event handler was registered on page load.

                         

                        Cheers,

                        Brian Leathem

                        • 9. Re: Component control doesn't work when a button is disabled
                          Brian Leathem Master

                          Did the suggested workaround work for you?

                          A workaround for this would be to have the button enabled in the facelet tag, then have some javascript that executes on page load to disable the button.  Then later re-enabling the button via javascript would work, as the event handler was registered on page load.

                           

                          As I think about it more, this really is teh way to do it.  Don't disable a component on the serverside via EL if you want to later enable it with only a client-side interaction.  Leave it enabled on the server via EL, and disable it in the client on page load.