1 Reply Latest reply on Aug 2, 2010 11:38 PM by deeps83

    HtmlPanelGrid with dynamic textboxes not rerendering properly.

    deeps83

      Hi,

       

      I have a set of text boxes created dynamically inside one HtmlGrid which is having a binding in the xhtml page as shown below:-

      <rich:tab label="prefTAb" id="prefTab">

      <h:form id="prefForm">
              <h:panelGrid columns="2" cellspacing="2">
              <h:outputLabel value="Preference For :" />
              <rich:comboBox id="prefItems" value="#{globalPref.selectedPrefItem}"
                                  suggestionValues="#{globalPref.getGlobalPrefItems()}"
                                  defaultLabel="Select" style="text-align: left;"
                                  enableManualInput="false" width="134" itemClass="stepsgridstyle"
                                  itemSelectedClass="stepsgridstyle">
                                  <a4j:support action="#{globalPref.addDependentsForParamGroup}"
                                      event="onselect" reRender="pgrowl,prefPanel"/>
                              </rich:comboBox>  
                              </h:panelGrid>
                              <br />
              <a4j:outputPanel id="prefPanel">
              <h:panelGrid id="preferenceGrid" binding="#{globalPref.preferenceGrid}" columns="3" cellspacing="2" columnClasses="stepsgridstyle"/>
              </a4j:outputPanel>       
              <a4j:commandButton id="saveButton" action="#{globalPref.saveValues()}" value="Save" eventsQueue="onclick" reRender="pgrowl,prefPanel"/>
          </h:form>
             </rich:tab>

       

      On change of the values in the combo box I am calling a function from the bean which will create a set of components and add that to the grid.which will be rerendered.

       

      The function looks like:

       

      public void addDependentsForParamGroup() {
              setSelectedValue(selectedPrefItem);
              createAndRefreshUI();
          }

      public void createAndRefreshUI() {

              preferenceGrid.getChildren().clear();

              if (someParams != null &&sometParams.getParams() != null) {
                  Collection<Parameter> paramList = someParams.getParams()
                          .values();
                  if (paramList != null) {
                      if (paramList.size() > 0) {
                          for (Parameter param : paramList) {
                              if (!(param.getName().equalsIgnoreCase("SomeGroup") || param
                                      .getName().equalsIgnoreCase("SomeValue"))) {
                                  HtmlOutputLabel label = new HtmlOutputLabel();
                                  label.setValue(param.getTitle() + "  :");
                                  preferenceGrid.getChildren().add(label);
                                  if (param.getType().equalsIgnoreCase("Increment")) {
                                      HtmlInputNumberSpinner spinner = new HtmlInputNumberSpinner();
                                      spinner.setId(param.getName());
                                      spinner.setValue(param.getValue());
                                      spinner.setLabel(param.getName());
                                      spinner.setMinValue(param.getMinVal());
                                      spinner.setMaxValue(param.getMaxVal());
                                      spinner.setImmediate(true);
                                      String _step = getStepValue(param);
                                      spinner.setStep(_step);
                                      addListener(spinner, "onchange",
                                              "#{globalPref.addDependents}");
                                      preferenceGrid.getChildren().add(spinner);
                                  } else if (param.getType().equalsIgnoreCase(
                                          "LookUp")) {
                                      HtmlComboBox combo = new HtmlComboBox();
                                      combo.setId(param.getName());
                                      combo.setValue(param.getValue());
                                      combo.setLabel(param.getName());
                                      combo.setSuggestionValues(param.getValues());
                                      combo.setEnableManualInput(false);
                                      combo.setImmediate(true);
                                      combo.setItemClass("stepsgridstyle");
                                      addListener(combo, "onselect",
                                              "#{globalPref.addDependents}");
                                      preferenceGrid.getChildren().add(combo);
                                  } else if (param.getType().equalsIgnoreCase("Time")) {

       

                                      HtmlInputText text = new HtmlInputText();
                                      String random = String.valueOf((int) (Math
                                              .random() * 10000));
                                      text.setId("text_" + param.getName() + random);

       

                                      text.setValue(param.getValue() + " "
                                              + param.getUnit());
                                      text.setStyle("width:105px");
                                      text.setDisabled(true);
                                      preferenceGrid.getChildren().add(text);

       

                                      HtmlAjaxCommandLink link = new HtmlAjaxCommandLink();
                                      link.setValue("Edit Time");
                                      link.setId(param.getName());
                                      addListener(link, "onclick",
                                              "#{globalPref.setSelectedAs}");
                                      preferenceGrid.getChildren().add(link);
                                  }
                                  if (!param.getType().equalsIgnoreCase("Time")) {
                                      HtmlOutputLabel unitLabel = new HtmlOutputLabel();
                                      unitLabel.setValue(param.getUnit());
                                      preferenceGrid.getChildren().add(unitLabel);
                                  }

       

                              }
                          }
                      }
                  }
                
              }
         }

      The function which set listener for each component is as shown:

       

      private void addListener(UIComponent inputComponent, String event,
                  String method) {

       

              FacesContext facesContext = FacesContext.getCurrentInstance();
              ELContext elContext = facesContext.getELContext();
              Application application = facesContext.getApplication();
              ExpressionFactory expFactory = application.getExpressionFactory();
              MethodExpression methodExp = null;
              methodExp = expFactory.createMethodExpression(elContext, method, null,
                      new Class[] { ActionEvent.class });
              MethodExpressionActionListener actionListener = null;
              actionListener = new MethodExpressionActionListener(methodExp);

       

              HtmlAjaxSupport ajaxSupport = new HtmlAjaxSupport();
              ajaxSupport.setId(inputComponent.getId()+"_ajSupport");
              ajaxSupport.addActionListener(actionListener);
              ajaxSupport.setEvent(event);
              ajaxSupport.setReRender("prefPanel,pgrowl");

       

              UIParameter idParam = new UIParameter();
              idParam.setName("componentId");
              idParam.setValue(inputComponent.getId());
              ajaxSupport.getChildren().add(idParam);

       

              inputComponent.getChildren().add(ajaxSupport);
          }

      Every value change for each component will call one ajax support function which will set some values in the parameters in the paramlist and based on those values the UI is again rerendered calling the createAndRefreshUi fn.

       

      Now I am facing two problems here.

       

      One is :

       

      When parameter type is "time " the components that will be created are a label,a text box which shows the current values and a link for editing the current value.When I click on the 'edit' link a modal panel will come up in which i will select hr and min from two number spinners.After selecting hr and min when I click on the OK button the paramlist is again updated with the entered values and the createAndRefreshUI fn is called for creating the new UI components.Everything is working properly in the bean class.That is, the functions are getting called properly and the components including the textboxes are created properly with the value that was selected in the modal panel.After calling the function I am rerendering the outPutPanel which holds the grid.But it is rerendering only at times and hence I am not able to see the edited values in the text box at times.

       

      Second issue is :

       

      At some point the ajax functions are not getting called at all and if I try to refresh the page I am getting an exception saying :

       

      javax.el.ELException: AjaxUpdate component not found for id: :j_id13:j_id578:prefForm:Number_Shifts_ajSupport
          at org.ajax4jsf.component.EventValueExpression.getComponent(EventValueExpression.java:103)
          at org.ajax4jsf.component.AbstractEventValueExpression.getValue(AbstractEventValueExpression.java:98)
          at org.richfaces.component.html.HtmlInputNumberSpinner.getOnchange(HtmlInputNumberSpinner.java:688)

       

      If anyone have any idea please help me.

       

      Thanks in advance,

      Deeps.