5 Replies Latest reply on Oct 30, 2008 11:34 AM by boubou.camara

    rich pickList, orderingList inside modalPanel problem

    vikramchhetryy

      Hi All,
      I have been struggling to make pickList work properly inside modalPanel since a long time, problem which I face is:
      When I click on any item the copy, remove, remove all, copy all button gets enabled for only 1-2 seconds and goes back to disabled state.

      Today I tried to place orderingList inside modalPanel and I found same problem of buttons getting enable dand disabled after 1-2 seconds.

      I am using richfaces-3.2.0.GA.

      Has anyone faced similar problem or does anyone have working code for the same?
      Any help would be appreciated.

      I can post my code if required.

      Thanks in advance.

      -Vikram


        • 1. Re: rich pickList, orderingList inside modalPanel problem

          my orderingList in Modalpanel, by initialization it can not marked, the modal panel must be rerendered again, then it works.[/img]

          • 2. Re: rich pickList, orderingList inside modalPanel problem
            bluejoe

            I'm having the same problem with my orderingList in a modalPanel. The first time it is opened I can't select anything. If I close it and open it again, it works fine. I have read that there were similar problems using Firefox, but I'm using IE6. I discovered today that, while I can't select anything (the first time the modalPanel is opened) using the mouse, I can select using the keyboard.

            • 3. Re: rich pickList, orderingList inside modalPanel problem
              boubou.camara

              Hi,
              has any of you find a workaround to this problem?
              I am experiencing the same problem :

              Environment :
              - richfaces 3.2.2
              - facelets
              - Mojara JSF (Sun RI)

              Context :
              - an orderinglist in a modal panel
              - a4j:commandButton, oncomplete of which the modal panel is opened

              As a result :
              - the modalpanel is opened and the orderinglist displayed inside it
              - BUT I am unable to select a row of the list by mouseClicking on it (there is no javascript error)
              - even though using the keyboard to navigate from one row to another works well.
              - when I close the modalPanel, and click on the same a4j:commandButton the SECOND TIME, everything work fine:
              I can select a row by mouseclick as it should.

              Observations :
              - when I replace the modalPanel by simple richpanel, no such behaviour happens
              - No javascript error is showned
              - this behaviour is the same for internet explorer or firefox.

              Any help/hint will be appreciated, thanks.

              • 4. Re: rich pickList, orderingList inside modalPanel problem
                elik

                I think, this is the same problem as this one:
                https://jira.jboss.org/jira/browse/RF-2239. But in my case I use listShuttle inside modal panel.

                • 5. Re: rich pickList, orderingList inside modalPanel problem
                  boubou.camara

                  Thanks Elik for pointing me on the issue.
                  There is a simple workaround I did for this problem: is to force to RE-creation of the modalPanel on the load of the modalPanel :
                  given the following :




                  <ui:composition xmlns="http://www.w3.org/1999/xhtml" xmlns:ui="http://java.sun.com/jsf/facelets" xmlns:h="http://java.sun.com/jsf/html"
                   xmlns:f="http://java.sun.com/jsf/core" xmlns:a4j="http://richfaces.org/a4j" xmlns:rich="http://richfaces.org/rich"
                   xmlns:c="http://java.sun.com/jstl/core" xmlns:db="http://www.mycompany.com/tracer/composition">
                  
                   <h:form id="reorderform" ajaxSubmit="true">
                   <h:panelGrid id="orderingpanel">
                   <rich:orderingList id="orderinglist" value="#{myController.listToOrder}" var="row"
                   listHeight="300"
                   listWidth="600"
                   converter="myConverter">
                   <rich:column>
                   <f:facet name="header">
                   <h:outputText value="Id" />
                   </f:facet>
                   <h:outputText value="#{row.id}"></h:outputText>
                   </rich:column>
                   <rich:column>
                   <f:facet name="header">
                   <h:outputText value="Fund Group" />
                   </f:facet>
                   <h:outputText value="#{row.fundGroup}"></h:outputText>
                   </rich:column>
                   <rich:column>
                   <f:facet name="header">
                   <h:outputText value="Line No" />
                   </f:facet>
                   <h:outputText value="#{row.lineNo}"></h:outputText>
                   </rich:column>
                   </rich:orderingList>
                  
                   <h:panelGroup>
                   <a4j:commandButton reRender="resultspanel, notificationMessage, table" styleClass="dbButton" value="Save"
                   onclick="Richfaces.hideModalPanel('reorderpanel')" action="#{myController.saveOrder}">
                   </a4j:commandButton>
                   <a4j:commandButton reRender="resultspanel, notificationMessage" styleClass="dbButton" value="Close" immediate="true"
                   onclick="Richfaces.hideModalPanel('reorderpanel')">
                   </a4j:commandButton>
                   </h:panelGroup>
                   </h:panelGrid>
                  
                   PANELGRID COME HERE
                   </h:form>
                  </ui:composition>




                  I added the following is the form below the panelGrid named orderingpanel:


                  <h:panelGrid id="reloadModalPanel">
                   <script language="javascript">
                   try{
                   var v=Utils.increment();
                   if (v < 3) { Utils.reloadSecondTime();
                   } else {
                   //alert("counter greater than 3 , do nothing!!! counter="+v);
                   }
                   }catch (err) {}
                   </script>
                   </h:panelGrid>



                  I ensure that the function is called no more than 2 times; otherwise, the problem happens at the 2nd,3rd, ....close/open of the modalPanel.

                  the javascript function is the following (this code contains javascript code generated by richfaces, it is just a copy.):

                  var counter=0;
                   increment:function()
                   {
                   counter= counter+1;
                   return counter;
                   },
                  
                   reloadSecondTime:function()
                   {
                   var tt=" var v=new Richfaces.OrderingList('reorderform:orderinglist', 'reorderform:orderinglistinternal_tab',"+
                   "'reorderform:orderinglistinternal_header_tab', 'reorderform:orderinglistfocusKeeper',"+
                   "[['up', 'disup'], ['down', 'disdown'], ['last', 'dislast'], ['first','disfirst']],"+
                   "'reorderform:orderinglistsortLabel',"+
                   "{onorderchanged:null,"+
                   "ontopclick:null,"+
                   "onbottomclick:null,"+
                   "onupclick:null,"+
                   "ondownclick:null},"+
                   "Richfaces.OrderingListSelectItem,"+
                   "null,"+
                   "null);";
                   // alert(tt);
                   if (counter>2) {
                   //alert("function already executed stop counter="+counter);
                   return;
                   } else {
                   //alert("Creation the object the "+counter+" th time");
                   if (RichShuttleUtils.Condition.ElementPresent("reorderform:orderinglist")) {
                   //alert("OrderingList exists !!!");
                   eval(tt);
                   } else {
                   //alert("Wait 1000ms");
                   setTimeOut('eval(tt);',1000);
                   }
                  
                   }
                  
                   }



                  That's it..