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

Border in Datatable will disappear when pressing F5 in Firefox

dirtyyee Jul 9, 2010 12:36 AM

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.

afterRefresh.JPG 72.8 KB
beforeRefresh.JPG 94.6 KB

1. Re: Border in Datatable will disappear when pressing F5 in Firefox

akaine Jul 11, 2010 10:42 PM (in response to dirtyyee)

Have you tried to press F5 and then execute some ajax action? If you see wyciwyg:/xx/yoururl in the browser's url bar then this is your actual problem: http://community.jboss.org/message/528846#528846
Actions
2. Re: Border in Datatable will disappear when pressing F5 in Firefox

dirtyyee Jul 12, 2010 3:02 AM (in response to akaine)

It seems not the same case. It is because if I rerender the table by clicking left hand side navigation, the table will rerender the border for me. Only when pressing F5 will lead to the missing of the border.
Actions
3. Re: Border in Datatable will disappear when pressing F5 in Firefox

nbelaevski Jul 12, 2010 7:04 PM (in response to dirtyyee)

Joey,

Have you checked the source of the problem using Firebug? Or is the site available somewhere in the live, so that I can check the problem?
Actions

Go to original post