13 Replies Latest reply on Aug 18, 2010 5:50 AM by Kapil Nimje

    How to get the Selected value from HtmlSelectOneMenu after Submitting the Form?

    Kapil Nimje Newbie

      Hi,

       

      I am generating the Drop down  and Ajax Command Button dynamically, but when I submit the form using using this command button, the value which i am selecting from the drop drown is getting empty..

       

      Items in Drop down are (Standard, flyover, popup)

       

       

                HtmlSelectOneMenu mnuTagType = new HtmlSelectOneMenu();
                  mnuTagType.setId("TagTypeId"+project.getId());
                  mnuTagType.getAttributes().put("style","margin-left:8px;");
                  mnuTagType.setStyleClass("TagType");

       

                  mnuTagType.setValueExpression("value", application.getExpressionFactory().createValueExpression(context.getELContext(),           "#{projectBean.tagsType}", String.class));
        

                  UISelectItem standardTag = new UISelectItem();
                  standardTag.setId("StandardTagId");
                  standardTag.setItemValue("1");
                  standardTag.setItemLabel("Standard (Default)");
                  mnuTagType.getChildren().add(standardTag);

       

                  UISelectItem flyOverTag = new UISelectItem();
                  flyOverTag.setId("FlyOverTagId");
                  flyOverTag.setItemValue("2");
                  flyOverTag.setItemLabel("Flyover");
                  mnuTagType.getChildren().add(flyOverTag);

       

                  UISelectItem popupTag = new UISelectItem();
                  popupTag.setId("PopupTagId");
                  popupTag.setItemValue("3");
                  popupTag.setItemLabel("Popup");
                  mnuTagType.getChildren().add(popupTag);

       

       

                  HtmlAjaxCommandButton showCommandButton = new HtmlAjaxCommandButton();

                  showCommandButton.setId("ShowButtonId");
                  showCommandButton.setValue("Show");

       

                  MethodExpression expShowButton = FacesContext.getCurrentInstance().getApplication().getExpressionFactory().
                              createMethodExpression(context.getELContext(), "#{projectController.generateTagJS}", null, new Class<?>[0]);

       

                  showCommandButton.setActionExpression(expShowButton);

       

                     UIParameter parameterTagsType = new UIParameter();
                      parameterTagsType.setName("tagsType");
                      parameterTagsType.setValue(mnuTagType.getSubmittedValue());
                      showCommandButton.getChildren().add(parameterTagsType);

       

       

       

      ProjectController.java

       

      public void generateTagJS() {
              Map<String, String> requestParams = FacesContext.getCurrentInstance().getExternalContext().getRequestParameterMap();

              String strType = requestParams.get("tagsType");

              System.out.println("Project Tags Type=="+strType); // Getting the null value after submitting the page.
          }

       

      Kindly suggest, how do I get the selected value from the drop down when cliking on Submit button in my action Controller Method?

        • 1. Re: How to get the Selected value from HtmlSelectOneMenu after Submitting the Form?
          Nick Belaevski Master

          Hi Kapil,

           

          Why not take it via 'projectBeanInstance.getTagsType()'?

          • 2. Re: How to get the Selected value from HtmlSelectOneMenu after Submitting the Form?
            Kapil Nimje Newbie

            Hi I am trying to access it through projectBeanInstance.getTagsType, But it still returns the null value.

             

            Can you please tell how can I access it through UIParameter request in my java Method..

            • 3. Re: How to get the Selected value from HtmlSelectOneMenu after Submitting the Form?
              Nick Belaevski Master

              Reading value from submitted parameters is not a correct approach because this breaks component encapsulation and you bypass all built-in processing like validation, conversion, etc. If you are 150% sure you need this - read submitted value, it's keyed by clientId.

              • 4. Re: How to get the Selected value from HtmlSelectOneMenu after Submitting the Form?
                Kapil Nimje Newbie

                Hi Thanks for your reply,

                 

                yes this is true, but  in my case,  I have a HtmlModalPanel which containts these dynamic components (i.e.  HtmlSelecOneMenu and HtmlAjaxCommandButton). The ModalPanel is appears  when i cliked on link. Now the reason for using UIParameter is I am also passing the other Class object's value  as a parameter which is not there in the ModalPanel. These values are  required in my java Class Method.

                 

                e.g

                          UIParameter parameterProjectId = new UIParameter();
                                parameterProjectId.setName("projectId");
                                parameterProjectId.setValue(project.getId());
                                showCommandButton.getChildren().add(parameterProjectId);

                 

                            UIParameter parameterWidth = new UIParameter();
                                parameterWidth.setName("projectWidth");
                                parameterWidth.setValue(project.getDimension().getWidth());
                                showCommandButton.getChildren().add(parameterWidth);

                 

                            UIParameter parameterHeight = new UIParameter();
                                parameterHeight.setName("projectHeight");
                                parameterHeight.setValue(project.getDimension().getHeight());
                                showCommandButton.getChildren().add(parameterHeight);

                 

                I can easily accees these parameter values from the getResourceParameterMap object. but for the drop down it is getting the null or empty.

                 

                After selecting the value from drop down and hitting submit button the value comes from the HtmlSelectOneMenu@Object.getSubmittedValue() is getting null or empty.

                 

                I am trying to get value from my backing bean property but its getting the null value. I don't want to apply any validations on it, just need to select the value from the drop down and pass these values in the java method.

                 

                 

                Kindly suggest, How can I pass the selected values....

                 

                Thanks

                • 5. Re: How to get the Selected value from HtmlSelectOneMenu after Submitting the Form?
                  Kapil Nimje Newbie

                  Hi,

                   

                  Could you please help me to sort out this issue, How to get the values of components (i.e. drop-down and text box) from the HtmlModalPanel to my java method....

                   

                  Thanks

                  • 6. Re: How to get the Selected value from HtmlSelectOneMenu after Submitting the Form?
                    Kapil Nimje Newbie

                    Hi,

                     

                    Can any one know, How to access the values of the dynamic componets which are build inside the HtmlModalPanel Componets?

                     

                    screen shot is attached for your reference...

                     

                    Thanks

                    • 7. Re: How to get the Selected value from HtmlSelectOneMenu after Submitting the Form?
                      Nick Belaevski Master

                      After selecting the value from drop down and hitting submit button the value comes from the HtmlSelectOneMenu@Object.getSubmittedValue() is getting null or empty.

                      Sure, it has already been processed and nulled at action phase. Try immediate=true.

                                UIParameter parameterProjectId = new UIParameter();
                                      parameterProjectId.setName("projectId");
                                      parameterProjectId.setValue(project.getId());
                                      showCommandButton.getChildren().add(parameterProjectId);

                       

                                  UIParameter parameterWidth = new UIParameter();
                                      parameterWidth.setName("projectWidth");
                                      parameterWidth.setValue(project.getDimension().getWidth());
                                      showCommandButton.getChildren().add(parameterWidth);

                       

                                  UIParameter parameterHeight = new UIParameter();
                                      parameterHeight.setName("projectHeight");
                                      parameterHeight.setValue(project.getDimension().getHeight());
                                      showCommandButton.getChildren().add(parameterHeight);

                      Are you expecting these parameters to be taken from the selected menu item and submitted?

                      1 of 1 people found this helpful
                      • 8. Re: How to get the Selected value from HtmlSelectOneMenu after Submitting the Form?
                        Kapil Nimje Newbie

                        Hi Nick,

                         

                        Thanks for your reply,

                         

                        I have tried using "immediate=true", but still getting the same results.

                         

                        no these parameter are not the part of the select One menu items, the values for these parameters are comming from the other Class's object (i.e. here Project project.id) which an agrument of a method for building the dynamic HtmlModalPanel and same are required in my java action method after submitting.

                         

                        I giving the just example for how to access these parameter's values from HtmlModalPanel Class to my java action method. but same thing I am trying using the HtmlSelecOneMenu@Object.getSubmittedValues() will not reflect the selected values.

                         

                                  UIParameter parameterProjectId = new UIParameter();
                                        parameterProjectId.setName("projectId");
                                        parameterProjectId.setValue(project.getId());
                                        showCommandButton.getChildren().add(parameterProjectId);

                         

                                    UIParameter parameterWidth = new UIParameter();
                                        parameterWidth.setName("projectWidth");
                                        parameterWidth.setValue(project.getDimension().getWidth());
                                        showCommandButton.getChildren().add(parameterWidth);

                         

                                    UIParameter parameterHeight = new UIParameter();
                                        parameterHeight.setName("projectHeight");
                                        parameterHeight.setValue(project.getDimension().getHeight());
                                        showCommandButton.getChildren().add(parameterHeight);

                         

                                  // For setting the selected values

                                       UIParameter parameterTagsType = new UIParameter();
                                            parameterTagsType.setName("tagsType");
                                            parameterTagsType.setValue(mnuTagType.getSubmittedValue());
                                            showCommandButton.getChildren().add(parameterTagsType);

                        • 9. Re: How to get the Selected value from HtmlSelectOneMenu after Submitting the Form?
                          Kapil Nimje Newbie

                          Hi Nick,

                           

                          Could you please let me know, what's wrong in the code again even after setting the immediate=true?

                           

                          Thanks

                          • 10. Re: How to get the Selected value from HtmlSelectOneMenu after Submitting the Form?
                            Nick Belaevski Master

                            Kapil,

                             

                            Looking at the code fragment you've posted, I am not able to find the cause. Please post full page & bean code or even better attach small test project.

                            1 of 1 people found this helpful
                            • 11. Re: How to get the Selected value from HtmlSelectOneMenu after Submitting the Form?
                              Kapil Nimje Newbie

                              Hi Nick,

                               

                              Thanks for your reply and kind support,

                               

                              Please find the below code

                               

                              page.xhtml (In this I have a datatable with list of project is displayed and  Action column contains the <a4j:commandLink> "Tags" displyed in bold section in below code), after clicking on link the controller showAction() method is getting called and HtmlModalPanel is appear with the dynamically generated fields).

                               

                              <ui:composition xmlns="http://www.w3.org/1999/xhtml"
                                              xmlns:c="http://java.sun.com/jstl/core"
                                              template="/WEB-INF/layout/default.xhtml"
                                              xmlns:ui="http://java.sun.com/jsf/facelets"
                                              xmlns:f="http://java.sun.com/jsf/core"
                                              xmlns:h="http://java.sun.com/jsf/html"
                                              xmlns:rich="http://richfaces.org/rich"
                                              xmlns:a4j="http://richfaces.org/a4j">
                              <ui:param name="focusedTab" value="project"/>
                              <ui:define name="title">
                                  <h:outputText value="Project Listing"/>
                              </ui:define>

                               

                              <ui:define name="head">
                              </ui:define>

                               

                              <ui:define name="content">
                              <f:view>
                              <h:form id="projectListForm" prependId="false">
                                              <rich:messages infoClass="global-info-message"
                                                             warnClass="global-warn-message"
                                                             errorClass="global-error-message"
                                                             style="float:right;margin-bottom:10px"/>

                               

                              <rich:modalPanel id="tagPanel" binding="#{projectController.tagModalPanel}"/>

                               

                              <rich:dataTable id="data_table"
                                              width="100%"
                                              border="0"
                                              cellspacing="0"
                                              cellpadding="0"
                                              headerClass="headers"
                                              rowClasses="alt1,alt2"
                                              var="project"
                                              value="#{projectController.accountFilteredProjects}"
                                              binding="#{projectController.projectDataTable}"
                                              rows="10">

                               

                                  <rich:column id="idColumn" sortBy="#{project.id}">
                                      <f:facet name="header"><h:outputText value="ID"/></f:facet>
                                      <h:outputText value="#{project.id}"/>
                                  </rich:column>

                               

                                  <rich:column id="nameColumn" sortBy="#{project.name}" filterMethod="#{projectFilterBean.filterByName}" filterValue="#{projectFilterBean.nameFilterValue}">
                                      <f:facet name="header"><h:outputText value="Name"/></f:facet>
                                      <h:outputText value="#{project.name}"/>
                                  </rich:column>

                               


                                  <rich:column id="actionColumn" width="160 px">
                                      <f:facet name="header"><h:outputText value="Actions"/></f:facet>

                               

                                      <a4j:commandLink value="Tags"
                                                       action="#{projectController.showAction}"
                                                       oncomplete="Richfaces.showModalPanel('tagPanel');"
                                                       reRender="tagPanel"/>

                                  </rich:column>
                                 
                              </rich:dataTable>

                              </h:form>


                              </f:view>
                              </ui:define>
                              </ui:composition>

                               

                               

                              ProjectController.java (calling the method for building the dynamic ModalPanel mention in bold section)

                               

                              public class ProjectController
                                      extends AbstractRESTfulController {

                               

                              protected static String SUCEESS="success";

                               

                              public String showAction() {
                                      Project project = (Project) getProjectDataTable().getRowData();
                                      String clickUrl = null;
                                      ProjectHelper.buildTagModalPanel(getTagModalPanel(), project,clickUrl);
                                      return SUCCESS;
                                  } // end method showAction

                               

                                 public String generateTagJS() {
                                      Map<String, String> requestParams = FacesContext.getCurrentInstance().getExternalContext().getRequestParameterMap();

                               

                                      Long projectId = Long.parseLong(requestParams.get("projectId")); // values are getting from UIParameter request
                                      Integer width = Integer.parseInt(requestParams.get("projectWidth"));
                                      Integer height = Integer.parseInt(requestParams.get("projectHeight"));
                                      Long accountId = Long.parseLong(requestParams.get("accountId"));
                                      String accountSecurityKey = requestParams.get("accountSecurityKey");


                                      System.out.println("submitted values==="+tagsBean.getTagsType()); // getting null after submiiting the ModalPanel Show button)
                                      System.out.println("using request Parameter Object==="+requestParams.get("tagsType"));
                              // getting null after submiiting the           ModalPanel Show button)

                               

                                        return SUCCESS;

                                   }

                               

                                  public HtmlDataTable getProjectDataTable() {
                                      return projectDataTable;
                                  } // end method getProjectDataTable

                               

                                  public void setProjectDataTable(HtmlDataTable projectDataTable) {
                                      this.projectDataTable = projectDataTable;
                                  } // end method setProjectDataTable

                               

                                   public HtmlModalPanel getTagModalPanel() {
                                      return tagModalPanel;
                                  }

                               

                                  public void setTagModalPanel(HtmlModalPanel tagModalPanel) {
                                      this.tagModalPanel = tagModalPanel;
                                  }

                              } //End of Class

                               

                               

                              ProjectHelper.java (Generating the HtmlModalPanel)

                               

                              public abstract class ProjectHelper {

                               

                                  public static void buildTagModalPanel(HtmlModalPanel tagModalPanel, Project project, String clickUrl) {
                                      tagModalPanel.getChildren().clear();
                                      tagModalPanel.setMinWidth(300);
                                      tagModalPanel.setAutosized(true);

                               

                                      FacesContext context = FacesContext.getCurrentInstance();
                                      Application application = context.getApplication();

                               

                                      // BUILD THE HEADER
                                      HtmlPanelGroup headerPanelGroup = new HtmlPanelGroup();
                                      HtmlOutputText headerOutputText = new HtmlOutputText();

                               

                                      headerOutputText.setValue("Javascript tag");
                                      headerPanelGroup.getChildren().add(headerOutputText);

                               

                                      // BUILD THE CONTROLS
                                      HtmlPanelGroup controlsPanelGroup = new HtmlPanelGroup();
                                      HtmlGraphicImage controlsCloseImage = new HtmlGraphicImage();
                                      HtmlComponentControl controlsComponentControl = new HtmlComponentControl();

                               

                                      controlsCloseImage.setId("hideImage");
                                      controlsCloseImage.setUrl("/images/icon_close.gif");
                                      controlsCloseImage.setAlt("Close");
                                      controlsCloseImage.setStyle("cursor: pointer;");

                               

                                      controlsComponentControl.setFor("tagPanel");
                                      controlsComponentControl.setAttachTo("hideImage");
                                      controlsComponentControl.setOperation("hide");
                                      controlsComponentControl.setEvent("onclick");

                               

                                      List<UIComponent> controlsPanelGroupChildren = controlsPanelGroup.getChildren();
                                      controlsPanelGroupChildren.add(controlsCloseImage);
                                      controlsPanelGroupChildren.add(controlsComponentControl);

                               

                                      // SET HEADER AND CONTROLS IN THE FACET MAP
                                      Map<String, UIComponent> modalPanelFacetMap = tagModalPanel.getFacets();
                                      modalPanelFacetMap.put("header", headerPanelGroup);
                                      modalPanelFacetMap.put("controls", controlsPanelGroup);

                               

                                      //Changes Added for Tags
                                      HtmlForm form = new HtmlForm();
                                     
                                      // For Tags Types
                                      HtmlPanelGrid panelGrid = new HtmlPanelGrid();

                               

                                          HtmlOutputText lblTagType = new HtmlOutputText();
                                          lblTagType.setValue("Type: ");

                               

                                          HtmlSelectOneMenu mnuTagType = new HtmlSelectOneMenu();
                                          mnuTagType.setId("TagTypeId"+project.getId());
                                          mnuTagType.setStyleClass("TagType");
                                          mnuTagType.setValueExpression("value",         application.getExpressionFactory().createValueExpression(context.getELContext(), "#{tagsBean.tagsType}", String.class));
                                          mnuTagType.setImmediate(true); // Your suggesion
                                     
                                          //For ValueChangeListener
                                          Class[] params2 = new Class[]{ValueChangeEvent.class};
                                          MethodExpression ef = FacesContext.getCurrentInstance().getApplication().getExpressionFactory().
                                                                createMethodExpression(context.getELContext(),
                                                                "#{tagsBean.tagValueChanges}", null, params2);

                               

                                          MethodExpressionValueChangeListener vcl = new MethodExpressionValueChangeListener(ef);
                                          mnuTagType.addValueChangeListener(vcl);
                                         
                                          //Populating the list of items for Drop Down


                                          UISelectItems items = new UISelectItems();
                                          items.setId("TagChoices");
                                          List<SelectItem> selectItemList = new ArrayList<SelectItem>();
                                          selectItemList.add(new SelectItem("Standard"));
                                          selectItemList.add(new SelectItem("Flyover"));
                                          selectItemList.add(new SelectItem("Popup"));

                               

                                          items.setValue(selectItemList);
                                          mnuTagType.getChildren().add(items);

                               

                                          panelGrid.getChildren().add(lblTagType);
                                          panelGrid.getChildren().add(mnuTagType);

                               

                                          //For Indentifier
                                          HtmlOutputText lblIndentifier = new HtmlOutputText();
                                          lblIndentifier.setValue("Identifier: ");

                               

                                          HtmlInputText txtIdentifier = new HtmlInputText();
                                          txtIdentifier.setId("IndentifierId"+project.getId());

                               

                                          panelGrid.getChildren().add(lblIndentifier);
                                          panelGrid.getChildren().add(txtIdentifier);

                               

                                          // For ajax command Buttton   
                                          HtmlPanelGroup buttonPanelGroup = new HtmlPanelGroup();
                                              HtmlAjaxCommandButton showCommandButton = new HtmlAjaxCommandButton();

                               

                                              showCommandButton.setId("ShowButtonId"+project.getId());
                                              showCommandButton.setValue("Show");
                                              String action = "#{projectController.generateTagJS}"; // calling the action after submitting
                                              showCommandButton.setImmediate(true); // Your Suggestion

                               

                                              showCommandButton.setActionExpression(
                                                  createActionExpression(action, String.class));

                               

                                              showCommandButton.setOncomplete("javascript:Richfaces.hideModalPanel('tagPanel')");

                               

                                              UIParameter parameterProjectId = new UIParameter();
                                                  parameterProjectId.setName("projectId");
                                                  parameterProjectId.setValue(project.getId());
                                                  showCommandButton.getChildren().add(parameterProjectId);

                               

                                              UIParameter parameterWidth = new UIParameter();
                                                  parameterWidth.setName("projectWidth");
                                                  parameterWidth.setValue(project.getDimension().getWidth());
                                                  showCommandButton.getChildren().add(parameterWidth);

                               

                                              UIParameter parameterHeight = new UIParameter();
                                                  parameterHeight.setName("projectHeight");
                                                  parameterHeight.setValue(project.getDimension().getHeight());
                                                  showCommandButton.getChildren().add(parameterHeight);

                               

                                              UIParameter parameterAccountId = new UIParameter();
                                                  parameterAccountId.setName("accountId");
                                                  parameterAccountId.setValue(project.getAccount().getId());
                                                  showCommandButton.getChildren().add(parameterAccountId);

                               

                                              UIParameter parameterAccountSecurityKey = new UIParameter();
                                                  parameterAccountSecurityKey.setName("accountSecurityKey");
                                                  parameterAccountSecurityKey.setValue(project.getAccount().getSecurityKey());
                                                  showCommandButton.getChildren().add(parameterAccountSecurityKey);

                               

                                              UIParameter parameterTagsType = new UIParameter();
                                                  parameterTagsType.setName("tagsType");
                                                  parameterTagsType.setValue(mnuTagType.getSubmittedValue());
                                                  showCommandButton.getChildren().add(parameterTagsType);

                               

                                              HtmlAjaxCommandButton emailCommandButton = new HtmlAjaxCommandButton();
                                              emailCommandButton.setId("EmailButtonId"+project.getId());
                                              emailCommandButton.setValue("Email");

                               

                                          buttonPanelGroup.getChildren().add(showCommandButton);
                                          buttonPanelGroup.getChildren().add(emailCommandButton);

                               

                                          panelGrid.getChildren().add(buttonPanelGroup);

                               

                                      tagModalPanel.getChildren().add(panelGrid);
                                      //Ended for Tags

                               

                                      form.getChildren().add(tagModalPanel);

                               

                                  } // end method buildAccountUsersModalPanel
                              } // end class ProjectHelper

                              • 12. Re: How to get the Selected value from HtmlSelectOneMenu after Submitting the Form?
                                Kapil Nimje Newbie

                                also find the Bean Class code

                                 

                                TagsBean.java

                                 

                                @Scope(value="session") // also try to change using request
                                @Component(value = "tagsBean")

                                public class TagsBean implements Serializable{

                                 

                                    private String tagsType;

                                 

                                    public TagsBean() {
                                        this.tagsType = "Standard";
                                    }

                                 

                                    public String getTagsType() {
                                        return tagsType;
                                    }

                                 

                                    public void setTagsType(String tagsType) {
                                        this.tagsType = tagsType;
                                    }
                                   
                                    public void tagValueChanges(ValueChangeEvent event) {
                                        /*tagsType = JSFUtil.getFacesRequestParameter("tagsType");
                                        System.out.println("using request parameter object=="+tagsType);*/
                                        tagsType = (String) event.getNewValue();
                                        System.out.println("in Tabs Bean Listener=="+tagsType);
                                    }

                                 

                                }

                                 

                                Kindly let me know what is wrong in this...

                                 

                                Thanks

                                • 13. Re: How to get the Selected value from HtmlSelectOneMenu after Submitting the Form?
                                  Kapil Nimje Newbie

                                  Hey Nick,

                                   

                                  The problem got solved now, the only mistake I have made is I am calling “RichFaces.hideModalPanel(‘ModalPanelID)” by setOncomplete() event of Ajax command button and not on by setOnclick() event, that’s the main reason the values are getting null.

                                  Now changing the events it working great.

                                   

                                  Changes made in my code is

                                  showCommandButton.setOnclick("javascript:Richfaces.hideModalPanel('tagPanel')");

                                   

                                  Thanks Once again for your kind support Nick.

                                   

                                  Thanks

                                  jBOSS