6 Replies Latest reply on Jan 4, 2011 7:43 AM by Murali Kumar

    can we show or hide a outputPanel when the value of selectOneRadio changes?

    Tina Ng Newbie

      Hi all,
      I need to implement the feature that depending on the chosen value of radio, we need to rerender the outputPanel so that everything inside it could be shown or hidden.


      Precisely, I have 2 radio button prestation and consigne. I have a table of list of articles below these 2 radio buttons. If we click on prestation, article table is shown. If we click on consigne, this table is hidden.


      Below is what I do, but does not work. I'm not sure that it's a correct way to do.
      Please give me some hints.


      Best regards,
      Tien




      <h:selectOneRadio id="myRadio" value="#{radioValue}" layout="pageDirection">
           <f:selectItem itemValue="prestation" itemLabel="#{messages['general.prestation']} "/>
           <f:selectItem itemValue="consigne" itemLabel="#{messages['general.consigne']} "/>
           <a4j:support status="_none" event="onclick" reRender="consommableBox" />
      </h:selectOneRadio>
      
      <a4j:outputPanel id="consommableBox" ajaxRendered="true" >
         <c:if test="#{(radioValue == 'prestation')}" >
             <rich:dataTable id="consommableTable" >
              .....
             </rich:dataTable>
         </c:if>
      
      </a4j:outputPanel>



        • 1. Re: can we show or hide a outputPanel when the value of selectOneRadio changes?
          Aldo Bonzi Novice

          Why do you use ajax to hide/show html when you can use js? It's faster and much lighter, plus you don't have to deal with those nasty ViewExpiredException that are always messing around. Just use the onclick method within the h:selectOneRadio:




          <STYLE type="text/css">
             div.invisible
             {
                display:none;
             }
          
             div.visible
             {
                display:block;
             }
          </STYLE>





          <script>
             function showUserSelection(idFrom) {
               if (document.getElementById){
               var valueFrom = idFrom.value;
                 if (valueFrom == 'prestation'){
                   document.getElementById('prestationDiv').className="visible"
                   document.getElementById('consigneDiv').className="invisible"
                 }
                 else{
                   document.getElementById('consigneDiv').className="visible"
                   document.getElementById('prestationDiv').className="invisible"
                 }
               }
             }
          </script>





          <h:selectOneRadio id="myRadio" value="#{radioValue}" layout="pageDirection" onclick="javascript:showUserSelection(this)">
             <f:selectItem itemValue="prestation" itemLabel="#{messages['general.prestation']} "/>
             <f:selectItem itemValue="consigne" itemLabel="#{messages['general.consigne']} "/>
          </h:selectOneRadio>
          
          <div id="prestationDiv" class="invisible">
             <ui:include src="prestationDataTable.xhtml" />
          </div>
          
          <div id="consigneDiv" class="invisible">
             <ui:include src="consigneDataTable.xhtml" />
          </div>



          • 2. Re: can we show or hide a outputPanel when the value of selectOneRadio changes?
            omid pourhadi Apprentice

            another way that i used
            i created a managed bean with Boolean field and registered a4j:jsFunction



            <h:form>
            
            <input type="radio" name="type" value= "prestation"  checked="checked" onclick="pnlRender('true')">prestation </input> <br />
            <input type="radio" name="type" value=" consigne " onclick="pnlRender('false')"> consigne </input></p>
            <a:jsFunction name="pnlRender">
            <a:actionparam name="enabled" assignTo="#{panelRenderer.enabled}" />
            </a:jsFunction>
            
            </h:form>



            • 3. Re: can we show or hide a outputPanel when the value of selectOneRadio changes?
              Leo van den berg Master

              Hi Tina,


              don't use the c-tags, but use the seam-tags which has a rendered attribute. The problem you encounter is that a NOT rendered component cannot be rerendered, because it's non-existing. I am always jealous on the JS people, but in this case it wont work, because - as stated - you can make a not available panel visible.


              Leo

              • 4. Re: can we show or hide a outputPanel when the value of selectOneRadio changes?
                Murali Kumar Newbie

                Hi Leo,


                Is this problem solved? Could you please suggest me how to handle this issues. and i want to know, how can i find is the radio button is checked or not. My problem is similar to radiobutton group in normal javascript. I want to use richfaces components not not normal html radio button.


                Could you please suggest me resolve this?


                Thanks in advance.


                Murali

                • 5. Re: can we show or hide a outputPanel when the value of selectOneRadio changes?
                  Leo van den berg Master

                  Hi Murali,


                  The issue really didn't exist in the first place. You shouldn't use the c-tags because they not handled the same way as JSF or facelets. I am not a JSF expert but as far as I know these tags do not form part of the rendering tree.


                  If you want to do something lñike the above, use a tag which has a marker element in the tree (rendered or not). Such tag exist in the Seam tag library (the span and div tags). You can use for eaxample:





                  <h:xxx>
                  .....
                  <a4j:support event="onclick" reRender="whatever" />
                  </h:xxx>
                  
                  
                  <a4j:outputPanel id="whatever">
                  <s:div rendered="#{waheteverCondition}">
                  
                  .... Things you want to render or not
                  
                  </s:div>
                  </a4j:outputPanel>



                  This is not a complete example, but gives you a framework to work with. The most important thing to remember is that there should be something to rerender. Normal tags will NOT be included in the tree, so it can't be re-rendered. the s-tag leaves a DIV-element with the mentioned id, so rerendering is possible.


                  Leo 


                  • 6. Re: can we show or hide a outputPanel when the value of selectOneRadio changes?
                    Murali Kumar Newbie

                    Thank you very much Leo.


                    I solved this issue.


                    And


                    Do you know about how to get Richfaces or JSF 'h:selectOneRadio' cheched or checked status?


                    Regards,
                    Murali