4 Replies Latest reply on Jan 20, 2011 9:22 AM by Carl Johnson

    problem with listshuttle in modalpanel

    Carl Johnson Newbie

      Good day, people.

       

       

       

      I'm having an application that uses richfaces 3.3.3.final.

       

      found out a problem with using listshuttle component.

       

      here is description:

       

      There's an 1.xhtml page with the list of account data. Also there are modal panels for editing and adding a new account.

       

      The point is that a modalpanel for editing should appear when a user points to the specific account(and every input component should have the data to edit).

       

      When I click on a specific account the modalpanel appears(and account data in the input components appears too) but if I click on a submit button - nothing happens. The function in the 'action' parameter of the 'a4j:commandButton' component is not called.

       

       

       

      Here is the code:

       

       

       

      modalpanel:

       

       

       

      <?xml version="1.0" encoding="UTF-8"?>
      <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
      <ui:composition xmlns="http://www.w3.org/1999/xhtml"
          xmlns:s="http://jboss.com/products/seam/taglib"
          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">
          <rich:modalPanel  id="edit_account_modal_panel"
                           autosized="true" resizeable="false">
                          <f:facet name="header">
                              <h:panelGroup>
                                  <h:outputText value="Editing user"></h:outputText>
                              </h:panelGroup>
                          </f:facet>
                          <f:facet name="controls">
                              <h:panelGroup>
                                  <a4j:commandButton value="close" onclick="#{rich:component('edit_account_modal_panel')}.hide();" />
                              </h:panelGroup>
                          </f:facet>
                              <h:form>
                                  <!--<a4j:outputPanel ajaxRendered="true" >-->
                                      <h:panelGrid cellspacing="2px" >
                                      <h:panelGrid columns="2" cellspacing="2px" >
                                          <h:outputText value="Name: " style="font-weight: bold;" />
                                          <h:inputText value="#{UsersDataController.editUser.name}"
                                                       id="modal_edit_name" style="width:350px;" >
                                              <!--<rich:beanValidator summary="wrong name format" />-->
                                          </h:inputText>
                                          <h:outputText value="" />
                                          <rich:message for="modal_edit_name" >
                                              <f:facet name="errorMarker">
                                                  <h:graphicImage value="/Images/error.gif" />
                                              </f:facet>
                                          </rich:message>
      
                                          <h:outputText value="Password: " style="font-weight: bold;" />
                                          <h:inputSecret value="#{UsersDataController.editUser.password}"
                                                         id="modal_edit_password" style="width:350px;" >
                                              <!--<rich:beanValidator summary="wrong password format" />-->
                                          </h:inputSecret>
      
                                          <h:outputText value="" />
                                          <rich:message for="modal_edit_password">
                                              <f:facet name="errorMarker">
                                                  <h:graphicImage value="/Images/error.gif" />
                                              </f:facet>
                                          </rich:message>
      
                                          <h:outputText value="Type: " style="font-weight:bold;" />
                                          <h:selectOneMenu id="modal_edit_type_combo" style="width:350px;"
                                                           value="#{UsersDataController.editUser.role}">
                                              <f:selectItems value="#{UsersDataController.roles}"
                                                             var="item" itemValue="#{item.id}"
                                                             itemLabel="#{item.name}"/>
                                          </h:selectOneMenu>
      
      
                                          <h:outputText value="" />
                                          <rich:message for="type_combo">
                                              <f:facet name="errorMarker">
                                                  <h:graphicImage value="/Images/error.gif" />
                                              </f:facet>
                                          </rich:message>
      
      
                                      </h:panelGrid>
                                      <h:outputText value="Account traders:" style="font-weight:bold;" />
                                      <rich:listShuttle sourceValue="#{UsersDataController.freeTradersToSelect(UsersDataController.editUser.traders)}"
                                                        targetValue="#{UsersDataController.editUser.traders}"
                                                        var="item" id="modal_edit_traders_list"
                                                        converter="#{TraderConverter}"
                                                        sourceCaptionLabel="Available traders"
                                                        targetCaptionLabel="Selected traders" >
                                          <rich:column>
                                              <h:outputText value="#{item.name}" />
                                          </rich:column>
                                      </rich:listShuttle>
                                      <h:outputText value="" />
                                          <rich:message for="traders_list">
                                              <f:facet name="errorMarker">
                                                  <h:graphicImage value="/Images/error.gif" />
                                              </f:facet>
                                          </rich:message>
                                      </h:panelGrid>
                                  <!--</a4j:outputPanel>-->
                                  <table width="100%">
                                      <tbody>
                                          <tr>
                                              <td align="center" width="50%">
                                                  <a4j:commandButton value="Save"
                                                                     action="#{UsersDataController.doEditAccount}"
                                                                     reRender ="table_bo"
                                                                     oncomplete="#{rich:component('edit_account_modal_panel')}.hide();" />
      
                                              </td>
                                              <td align="center" width="50%">
                                                  <a4j:commandButton value="Cancel"
                                                                     action="#{UsersDataController.clearEditUser}"
                                                                     onclick="#{rich:component('edit_account_modal_panel')}.hide();return false;" />
                                              </td>
                                          </tr>
                                      </tbody>
                                  </table>
                              </h:form>
                   </rich:modalPanel>
      </ui:composition>
      
      

       

       

       

       

      backing bean:

       

       

       

       

       

      public class UsersDataController implements Serializable
      {
          private List<Role> roles = new ArrayList<Role>();
          // all traders are here
          private List<Trader> traders = new ArrayList<Trader>();
          // all users are here
          private List<User> users = new ArrayList<User>();
          // User to create
          private User editUser = new User();
      
       ...  
      constructor + all getters + all setters
       ...
      
      
          public void doEditAccount()
          {
              System.out.println("editing account id=" + editUser.getId() +
                      ", name=" + editUser.getName() +
                      ", pass=" + editUser.getPassword() +
                      ", roleId=" + editUser.getRole() +
                      ", traders=" + editUser.getTraders().size());
              editUser.setName(editUser.getName().toLowerCase());
              storage.doEditAccount(editUser);
              reloadUsersData();
          }
      
      
          // this method converts the ArrayList with Traders into the Set with traders.
          public Set<Trader> arrayListToSet(ArrayList<Trader> traders)
          {
              Set<Trader> tempSet = new HashSet<Trader>(traders);
              return tempSet;
          }
      
          // this method prepares the list of the traders that are not added yet.
          public List<Trader> freeTradersToSelect(List<Trader> trd)
          {
              List<Trader> tTraders = new ArrayList<Trader>();
              Integer count = 0;
              for(Trader tr1 : traders)
              {
                  count = 0;
                  for(Trader tr2 : trd)
                  {
                      if(tr1.getId() == tr2.getId())
                      {
                          break;
                      }
                      else
                      {
                          count++;
                      }
                  }
                  if(count == trd.size())
                  {
                      tTraders.add(tr1);
                  }
              }
              return tTraders;
          }
      
      }
      
      
      

       

       

       

       

      the thing is:

       

      0. if i press 'SAVE' button then modalpanel hides but action method isn't called.

       

      1. if i remove 'listshuttle' component from the xhtml then all the code works ok(except of the needed info of the listshuttle component to be added).

       

      2.  if i place 'ajaxSingle=true' to the button for SAVING then 'action' parameter is called, but new data(that is edited) is not saved. saved is the old data(that is before editing).

       

       

       

      Please, help in resolving this problem.

       

      Thanks in advance.

        • 1. problem with listshuttle in modalpanel
          Ilya Shaikovsky Master

          add rich:messages to the page. I believe conversion failed and except the converter check if equals and hashCode methods  implemented correctly for that objects used in List Shuttle.

          • 2. Re: problem with listshuttle in modalpanel
            Carl Johnson Newbie

            i have the converter. and equals, hashcode methods are set.

            The thing is that this listshuttle with the same converter works fine in the other modal panel(when adding a user):

             

             

            <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
                "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
            <ui:composition xmlns="http://www.w3.org/1999/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">
                <rich:modalPanel id="add_newuser_modal_panel" autosized="true" width="200" >
                    <f:facet name="header">
                        <h:outputText value="Adding a new user" style="padding-right:20px;" />
                    </f:facet>
                    <h:form>
                    <!--<a4j:outputPanel ajaxRendered="true"  >-->
                        <h:panelGrid columns="2" cellspacing="10px" >
                            <h:outputText value="Name: " style="font-weight: bold;" />
                            <h:inputText value="#{UsersDataController.newUser.name}"
                                         id="modal_add_name" style="width:350px;" >
                            </h:inputText>
                            <h:outputText value="" />
                            <rich:message for="modal_add_name" >
                                <f:facet name="errorMarker">
                                    <h:graphicImage value="/Images/error.gif" />
                                </f:facet>
                            </rich:message>
                            <h:outputText value="" />
                            <rich:message for="modal_add_password">
                                <f:facet name="errorMarker">
                                    <h:graphicImage value="/Images/error.gif" />
                                </f:facet>
                            </rich:message>
                            <h:outputText value="Type: " style="font-weight:bold;" />
                            <h:selectOneMenu id="modal_add_type_combo" style="width:350px;"
                                             value="#{UsersDataController.newUser.role}">
                                <f:selectItems value="#{UsersDataController.roles}"
                                               var="item" itemValue="#{item.id}"
                                               itemLabel="#{item.name}"/>
                            </h:selectOneMenu>
                            <h:outputText value="" />
                            <rich:message for="modal_add_type_combo" >
                                <f:facet name="errorMarker">
                                    <h:graphicImage value="/Images/error.gif" />
                                </f:facet>
                            </rich:message>
                            <h:outputText value="Account traders: " style="font-weight: bold;" />
                            <rich:listShuttle sourceValue="#{UsersDataController.traders}"
                                              targetValue="#{UsersDataController.newUser.traders}"
                                              sourceCaptionLabel="Available traders"
                                              targetCaptionLabel="Selected traders"
                                              id="modal_new_traders_list" var="item"
                                              converter="#{TraderConverter}" >
                                <rich:column>
                                    <h:outputText value="#{item.name}" />
                                </rich:column>
                            </rich:listShuttle>
                            <h:outputText value="" />
                            <rich:message for="modal_new_traders_list">
                                <f:facet name="errorMarker">
                                    <h:graphicImage value="/Images/error.gif" />
                                </f:facet>
                            </rich:message>
                        </h:panelGrid>
                        <table width="100%">
                            <tbody><tr>
                                <td align="center" width="50%">
                                    <a4j:commandButton value="  Yes  "
                                                       oncomplete="#{rich:component('add_newuser_modal_panel')}.hide();"
                                                       action="#{UsersDataController.doCreateAccount}"
                                                       reRender="table_bo_wrapper"
                                                       id="modal_new_confirm_button" />
                                </td>
                                <td align="center" width="50%">
                                    <a4j:commandButton value="Cancel"
                                                       id="modal_new_cancel_button"
                                                       action="#{UsersDataController.clearNewUser}"
                                                       onclick="#{rich:component('add_newuser_modal_panel')}.hide();return false;" />
                                </td>
                            </tr></tbody>
                        </table>
                    <!--</a4j:outputPanel>-->
                    </h:form>
                </rich:modalPanel>
            </ui:composition>
            
            
            • 3. Re: problem with listshuttle in modalpanel
              Ilya Shaikovsky Master

              check them please that modal panel which has problem does not included into external form. B.t.w. messages not appears?

              • 4. Re: problem with listshuttle in modalpanel
                Carl Johnson Newbie

                (lists.xhtml) including the modal panels not in the forms:

                 

                <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
                    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
                <ui:composition xmlns="http://www.w3.org/1999/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:include src="addUserForm.xhtml" />
                <!--  -->
                    <ui:include src="editUserForm.xhtml" />
                <!--  -->
                    <ui:include src="deleteUserForm.xhtml" />
                <!--  -->
                </ui:composition>
                
                

                 

                (main.xhtml)and the rendering jsf page is like:

                 

                 

                <?xml version='1.0' encoding='UTF-8' ?>
                <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
                    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
                <html           xmlns="http://www.w3.org/1999/xhtml"
                                xmlns:h="http://java.sun.com/jsf/html"
                                xmlns:ui="http://java.sun.com/jsf/facelets"
                                xmlns:a4j="http://richfaces.org/a4j"
                                xmlns:rich="http://richfaces.org/rich" >
                     <style>
                        .cols
                        {
                            vertical-align:top;
                        }
                        .rich-message-marker img
                        {
                            padding-right:7px;
                        }
                        .rich-message-label
                        {
                            padding-left: 7px;
                            color:red;
                            font-size: 9pt;
                        }
                     </style>
                
                
                    <body>
                 ...
                 <h:panelGroup style="vertical-align:text-top;" >
                 <ui:include src="listUsers.xhtml" />
                 </h:panelGroup>
                 ...
                     </body>
                </html>
                                                                                                                               
                

                 

                the error messages doesn't appear

                actually, i'm stuck(

                seems, there's some little mistake, but have no clues(