3 Replies Latest reply on Oct 19, 2010 9:30 PM by Andre Hopkins

    How to dynamically build content in drop down boxes

    Andre Hopkins Newbie
      Hi all,

         I am pretty new to Seam and I trying to figure out how to tackle this scenario.

      1) User can select four items In rich combo box #1, Item A, Item B, Item C, Item D. 
      2) If user selects Item A, Item B or Item C, I don't want any content dynamically populated in rich combo box #2. 
      3) If user selects Item D, I want rich combo box #2 to be populated with choices for the user to select.  How should I go about doing this? I have been using RichFaces some, so hopefully there is a way to do this.  Any feedback would be much appreciated. 
        • 1. Re: How to dynamically build content in drop down boxes
          Nikos Paraskevopoulos Novice

          Hi,


          A very simple example would be as follows.
          XHTML:


          <h:selectOneMenu id="combo1" value="#{bean.propOne}">
            <h:selectItems ... />
            <a:support
              event="onchange" ajaxSingle="true"
              action="#{bean.combo1Changed}" reRender="combo2"
            />
          </h:selectOneMenu>
          
          <h:selectOneMenu id="combo2" value="#{bean.propTwo}">
            <h:selectItems value="#{bean.dynamicItems}" />
          </h:selectOneMenu>
          



          Java:


          @Name("bean")
          public class MyBean {
            // properties propOne and propTwo with getters, setters
            ...
          
            private List<SelectItem> dynamicItems;
          
            public void combo1Changed() {
              dynamicItems = null;
            }
          
            public List<SelectItem> getDynamicItems() {
              if( dynamicItems == null ) {
                // create the list depending on the value of propOne
                ...
              }
              return dynamicItems;
            }
          }
          



          Explanation: The items of combo #2 are held in the dynamicItems property of the bean. The getter of this property rebuilds the list if it is null, or returns the cached value. The <a:support> will trigger a server action when combo #1 changes. This action (combo1Changed) simply nullifies the dynamicItems to trigger the recreation of the list. The same could be achieved using <f:setPropertyActionListener> for this simple case.


          The <a:support> is ajaxSingle="true" so that the server will only process the value of combo1. This keeps validation errors from other, unrelated fields to block the execution of this action. It is also better for the server, as it does not process the entire JSF component tree.


          Finally the reRender="combo2" specifies that combo2 needs to be redrawn. The getDynamicItems() will be called and recreate the list.


          Only the bare essentials are shown in this code, but you should get the idea.


          Happy coding!

          • 2. Re: How to dynamically build content in drop down boxes
            Andre Hopkins Newbie

            Nikos,


               This is pretty clever and I am coding up the details as I am writing this email!!  Thanks for the quick response!  I have been doing a lot of nice things with Seam and this will be added to the bag of tricks...again thanks!


            Antonio

            • 3. Re: How to dynamically build content in drop down boxes
              Andre Hopkins Newbie

              I would like to continue this thread.  I was able to very quickly get this solution coded up today while at work.  Now, I have a scenario where I select a particular item in a selectItem drop down box.  If I select Item1, I need for a message to be printed in a particular panel and certain dataTables to be reRendered...I was able to get this figured out today.  Next, if I select Item2, then I need certain inputText and PickList boxes to be disabled.  How would I go about doing this?  Thanks in advance for your assistance.


              Antonio