4 Replies Latest reply on Feb 14, 2008 6:15 AM by Mikael Andersson

    Problem with modalPanel?

    Hrvoje Jo Newbie

      Hello!

      I have a problem in my .jsf application and, I think, the problem is in modalPanel.

      I have rich:dataGrid component that represents names of the all the products that are in database. Here is the code

      <a4j:form id="frm">
       ...
       <rich:dataTable id="p3-dt1" value="#{bakingBean.AllProductsList}"
       var="current" style="width:100%" rowKeyVar="rowNum">
       <f:facet name="header">
       <rich:columnGroup>
       <rich:column>Product</rich:column>
       </rich:columnGroup>
       </f:facet>
       <rich:column styleClass="valign-top">
       <myTag:lookup id="f311#{rowNum}" label="productLookUp"
       value="#{current.product.name}"
       hValue="#{current.product.id}"
       hValueE="#{current.product.category.category_id}"
       style="width: 80px" modalPanelName="frm:mp"/>
       </rich:column>
       </rich:dataTable>
       ...
       <rich:modalPanel id="mp" minHeight="600" minWidth="800" height="700"
       width="900" zindex="2000" resizeable="false"
       moveable="false"
       onshow="window.f = event.parameters.field; window.fh = event.parameters.hField; window.fhe = event.parameters.hFieldE;">
       <f:facet name="header">
       <h:outputText value="Choose product"/>
       </f:facet>
       <f:facet name="controls">
       <h:graphicImage value="#{images.close}" style="cursor:pointer"
       onclick="Richfaces.hideModalPanel('mp')"/>
       </f:facet>
       <h:panelGroup style="width:780px;height:450px">
       <rich:tree id="tree">
       <rich:treeNodesAdaptor id="tna1" var="product"
       nodes="#{bakingBean.productsAll}">
       <rich:treeNode>
       <h:outputText id="treeNode1" value="#{product.name}"
       ondblclick="document.getElementById(window.fh).value=#{product.id};document.getElementById(window.f).value='#{product.name}';document.getElementById(window.fhe).value=#{product.category.category_id};Richfaces.hideModalPanel('mp');"/>
       </rich:treeNode>
       </rich:treeNodesAdaptor>
       </rich:tree>
       <br/>
       <br/>
       <h:commandButton id="close" value="close" onclick="Richfaces.hideModalPanel('mp')"/>
       </h:panelGroup>
       </rich:modalPanel>
       </a4j:form>
       ....


      My tag lookUp looks like this:

      <!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:ui="http://java.sun.com/jsf/facelets"
       xmlns:h="http://java.sun.com/jsf/html"
       xmlns:f="http://java.sun.com/jsf/core"
       xmlns:c="http://java.sun.com/jstl/core">
       <ui:composition>
       <c:if test="#{empty editable}">
       <c:set var="editable" value="true"/>
       </c:if>
       <c:if test="${empty rendered}">
       <c:set var="rendered" value="true"/>
       </c:if>
       <h:outputLabel id="#{id}l1" value="#{label}" styleClass="label"
       style="#{labelStyle}"
       rendered="#{rendered and !empty label}"/>
       <h:panelGroup rendered="#{rendered and editable}">
       <div style="position:relative;top:-3px;">
       <h:inputHidden id="#{id}h" value="#{hValue}"/>
       <h:inputHidden id="#{id}he" value="#{hValueE}"/>
       <h:inputText id="#{id}" styleClass="input-field #{styleClass}"
       value="#{value}" style="#{style}"/>
       <h:graphicImage id="#{id}g" value="/images/preview.gif"
       style="position:relative;left:2px;top:4px;cursor:pointer"
       onclick="console.log(' field = ' + this.previousSibling.id + ', hField = ' + this.previousSibling.previousSibling.previousSibling.id + ', hFieldE = ' + this.previousSibling.previousSibling.id);Richfaces.showModalPanel('#{modalPanelName}', {hField: this.previousSibling.previousSibling.previousSibling.id, hFieldE: this.previousSibling.previousSibling.id, field: this.previousSibling.id})"/>
       </div>
       </h:panelGroup>
       <h:outputText id="#{id}ro" styleClass="text #{styleClass}" value="#{value}"
       style="#{style}" rendered="#{rendered and !editable}"/>
       </ui:composition>
      </html>


      Problem occurs when I have 2 products with same name and I change one of them by using modalPanel (lookUp tag).
      Lets say that I have 4 products: egg, car, car, plane. When I change the value for only one car (let's say to boat), on the next round trip to server, all products with the name car will change their name to boat. (I wanted to change value for only 1 product)
      Why is that so and how can I solve this problem?

      Thanks!

        • 1. Re: Problem with modalPanel?
          Ilya Shaikovsky Master

          right after first sight - I'm able to tell you that you can't use external form around the Modal Panel. It should have its' own and it shuold be placed outside the external.

          • 2. Re: Problem with modalPanel?
            Hrvoje Jo Newbie

            Thanks for the tip, but it still doesn't work.

            I tried to get rid of all the tags that are not important and I came to the fact that...

            If you have table in database (table name is lets say shoppingChart) and inside there are fields: customerName (plain string) and product_id (foreigen key to a products table) and in your page lets say that you have something like this...

            ...
             <rich:dataTable id="p1"
             value="#{backingBean.getProducts}"
             var="current" style="width:100%"
             rowKeyVar="rowNum">
             <f:facet name="header">
             <rich:columnGroup>
             <rich:column>Products</rich:column>
             <rich:column>Category</rich:column>
             <rich:column>Dummy button</rich:column>
             </rich:columnGroup>
             </f:facet>
             <rich:column >
             <h:inputText id="f#{rowNum}" value="#{current.customerName}"/>
             </rich:column>
             <rich:column >
             <h:inputText id="productName#{rowNum}" value="#{current.Products.productName}"/>
             </rich:column>
             <rich:column >
             <h:commandButton id="some_button" value="Dummy button"/>
             </rich:column>
             </rich:dataTable>


            and you have 2 records with same values in database (lets say 3rd and 4th record are 'Mike', 'car').

            The problem is in changing those values. If you change the value of 4th record (Mike into John) and click on dummy button, the name of the 3rd record will not change. But if you change the name of the product in 4th record (lets say car to chair) and click on dummy button, the product name in 3rd record will be changed also. I don't know why is that so...

            • 3. Re: Problem with modalPanel?
              Hrvoje Jo Newbie

              Sorry code goes like this...


              ...
               <rich:dataTable id="p1"
               value="#{backingBean.chartList}"
               var="current" style="width:100%"
               rowKeyVar="rowNum">
               <f:facet name="header">
               <rich:columnGroup>
               <rich:column>Products</rich:column>
               <rich:column>Category</rich:column>
               <rich:column>Dummy button</rich:column>
               </rich:columnGroup>
               </f:facet>
               <rich:column >
               <h:inputText id="f#{rowNum}" value="#{current.customerName}"/>
               </rich:column>
               <rich:column >
               <h:inputText id="productName#{rowNum}" value="#{current.Products.productName}"/>
               </rich:column>
               <rich:column >
               <h:commandButton id="some_button" value="Dummy button"/>
               </rich:column>
               </rich:dataTable>
              ...


              • 4. Re: Problem with modalPanel?
                Mikael Andersson Master

                Note; you can't generate dynamic ids like that.