PrimeFaces, can’t update tab disabled attribute

Question

I need to update a tab’s disabled attribute when a user edits a dataTable using rowEditor.
I have a ajax tag in a dataTable listening for event="rowEdit" which calls a backing bean method that sets the tab's disabled attribute to true.
If I reference only the tab group with the tabView id as in update=”:tabView” the tab will update but only the edited row of the dataTable renders with no grid lines. If I reference the tab as in update=”:tabView:tab” IDs, the dataTable renders fine but the tab’s disabled attribute doesn't.
The tab being updated is not in the same tab as the dataTable being edited.
The dataTable is in the rates tab and he tab I'm trying to update is tbVSelRates

<p:tab id="rates" title="Select Rates" >
    <p:panelGrid id="pnlMultiDealUpdate"  header="Select Product Rates for Multipule Deal Update" style="margin-top:10px; border: 2px" >
        <p:row>
            <p:column>
                <h:form id="frmSRDealRates" method="post" action="">
                    <p:outputLabel id="lblRateAgreed" for="txtRateAgreed" value="#{msgs['srDeal.rates.agreed']}:"/>

                    <p:inputText id="txtRateAgreed" value="#{dealManagedBean.txtRateAgreedVal}" style="width:40px;" readonly="#{dealManagedBean.readOnly}"/> %

                    <p:outputLabel id="lblRateCat" for="pklRateCat" value="#{msgs['srDeal.rates.cat']}:"/>

                    <p:pickList id="pklRateCat" value="#{dealManagedBean.rateCats}" var="cat" itemLabel="#{cat}" itemValue="#{cat}" disabled="#{dealManagedBean.readOnly}"/>

                    <p:commandButton id="btnApply" value="#{msgs['srDeal.rates.btn.apply']}" style="width:100px;" disabled="#{dealManagedBean.readOnly}"
                                        actionListener="#{dealManagedBean.applyChangesMultiUpdate}" process="frmSRDealRates" update="productsTable,:tbVUpdateDeals"
                                        /> &nbsp;

                    <p:commandButton id="btnUndo" value="#{msgs['srDeal.rates.btn.undo']}" style="width:100px;" disabled="#{dealManagedBean.readOnly}"
                                        onstart="return confirm('Are you sure that you want to undo all recent changes?\nDoing so will remove all rates.');"
                                        actionListener="#{dealManagedBean.undoMultiDealRateChanges}" process="frmSRDealRates" update="productsTable" />

                    <p:dataTable var="pr" value="#{dealManagedBean.products}" filteredValue="#{filteredValueManagedBean.filteredProducts}" paginator="true" rows="10"
                                    id="productsTable" editable="true" rowKey="#{pr.molecule}" paginatorPosition="top"
                                    paginatorTemplate="{CurrentPageReport}  {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}"
                                    rowsPerPageTemplate="10,50, 100, 1000">
                                                                                                <!-- process=":tbVUpdateDeals:frmSRDealRates" -->        
                        <p:ajax event="rowEdit" listener="#{dealManagedBean.applyRowChangesMassUpdate}"  update=":tbVUpdateDeals:tbVSelRates" />
                        <f:facet name="header">
                            #{msgs['srDeal.rates.prod.header']}
                        </f:facet>

                        <p:column headerText="#{msgs['srDeal.rates.prod.cat']}" sortBy="#{pr.category}" filterBy="#{pr.category}"  id="category"
                                    filterOptions="#{dealManagedBean.categoryOptions}" filterMatchMode="exact" width="40" filterStyle="width:30px">
                            <f:facet name="header" >
                                <h:outputText value="#{msgs['srDeal.rates.prod.cat']}" />
                            </f:facet> 
                            <h:outputText value="#{pr.category}" />
                        </p:column>

                        <p:column headerText="#{msgs['srDeal.rates.prod.molecule']}" sortBy="#{pr.moleculeDescription}" filterBy="#{pr.moleculeDescription}"  filterMatchMode="contains" id="molecule"
                                    width="180" filterStyle="width:160px">
                            <f:facet name="header" >
                                <h:outputText value="#{msgs['srDeal.rates.prod.molecule']}" />
                            </f:facet>
                            <h:outputText value="#{pr.moleculeDescription}" />
                        </p:column>
                        <p:column headerText="#{msgs['srDeal.rates.prod.planrate']}" sortBy="#{pr.plannedRate}" id="plannedRateCellEdit" width="60">
                            <p:cellEditor id="massUpdateRate"  >

                                <f:facet name="output">
                                    <h:outputText value="#{pr.plannedRate}" id="otxtRate">
                                        <f:convertNumber maxFractionDigits="2" minFractionDigits="2"/> 
                                    </h:outputText>%
                                </f:facet>
                                <f:facet name="input">
                                    <p:inputText value="#{pr.plannedRate}" style="width:100%" label="plndRate" id="txtRate" />
                                </f:facet>
                            </p:cellEditor>
                        </p:column>
                        <p:column width="35" exportable="false">  
                            <p:rowEditor/> 
                        </p:column>  
                    </p:dataTable>
                    <p:commandButton id="btnSelectRatesNext" value="Next" actionListener="#{dealManagedBean.goToConfirmRatesTab}" update=":tbVUpdateDeals" /> &nbsp;
                    <p:commandButton value="Cancel" onclick="window.location='salesRepHome.jsf'" style="width:75px;" />
                </h:form>
            </p:column>   
        </p:row>
    </p:panelGrid>
</p:tab>

<p:tab id="tbVSelRates" title="Confirm Rates" disabled="#{dealManagedBean.conRatesTabDisabled}">
    <h:form id="frmSelProdRates" >
        <p:panelGrid id="pnlConRates" columns="1">
            <p:dataTable var="pr" value="#{dealManagedBean.selectedUpdateProducts}" filteredValue="#{filteredValueManagedBean.filteredProducts}" paginator="true" rows="10"
                        id="dtSelProductsTable" editable="true" rowKey="#{pr.molecule}" paginatorPosition="top"
                        paginatorTemplate="{CurrentPageReport}  {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}"
                        rowsPerPageTemplate="10,50, 100, 1000">
                <f:facet name="header">
                Confirm Selected Product Rates
                </f:facet>

                <p:column headerText="#{msgs['srDeal.rates.prod.cat']}" sortBy="#{pr.category}" filterBy="#{pr.category}"  id="category"
                            filterOptions="#{dealManagedBean.categoryOptions}" filterMatchMode="exact" width="40" filterStyle="width:30px">
                    <f:facet name="header" >
                        <h:outputText value="#{msgs['srDeal.rates.prod.cat']}" />
                    </f:facet> 
                    <h:outputText value="#{pr.category}" />
                </p:column>

                <p:column headerText="#{msgs['srDeal.rates.prod.molecule']}" sortBy="#{pr.moleculeDescription}" filterBy="#{pr.moleculeDescription}"  filterMatchMode="contains" id="molecule"
                            width="180" filterStyle="width:160px">
                    <f:facet name="header" >
                        <h:outputText value="#{msgs['srDeal.rates.prod.molecule']}" />
                    </f:facet>
                    <h:outputText value="#{pr.moleculeDescription}" />
                </p:column>

                <p:column headerText="Planned Rate"   sortBy="#{pr.plannedRate}" id="plannedRate" width="60">
                    <f:facet name="header" >
                        <h:outputText value="Planned Rate" />
                    </f:facet>
                    <h:outputText value="#{pr.plannedRate}" id="oTxtPlanedRate"> 
                        <f:convertNumber maxFractionDigits="2" minFractionDigits="2"/> 
                    </h:outputText>% 
                </p:column>
            </p:dataTable>
            <div style="float:left; margin-top:10px">
                <h:commandLink id="exAll" style="margin-left:10px;">  
                    <spacer width="5"/>   <h:outputText value="#{msgs['srDeal.bg.bgs.excelall']}" />  
                    <p:dataExporter type="xls" target="dtSelProductsTable" fileName="Product Rates for Mutil Deal Update"/>  
                </h:commandLink>  
            </div>
            <div style="margin-top:10px; float:right">
                <p:commandButton id="btnNextDeals" value="Next" actionListener="#{dealManagedBean.goToSelectDealsTab}" update=":tbVUpdateDeals"/>
            </div>
        </p:panelGrid>
    </h:form>
</p:tab>

PrimeFaces 3.4.2, JBoss 6.0.1 JSF 2.0 Hope this posts right, first time posting a question on StackOverflow Thanks

  public void applyRowChangesMassUpdate(RowEditEvent event){
    DataTable dtRates = (DataTable) event.getSource();
    Product dtRow = (Product)dtRates.getRowData();
    logger.log(Level.FINE, "Molecule: {0}", dtRow.getMolecule());
    logger.log(Level.FINE, "Projected Sales: {0}", dtRow.getYtdProjectedSales());
    logger.log(Level.FINE, "Planned Rate: {0}", dtRow.getPlannedRate());
    if(dtRow.getPlannedRate()!= null && dtRow.getYtdProjectedSales() != null){
    dtRow.setPlannedPAProjected(new BigDecimal(0.01 *         dtRow.getYtdProjectedSales().doubleValue() * dtRow.getPlannedRate().doubleValue()));
    }
    logger.log(Level.FINE, "Planned PA Projected: {0}", dtRow.getPlannedPAProjected());
    conRatesTabDisabled = true;
    tabIndex = 1;
}

To what condition you want to disable your tab ? can you post applyRowChangesMassUpdate method ? — Qussay Najjar
Hi Qussay, thank you for responding. The condition is simply the row edit its self, so now the user must use the next button instead of clicking on the "Confirm Rates" tab. The next button calls a method that re-generates the confirm rates list. — youngm

Qussay Najjar Qussay Najjar · Accepted Answer · 2014-04-11T14:48:07

The plan is to call applyRowChangesMassUpdate via p:remoteCommand and disable the tab using the PrimeFaces Javascript API. Here's how it can be done:

Give a widgetVar attribute to your p:dataTable for example dataTableWV.

<p:dataTable widgetVar="dataTableWV" value="..." var="...">

Give a widgetVar also to your p:tabView for example tabViewWV.

<p:tabView widgetVar="tabViewWV">

Add the call to applyRowChangesMassUpdate:

<p:remoteCommand name="applyRowChanges" actionListener="#{dealManagedBean .applyRowChangesMassUpdate}" />

Then use this script:

<script>
    $(document).ready(function() {
    //bind a function on table value changes
    dataTableWV.tbody.context.onchange = function() {
        //disable the tab you want by index, assuming the tab
        //is the second one, its index will be '1'
        tabViewWV.disable(1);

        //selects view back to the first tab.
        tabViewWV.select(0);

        //call the 'remoteCommand' function
        applyRowChanges();
    }
    });
</script>

This way, the rowEdit event is no longer needed, so just remove

<p:ajax event="rowEdit" listener="#{dealManagedBean.applyRowChangesMassUpdate}"  update=":tbVUpdateDeals:tbVSelRates" />

Also you can remove

conRatesTabDisabled = true;
tabIndex = 1;

from applyRowChangesMassUpdate method, as the tab gets disabled, and the view is moved to another tab with a client-side code, which is better preferred to server-side code when a matter of view that is needed.

PrimeFaces, can’t update tab disabled attribute

1 Answers