3 Replies Latest reply on Jul 12, 2010 7:04 PM by Nick Belaevski

    Border in Datatable will disappear when pressing F5 in Firefox

    Joey Wu Newbie

      Hi all, my problem is ... my datatable works fine at first. But when pressing F5 in firefox, most of the border will be disappeared and it works fine in IE 7. I had attached 2 pictures to demonstrate this issue.

       

      My development enviornment is Richfaces 3.3.3 Final, Firefox 3.6.6

       

      Here is my code :

       

      <rich:dataTable id="orderList_dataTable" value="#{orderBean.uiListSearchResult}" styleClass="orderListWidth" 
          var="result" rowKeyVar="resultIndex" 
          rows="#{orderListDataScrollerBean.recordPerPage}" 
          onRowMouseOver="rowMouseEvent(true, this, #{resultIndex})"
          onRowMouseOut="rowMouseEvent(false, this, #{resultIndex})"
          onRowClick="return selectOrder(this, '.jqOrderSelected#{resultIndex}', '.jqOrderDetail#{resultIndex}', '.jqOrderExpanded#{resultIndex}');"
          headerClass="headerCell"
          >
       
          <rich:column id="orderList_selected_column" headerClass="tableColumnCheckBox" styleClass="tableColumnCheckBox jqColumnPoNo#{resultIndex}">
              <f:facet name="header">
                  <h:selectBooleanCheckbox id="orderList_selected_column_header" onclick="toggleAllOrder('.jqSelectedHeader', '.jqSelected');" style="border:none" styleClass="jqSelectedHeader"/>
              </f:facet>
              
              <rich:dragSupport id="orderList_selected_dragSupport" 
                  dragIndicator="fty_ord_dragIndicator" 
                  dragType="ord-#{result.vndId}" 
                  dragValue="#{result.orderId}"
                  grabCursors="pointer"
                  grabbingCursors="pointer"
                  ondragstart="checkSelectedRow('.jqColumnPoNo#{resultIndex}', '.jqOrderSelected#{resultIndex}')"
                  rendered="#{o:isFactoryChangable(result.factoryConfirmFg,result.orderStatusId)}"
                  >
                  <rich:dndParam name="accept">
                      <h:graphicImage value="../images/icons/dragAccept.gif" />
                  </rich:dndParam>
                  <rich:dndParam name="reject">
                      <h:graphicImage value="../images/icons/dragReject.gif" />
                  </rich:dndParam>
                  <rich:dndParam name="default">
                      <h:graphicImage value="../images/icons/dragDefault.gif" />
                  </rich:dndParam>
                  <rich:dndParam name="label" value="#{bundle.draganddrop_label}"/>
              </rich:dragSupport>
              
              <h:selectBooleanCheckbox id="orderList_selected" value="#{orderBean.selectedData[result.orderId]}" onclick="clickCheckBox()" styleClass="jqSelected jqOrderSelected#{resultIndex}" rendered="#{o:isFactoryChangable(result.factoryConfirmFg,result.orderStatusId)}"/>
              <h:graphicImage id="orderList_selected_img" value="../images/icons/lock.gif" styleClass="imgIcon" rendered="#{!o:isFactoryChangable(result.factoryConfirmFg,result.orderStatusId)}" alt="Lock" title="Lock"/>
              <h:selectBooleanCheckbox id="orderList_unavailable" style="display: none" styleClass="jqUnavailable" rendered="#{result.factoryConfirmFg and result.orderStatusId == 1 or result.orderStatusId != 1}"/>
              
          </rich:column>
       
          <rich:column id="orderList_orderStatus_column" headerClass="tableColumnStatus" styleClass="tableColumnStatus">
              <f:facet name="header">
              </f:facet>
              <rich:dragSupport id="orderList_orderStatus_dragSupport" 
                  dragIndicator="fty_ord_dragIndicator" 
                  dragType="ord-#{result.vndId}" 
                  dragValue="#{result.orderId}"
                  grabCursors="pointer"
                  grabbingCursors="pointer"
                  ondragstart="checkSelectedRow('.jqColumnPoNo#{resultIndex}', '.jqOrderSelected#{resultIndex}')"
                  rendered="#{o:isFactoryChangable(result.factoryConfirmFg,result.orderStatusId)}"
                  >
                  <rich:dndParam name="accept">
                      <h:graphicImage value="../images/icons/dragAccept.gif" />
                  </rich:dndParam>
                  <rich:dndParam name="reject">
                      <h:graphicImage value="../images/icons/dragReject.gif" />
                  </rich:dndParam>
                  <rich:dndParam name="default">
                      <h:graphicImage value="../images/icons/dragDefault.gif" />
                  </rich:dndParam>
                  <rich:dndParam name="label" value="#{bundle.draganddrop_label}"/>
              </rich:dragSupport>
              
              <h:graphicImage id="orderList_orderStatus_column_img" value="#{o:orderStatusPath(result.orderStatusId)}" alt="#{result.orderStatusNm}" title="#{result.orderStatusNm}"/>
                  
          </rich:column>
      
          <rich:column id="orderList_orderRefNo_column" sortOrder="#{orderBean.poNoSortOrder}" sortBy="#{result.orderRefNo}" headerClass="tableColumnPONo" styleClass="tableColumnPONo">
              <f:facet name="header">
                  <h:outputText id="orderList_orderRefNo_column_header" value="#{bundle.order_orderRefNo}" />
              </f:facet>
              
              <rich:dragSupport id="orderList_orderRefNo_dragSupport" 
                  dragIndicator="fty_ord_dragIndicator" 
                  dragType="ord-#{result.vndId}" 
                  dragValue="#{result.orderId}"
                  grabCursors="pointer"
                  grabbingCursors="pointer"
                  ondragstart="checkSelectedRow('.jqColumnPoNo#{resultIndex}', '.jqOrderSelected#{resultIndex}')"
                  rendered="#{o:isFactoryChangable(result.factoryConfirmFg,result.orderStatusId)}"
                  >
                  <rich:dndParam name="accept">
                      <h:graphicImage value="../images/icons/dragAccept.gif" />
                  </rich:dndParam>
                  <rich:dndParam name="reject">
                      <h:graphicImage value="../images/icons/dragReject.gif" />
                  </rich:dndParam>
                  <rich:dndParam name="default">
                      <h:graphicImage value="../images/icons/dragDefault.gif" />
                  </rich:dndParam>
                  <rich:dndParam name="label" value="#{bundle.draganddrop_label}"/>
              </rich:dragSupport>
      
              <h:selectBooleanCheckbox id="orderList_expanded" value="#{orderBean.expandedData[result.orderId]}" style="display:none" styleClass="jqExpanded jqOrderExpanded#{resultIndex}"/>
              <a4j:outputPanel id="orderList_expanded_outputPanel" layout="inline" style="width:20px"
                  onclick="byPassRowClick(); displayPurchaseOrderDetail('#{resultIndex}'); return false;"
                  onmouseover="jQuery(this).addClass('active-item')"
                  onmouseout="jQuery(this).removeClass('active-item')"                    
                  >
                  <h:graphicImage id="orderList_expanded_outputPanel_plus_img" value="../images/icons/expand.gif" styleClass="jqExpandImg jqExpandPlusImg#{resultIndex} #{o:hideContentCss(orderBean.expandedData[result.orderId])}" alt="Expand" title="Expand"/>
                  <h:graphicImage id="orderList_expanded_outputPanel_minus_img" value="../images/icons/collapse.gif" styleClass="jqCollapseImg jqExpandMinusImg#{resultIndex} #{o:displayContentCss(orderBean.expandedData[result.orderId])}" alt="Collapse" title="Collapse"/>
              </a4j:outputPanel>
              
              <rich:spacer width="10px"/>
              <a4j:commandLink id="orderList_orderRefNo_commandLink" value="#{result.orderRefNo}" styleClass="imageIcon"
                  onclick="byPassRowClick(); orderList_loadDetail(#{result.orderId}); return false;"
                  />
          </rich:column>
      
          <rich:column id="orderList_orderType_column" sortOrder="#{orderBean.poTypeSortOrder}" sortBy="#{result.orderTypeCd}" headerClass="tableColumnPOType" styleClass="tableColumnPOType">
              <f:facet name="header">
                  <h:outputText id="orderList_orderType_column_header" value="#{bundle.order_orderType}" />
              </f:facet>
              <rich:dragSupport id="orderList_orderType_dragSupport" 
                  dragIndicator="fty_ord_dragIndicator" 
                  dragType="ord-#{result.vndId}" 
                  dragValue="#{result.orderId}"
                  grabCursors="pointer"
                  grabbingCursors="pointer"
                  ondragstart="checkSelectedRow('.jqColumnPoNo#{resultIndex}', '.jqOrderSelected#{resultIndex}')"
                  rendered="#{o:isFactoryChangable(result.factoryConfirmFg,result.orderStatusId)}"
                  >
                  <rich:dndParam name="accept">
                      <h:graphicImage value="../images/icons/dragAccept.gif" />
                  </rich:dndParam>
                  <rich:dndParam name="reject">
                      <h:graphicImage value="../images/icons/dragReject.gif" />
                  </rich:dndParam>
                  <rich:dndParam name="default">
                      <h:graphicImage value="../images/icons/dragDefault.gif" />
                  </rich:dndParam>
                  <rich:dndParam name="label" value="#{bundle.draganddrop_label}"/>
              </rich:dragSupport>
              
              <h:outputText id="orderList_orderType_column_value" value="#{result.orderTypeCd}" styleClass="" />
          </rich:column>
      
          <rich:column id="orderList_season_column" sortOrder="#{orderBean.seasonSortOrder}" sortBy="#{result.seasonCd}" headerClass="tableColumnSeason" styleClass="tableColumnSeason">
              <f:facet name="header">
                  <h:outputText id="orderList_season_column_header" value="#{bundle.order_season}" />
              </f:facet>
              <rich:dragSupport id="orderList_seasoin_dragSupport" 
                  dragIndicator="fty_ord_dragIndicator" 
                  dragType="ord-#{result.vndId}" 
                  dragValue="#{result.orderId}"
                  grabCursors="pointer"
                  grabbingCursors="pointer"
                  ondragstart="checkSelectedRow('.jqColumnPoNo#{resultIndex}', '.jqOrderSelected#{resultIndex}')"
                  rendered="#{o:isFactoryChangable(result.factoryConfirmFg,result.orderStatusId)}"
                  >
                  <rich:dndParam name="accept">
                      <h:graphicImage value="../images/icons/dragAccept.gif" />
                  </rich:dndParam>
                  <rich:dndParam name="reject">
                      <h:graphicImage value="../images/icons/dragReject.gif" />
                  </rich:dndParam>
                  <rich:dndParam name="default">
                      <h:graphicImage value="../images/icons/dragDefault.gif" />
                  </rich:dndParam>
                  <rich:dndParam name="label" value="#{bundle.draganddrop_label}"/>
              </rich:dragSupport>                
              
              <h:outputText id="orderList_season_column_value" value="#{result.seasonCd}" styleClass="" />
              
          </rich:column>
          
          <rich:column id="orderList_customer_column" sortOrder="#{orderBean.customerSortOrder}" sortBy="#{result.cusRefNm}" headerClass="tableColumnCustomer" styleClass="tableColumnCustomer">
              <f:facet name="header">
                  <h:outputText id="orderList_customer_column_header" value="#{bundle.order_customer}" />
              </f:facet>
              <rich:dragSupport id="orderList_customer_dragSupport" 
                  dragIndicator="fty_ord_dragIndicator" 
                  dragType="ord-#{result.vndId}" 
                  dragValue="#{result.orderId}"
                  grabCursors="pointer"
                  grabbingCursors="pointer"
                  ondragstart="checkSelectedRow('.jqColumnPoNo#{resultIndex}', '.jqOrderSelected#{resultIndex}')"
                  rendered="#{o:isFactoryChangable(result.factoryConfirmFg,result.orderStatusId)}"
                  >
                  <rich:dndParam name="accept">
                      <h:graphicImage value="../images/icons/dragAccept.gif" />
                  </rich:dndParam>
                  <rich:dndParam name="reject">
                      <h:graphicImage value="../images/icons/dragReject.gif" />
                  </rich:dndParam>
                  <rich:dndParam name="default">
                      <h:graphicImage value="../images/icons/dragDefault.gif" />
                  </rich:dndParam>
                  <rich:dndParam name="label" value="#{bundle.draganddrop_label}"/>
              </rich:dragSupport>                
              <h:outputText id="orderList_customer_column_value" value="#{result.cusRefNm}" styleClass="" />
          </rich:column>
       
          <rich:column id="orderList_factory_column" headerClass="tableColumnFactory" sortBy="#{result.ftyRefNm}" styleClass="tableColumnFactory">
              <f:facet name="header">
                  <h:outputText id="orderList_factory_column_header" value="#{bundle.order_factory}" />
              </f:facet>
              <rich:dragSupport id="orderList_factory_dragSupport" 
                  dragIndicator="fty_ord_dragIndicator" 
                  dragType="ord-#{result.vndId}" 
                  dragValue="#{result.orderId}"
                  grabCursors="pointer"
                  grabbingCursors="pointer"
                  ondragstart="checkSelectedRow('.jqColumnPoNo#{resultIndex}', '.jqOrderSelected#{resultIndex}')"
                  rendered="#{o:isFactoryChangable(result.factoryConfirmFg,result.orderStatusId)}"
                  >
                  <rich:dndParam name="accept">
                      <h:graphicImage value="../images/icons/dragAccept.gif" />
                  </rich:dndParam>
                  <rich:dndParam name="reject">
                      <h:graphicImage value="../images/icons/dragReject.gif" />
                  </rich:dndParam>
                  <rich:dndParam name="default">
                      <h:graphicImage value="../images/icons/dragDefault.gif" />
                  </rich:dndParam>
                  <rich:dndParam name="label" value="#{bundle.draganddrop_label}"/>
              </rich:dragSupport>                        
              <a4j:outputPanel id="orderList_factory_column_outputPanel" layout="block">
                  <rich:inplaceSelect id="orderList_factory_column_inplaceSelect" value="#{result.ftyId}"    defaultLabel="Confirm Factory"
                      layout="block"
                      rendered="#{o:isFactoryChangable(result.factoryConfirmFg,result.orderStatusId)}"
                      onclick="byPassRowClick();selectOneOrder('.jqSelectedHeader','.jqSelected', '.jqOrderSelected#{resultIndex}');"
                      onviewactivated="if (valueChanged(#{result.ftyId},#{rich:component('orderList_factory_column_inplaceSelect')}.getValue()) == true){ return orderList_updateOrderFactory(#{result.orderId}, #{rich:component('orderList_factory_column_inplaceSelect')}.getValue()); }"
                      >
                      <f:selectItems id="orderList_factory_column_value_selectItems" value="#{orderBean.uiMapFactoryList[result.vndId]}" />  
                  </rich:inplaceSelect>
                      
                  <h:outputText id="orderList_factory_column_value" value="#{result.ftyRefNm}" rendered="#{!o:isFactoryChangable(result.factoryConfirmFg,result.orderStatusId)}"/>
              </a4j:outputPanel>
          </rich:column>
          
          <rich:column id="orderList_styleNo_column" styleClass="jqDetail jqOrderDetail#{resultIndex} #{o:hideContentCss(!orderBean.expandedData[result.orderId])} subRowBackground" colspan="9" onclick="byPassRowClick();" breakBefore="true">
          <rich:dataTable id="orderList_styleNo_subTable"
              var="style" value="#{orderBean.uiMapSearchResult[result.orderId]}"
              cellpadding="0" cellspacing="0" border="0" 
              onclick="byPassRowClick();" 
              headerClass="subHeaderCell" styleClass="orderListSubTableWidth"
              >
              
              <rich:column id="orderList_styleNo_subTable_dummy_column" width="47px"/>
              
              <rich:column id="orderList_styleNo_subTable_orderSplitStatus_column" styleClass="statusColumnCenter">
                  <h:graphicImage id="orderList_orderSplitStatus_column_img" value="#{o:orderStatusPath(style.orderStatusId)}" title="#{style.orderStatusNm}" alt="#{style.orderStatusNm}"/>
              </rich:column>
              
              <rich:column id="orderList_styleNo_subTable_orderSplitSeqNo_column" colspan="8" style="padding: 5px 0px 0px 15px">
                  <f:facet name="header">
                      <h:outputText id="orderList_styleNo_subTable_orderSplitSeqNo_column_header" value="#{bundle.orderSplit_orderSplitSeqNo}" />
                  </f:facet>
                  <h:outputText id="orderList_styleNo_subTable_orderSplitSeqNo_column_value" value="#{style.orderSplitSeqNo}"/>
              </rich:column>
              
              <rich:column id="orderList_styleNo_subTable_styleNo_column" colspan="8">
                  <f:facet name="header">
                      <h:outputText id="orderList_styleNo_subTable_styleNo_column_header" value="#{bundle.orderSplit_styleRefNo}" />
                  </f:facet>
              
                  <h:outputText id="orderList_styleNo_subTable_styleNo_column_value" value="#{style.styleRefNo}"/>
              </rich:column>
      
              <rich:column id="orderList_dataTable_itemRefNo_column" >
                  <f:facet name="header">
                      <h:outputText id="orderList_dataTable_itemRefNot_column_header" value="#{bundle.orderSplitItem_itemRefNo}" />
                  </f:facet>
              
                  <a4j:repeat id="orderList_item_subTable" var="item" value="#{orderBean.uiMapItemRefNo[style.orderSplitId]}" rowKeyVar="itemIndex">
                      <a4j:outputPanel id="orderList_item_subTable_column_label" value="," rendered="#{itemIndex>0}" />
                      <h:outputText id="orderList_item_subTable_column_value" value="#{item}"/>
                  </a4j:repeat>
              </rich:column>
              
              <rich:column id="orderList_dataTable_splityQty_column" >
                  <f:facet name="header">
                      <h:outputText id="orderList_dataTable_splityQty_column_header" value="#{bundle.orderSplit_splitQty}" />
                  </f:facet>
                  
                  <h:outputText id="orderList_styleNo_subTable_splitQty_column_value" value="#{style.splitQty}"/>
              </rich:column>
              
              <rich:column id="orderList_styleNo_subTable_shipType_column" styleClass="">
                  <f:facet name="header">
                      <h:outputText id="orderList_shipType_column_header" value="#{bundle.orderSplit_shipType}" />
                  </f:facet>
                  <h:outputText id="orderList_shipType_column_value" value="#{style.shipTypeCd}" styleClass="columndata" />
              </rich:column>
      
              <rich:column id="orderList_dataTable_expShipDt_column" colspan="8">
                  <f:facet name="header">
                      <h:outputText id="orderList_dataTable_expShipDt_column_header" value="#{bundle.orderSplit_expShipDt}" />
                  </f:facet>
                  <h:outputText id="orderList_dataTable_expShipDt_column_value" value="#{o:parseDate2StringAsc(style.expShipDt)}"/>
              </rich:column>
      
          </rich:dataTable>
          <rich:jQuery selector="#orderList_styleNo_subTable tr:odd" query="addClass('oddrowBackground')" />
          </rich:column>    
       
      </rich:dataTable>

       

      And I had modified some css  :

       

      .rich-table-cell {
          border:#ddd 1px solid;
          height:30px;
      }
      .rich-table {
          border:#ddd 1px solid;
      }
      

       

      Would anyone can help? It's urgent for me. Thanks.