Take the 2-minute tour ×
Salesforce Stack Exchange is a question and answer site for Salesforce administrators, implementation experts, developers and anybody in-between. It's 100% free, no registration required.

i am having four tabs. Each of the tab contains an actionFunction with the same name "methodOneInJavaScript" but rerender attribute have different pageblock Ids to refresh it based on the click event of the outputPanel.

Issue:

Now, when i test the js function getDataTable() for onComplete by putting an alert statement inside of it, the alert always fires for the 4th tab and ignores all other three tabs before that. That means, if i click on the outputpanel "Refresh" on tab one (Open Sales Order), it displays the alert message as "ART" which is for Account Receivables Text tab. The idea behind is i want to refresh the datatables of different tabs based on which tab i am in. I need the getDataTable js function should fired only for relevant tabs where i am in. Any suggestions please.

    <body>
    <!-- Create Tab panel -->
    <apex:tabPanel switchType="client" selectedTab="name1" id="AccountTabPanel" tabClass="activeTab" inactiveTabClass="inactiveTab">
        <apex:tab label="Open Sales Orders" name="name1" id="tabOne">

                <apex:outputPanel onclick="methodOneInJavascript()" styleClass="btn"> 
                 Refresh    
                </apex:outputPanel>
                <apex:form >

                <apex:actionFunction action="{!refreshTab}" name="methodOneInJavascript" rerender="OSO" oncomplete="getDataTable('OSO')">
                    <apex:param name="callingTab" assignTo="{!TabName}" value="OSO" />    
                </apex:actionFunction>
                </apex:form>
            <apex:pageBlock title="Open Sales Orders" rendered="{!displayOpenSalesOrders}" Id="OSO">
                <apex:pageBlockSection columns="1">
                    <apex:outputText label="Number of Sales Orders" value="{!NumOf}" id="noof"/>            
                    <apex:outputText label="Total Amount" id="totalamount" value="{0,number,0.00}">
                        <apex:param value="{!TotalAmount}" />
                    </apex:outputText>
                </apex:pageBlockSection>
                <apex:pageBlockTable value="{!OpenSalesOrders}" var="so"  styleClass="dataTable1">
                    <apex:column headerValue="Order #" value="{!so.OrderNo}"/>
                    <apex:column headerValue="Document Date">
                        <apex:outputText value="{0,date,MM/dd/yyyy}">
                            <apex:param value="{!so.DocumentDate}" />
                        </apex:outputText>
                    </apex:column>

                    <apex:column headerValue="Purchase Order #" style="width:10%;" value="{!so.PurchaseOrderNo}"/>
                    <apex:column headerValue="Sales Org" style="width:10%;" value="{!so.SalesOrg}"/>
                    <apex:column headerValue="Amount" style="text-align:right;width:10%;" value="{!so.Amount}"/>
                    <apex:column headerValue="Currency" style="text-align:center;" value="{!so.Curren}"/>
                    <apex:column headerValue="Products" style="width:30%;" value="{!so.Product}"/>
                </apex:pageBlockTable>
            </apex:pageBlock>
            <script type="text/javascript" language="javascript" src="{!URLFOR($Resource.jQueryDataTablesZip, 'js/jquery.js')}"></script>
            <script type="text/javascript" language="javascript" src="{!URLFOR($Resource.jQueryDataTablesZip, 'js/jquery.dataTables.js')}"></script>
            <script type="text/javascript" language="javascript">
            var j$ = jQuery.noConflict();
            j$('table.dataTable1').dataTable({
                sPaginationType: "full_numbers"
            });
            </script>  


        </apex:tab>
        <apex:tab label="Open Deliveries" name="name2" id="tabTwo">

            <apex:outputPanel onclick="methodOneInJavascript()" styleClass="btn"> 
             Refresh    
            </apex:outputPanel>
            <apex:form >

            <apex:actionFunction action="{!refreshTab}" name="methodOneInJavascript" rerender="OD" oncomplete="getDataTable('OD')">
                <apex:param name="callingTab" assignTo="{!TabName}" value="OD" />    
            </apex:actionFunction>
            </apex:form>

            <apex:pageBlock title="Open Deliveries" rendered="{!displayOpenDeliveries}" Id="OD">
                <apex:pageBlockSection columns="1">
                    <apex:outputText label="Number of Deliveries" value="{!DelNumOf}" id="noof"/>           
                </apex:pageBlockSection>
                <apex:pageBlockTable value="{!OpenDeliveries}" var="del"  styleClass="dataTable2">
                    <apex:column headerValue="Delivery Number" style="width:10%;"  value="{!del.DeliveryNumber}"/>
                    <apex:column headerValue="Ship to Party" value="{!del.ShipToParty}"/>
                    <apex:column headerValue="Ship to Party Name" value="{!del.ShipToPartyName}"/>
                    <apex:column headerValue="Delivery Date" >
                        <apex:outputText value="{0,date,MM/dd/yyyy}">
                            <apex:param value="{!del.DeliveryDate}" />
                        </apex:outputText>
                    </apex:column>

                    <apex:column headerValue="Planned GI Date" >
                        <apex:outputText value="{0,date,MM/dd/yyyy}">
                            <apex:param value="{!del.GIDate}" />
                        </apex:outputText>
                    </apex:column>

                    <apex:column headerValue="Products" style="width:30%;" value="{!del.Product}"/>
                </apex:pageBlockTable>

            </apex:pageBlock>
            <script type="text/javascript" language="javascript" src="{!URLFOR($Resource.jQueryDataTablesZip, 'js/jquery.js')}"></script>
            <script type="text/javascript" language="javascript" src="{!URLFOR($Resource.jQueryDataTablesZip, 'js/jquery.dataTables.js')}"></script>
            <script type="text/javascript" language="javascript">
            var j$ = jQuery.noConflict();
            j$('table.dataTable2').dataTable({
                sPaginationType: "full_numbers"
            });
            </script>  


        </apex:tab>

        <apex:tab label="Open Invoices" name="name3" id="tabThree">
            <apex:outputPanel onclick="methodOneInJavascript()" styleClass="btn"> 
             Refresh    
            </apex:outputPanel>
            <apex:form >

            <apex:actionFunction action="{!refreshTab}" name="methodOneInJavascript" rerender="OI" oncomplete="getDataTable('OI')">
                <apex:param name="callingTab" assignTo="{!TabName}" value="OI" />    
            </apex:actionFunction>
            </apex:form>

            <apex:pageBlock title="Open Invoices" rendered="{!displayOpenInvoices}" Id="OI" >
                <apex:pageBlockSection columns="1">
                    <apex:outputText label="Number of Open Invoices" value="{!InvNumOf}" id="noof"/>            
                    <apex:outputText label="Total Amount" id="totalamount" value="{0,number,0.00}">
                        <apex:param value="{!InvTotalAmount}" />
                    </apex:outputText>
                </apex:pageBlockSection>
                <apex:pageBlockTable value="{!OpenInvoices}" var="inv" styleClass="dataTable3">
                    <apex:column headerValue="Invoice Number" value="{!inv.InvoiceNumber}"/>
                    <apex:column headerValue="Invoice Date" >
                        <apex:outputText value="{0,date,MM/dd/yyyy}">
                            <apex:param value="{!inv.InvoiceDate}" />
                        </apex:outputText>
                    </apex:column>

                    <apex:column headerValue="Payer" value="{!inv.Payer}"/>
                    <apex:column headerValue="Payer Name" value="{!inv.PayerName}"/>
                    <apex:column headerValue="Amount" style="text-align:right;" value="{!inv.Amount}"/>
                    <apex:column headerValue="Currency" value="{!inv.Curren}"/>     
                    <apex:column headerValue="Payment Due Date" >
                        <apex:outputText value="{0,date,MM/dd/yyyy}">
                            <apex:param value="{!inv.PaymentDueDate}" />
                        </apex:outputText>
                    </apex:column>

                </apex:pageBlockTable>
                <script type="text/javascript" language="javascript" src="{!URLFOR($Resource.jQueryDataTablesZip, 'js/jquery.js')}"></script>
                <script type="text/javascript" language="javascript" src="{!URLFOR($Resource.jQueryDataTablesZip, 'js/jquery.dataTables.js')}"></script>
                <script type="text/javascript" language="javascript">
                var j$ = jQuery.noConflict();
                j$('table.dataTable3').dataTable({
                    sPaginationType: "full_numbers"
                });
                </script>  

            </apex:pageBlock>

        </apex:tab> 

        <apex:tab label="AR Notes" name="name4" id="tabFour">
    <apex:outputPanel onclick="methodOneInJavascript()" styleClass="btn"> 
     Refresh    
    </apex:outputPanel>
    <apex:form >

    <apex:actionFunction action="{!refreshTab}" name="methodOneInJavascript" rerender="ART" oncomplete="getDataTable('ART')">
        <apex:param name="callingTab" assignTo="{!TabName}" value="ART" />    
    </apex:actionFunction>
    </apex:form>

            <apex:pageBlock title="Account Receivable Notes" rendered="{!displayARText}" Id="ART">
                <apex:pageBlockTable value="{!ARText}" var="art" styleClass="dataTable4">
                    <apex:column value="{!art}"/>
                </apex:pageBlockTable>
                <script type="text/javascript" language="javascript" src="{!URLFOR($Resource.jQueryDataTablesZip, 'js/jquery.js')}"></script>
                <script type="text/javascript" language="javascript" src="{!URLFOR($Resource.jQueryDataTablesZip, 'js/jquery.dataTables.js')}"></script>
                <script type="text/javascript" language="javascript">
                var j$ = jQuery.noConflict();
                j$('table.dataTable4').dataTable({
                    sPaginationType: "full_numbers",
                    "aoColumns": [
                          { "bSortable": false }
                        ],
                    "aaSorting": [] 
                });
                </script>  

            </apex:pageBlock>

        </apex:tab>        

    </apex:tabPanel>
    <script type="text/javascript" language="javascript">
    function getDataTable(tabname) {
            alert(tabname);
            var j$ = jQuery.noConflict();
            j$('table.dataTable1').dataTable({
                sPaginationType: "full_numbers"
            });
    }
    </script>
</body>

enter image description here

share|improve this question

1 Answer 1

up vote 5 down vote accepted

Well, you've kinda answered your own question with this:

Each of the tab contains an actionFunction with the same name "methodOneInJavaScript"


Let's say, if you create a simple page with several js functions with the same name:

function testFunction() {
    alert('1st');
}

function testFunction() {
    alert('2nd');
}

function testFunction() {
    alert('3rd');
}

...the last one will override the previous ones. Meaning, whenever you call testFunction(), the implementation defined in the last one will be invoked (in this example, the page will alert the message '3rd').


In your case, what happens is this - you click the Refresh in the first tab, it invokes function methodOneInJavascript(), but the last one defined in the entire page, which is the one in the "AR Notes" tab:

<apex:actionFunction action="{!refreshTab}" name="methodOneInJavascript" rerender="ART" oncomplete="getDataTable('ART')">
    <apex:param name="callingTab" assignTo="{!TabName}" value="ART" />    
</apex:actionFunction>

This in turn invokes getDataTable('ART') upon completion.

The best way to convince yourself is to inspect the source of the page (right-click > View Source) and search for all occurrences of "methodOneInJavascript". I'd advise to rename the methods accordingly.

share|improve this answer
    
Thanks @dino. I understood my mistake now. You described clearly. Thanks again. –  Baskaran S May 6 at 14:34

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.