0

I have 2 apex:tabs (Primary Tab, Secondary Tab) in visualforce page which shows a table of accounts list. I have a custom script for "search-while typing" functionality with below script. //VFP

<apex:page sidebar="false" controller="customController" standardStylesheets="true">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/JavaScript" />
<apex:form id="formId">
    <apex:pageBlock Title="Accounts List" mode="inlineEdit" id="acc_list" >
    <apex:pagemessages />
        <apex:pageBlockButtons >
             <apex:commandButton action="{!Edit}" id="editButton" value="Edit"/>
             <apex:commandButton action="{!save}" id="saveButton" value="Save"/>
             <apex:commandButton action="{!cancel}" onclick="resetInlineEdit()" id="cancelButton" value="Cancel"/>
             &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
             <input type="text" id="inputAccountName" onkeyup="searchByAccountName()" placeholder="Search by Account..." title="Type in an Account Name"/>
        </apex:pageBlockButtons>
<apex:tabPanel title="Accounts" id="tabpanelId" tabClass="activeTab" inactiveTabClass="inactiveTab" value="{!varTabId}">
<!-------- Primary Tab -------->
<apex:tab label="Primary" name="Primary" switchType="ajax" id="Primary" ontabenter="setActiveTab();">
<!-- *** Primary Detail Mode*** -->
        <apex:pageMessage summary="No Primary Accounts were assigned to you.<br/><br/> Please change the Account's ownership to your name inorder for them to be visible here. <br/><br/>Thank You!" escape="false" severity="Info" strength="3" rendered="{!lstaAccs.size=0}" />
        <apex:outputpanel rendered="{!AND(view,lstaAccs.size>0)}" id="viewPrimaryDetail">
            <apex:actionStatus id="loadingPrimaryDetail" >
                <apex:facet name="start" >
                  <center><img src="/img/loading32.gif" />      Loading....  Please Wait...  </center>
                </apex:facet>
            </apex:actionStatus>
            <div class="table-container">
            <div class="heading-bg"></div>
                <div class="table-container-inner">
                    <table id="schTablePrimaryDetail" >
                        <thead>
                            <tr>
                                <td><div class="heading" style="width: 60px;word-wrap:break-word;">
                                     <apex:commandLink value="Account Name" action="{!toggleSort}" style="text-decoration: none;" rerender="formId" status="loading">
                                        <apex:param name="sortField" value="Name" assignTo="{!sortField}"/>
                                    </apex:commandLink></div>
                                </td>
                            </tr>
                        </thead>
                        <tbody>
                            <apex:repeat value="{!lstaAccs}" var="a">
                            <tr onmouseover="this.style.backgroundColor='#e3f3ff';" onmouseout="this.style.backgroundColor='#ffffff';">
                            <td><div style="width: 80px;word-wrap:break-word;">
                            <apex:outputLink value="/{!a.Acc.Id}" id="acclinkPrimaryDetail" title="Account Name">{!a.Acc.name}</apex:outputLink></div></td>                              
                            </tr>
                            </apex:repeat>
                        </tbody>
                    </table>
                </div>
            </div>
        </apex:outputpanel>


<!-------- Secondary Tab -------->
    <apex:tab label="Secondary" name="Secondary" switchType="ajax" id="Secondary" ontabenter="setActiveSecondaryTab();">
<!-- *** Secondary Detail Mode*** -->
        <apex:pageMessage summary="No Secondary Accounts were assigned to you." severity="Info" strength="3" rendered="{!lstaAccs.size=0}"/>
        <apex:outputpanel rendered="{!AND(view,lstaAccs.size>0)}" id="viewSecondaryDetail">
            <apex:actionStatus id="loadingSecondaryDetail" >
                <apex:facet name="start" >
                  <center><img src="/img/loading32.gif" />      Loading....  Please Wait...  </center>
                </apex:facet>
            </apex:actionStatus>
            <div class="table-container">
            <div class="heading-bg"></div>
                <div class="table-container-inner">
                    <table id="schTableSecondaryDetail">
                        <thead>
                            <tr>
                                <td><div class="heading" style="width: 60px;word-wrap:break-word;">
                                     <apex:commandLink value="Account Name" action="{!toggleSort}" style="text-decoration: none;" rerender="formId" status="loading">
                                        <apex:param name="sortField" value="Name" assignTo="{!sortField}"/>
                                    </apex:commandLink></div>
                                </td>
                            </tr>
                        </thead>
                        <tbody>
                            <apex:repeat value="{!lstaAccs}" var="a">
                            <tr onmouseover="this.style.backgroundColor='#e3f3ff';" onmouseout="this.style.backgroundColor='#ffffff';">
                            <td><div style="width: 80px;word-wrap:break-word;">
                            <apex:outputLink value="/{!a.Acc.Id}" id="acclinkSecondaryDetail" title="Account Name">{!a.Acc.name}</apex:outputLink></div></td>
                            </tr>
                            </apex:repeat>
                        </tbody>
                    </table>
                </div>
            </div>
        </apex:outputpanel>
    </apex:tabPanel> 


    <apex:actionFunction action="{!setActiveSecondaryTab}" name="setActiveSecondaryTab"/>

<apex:actionFunction action="{!setActiveTab}" name="setActiveTab"/> </apex:pageBlock> </apex:form> <script> // Account Search script function searchByAccountName() { var input, filter, table, tr, td, i, txtValue, multipletables; input = document.getElementById("inputAccountName"); filter = input.value.toUpperCase(); multipletables = ["schTablePrimaryDetail","schTable1PrimaryEdit","schTableSecondaryDetail","schTable1SecondaryEdit"]; var x = multipletables.length; for (var k = 0; k < multipletables.length; k++){ table = document.getElementById(multipletables[k]); tr = table.getElementsByTagName("tr"); for (i = 1; i < tr.length; i++) { td = tr[i].getElementsByTagName("td")[0]; if (td) { txtValue = td.textContent || td.innerText; if (txtValue.toUpperCase().indexOf(filter) > -1) { tr[i].style.display = ""; } else { tr[i].style.display = "none"; } }
} } } </script> </apex:page>
VFP with input text box on top

The functionality works just fine on Primary Tab where the accountName typed in the input "text" would show the corresponding account from the list of accounts with in the table. However it wont work on Secondary Tab and I'm unable to figure out/ debug what went wrong where the functionality won't work when switched to other tab. Please let me know what i'm missing here. Thanks in advance!

enter image description here

  • not working as expected is not a very useful problem description, you will have to do some debugging an highlight exactly what seems to 'not work' as well as any errors, or code related pointers that might help identify the behavior. – glls Sep 7 '19 at 1:17
  • @glls Hi glls, I tried to make it clean with snap of actual VFP. I have searchByAccountName() function which is called on top looking for account name from both the tables. However, secondary tab as shown above wouldn't let the searchByAccountName() run or I'm not sure what is blocking it. Please give me your inputs based of what i have. Thanks! – SMorse Sep 7 '19 at 1:31
  • no, sorry, i'm not going to go through your code to try and guess what the issue might be, please edit your post with what "debugging" you have done so far, it will be easier to provide feedback – glls Sep 7 '19 at 2:01
  • @glls To be fair, this isn't easy to debug. I only happened to know the answer because I had a similar need years ago. – sfdcfox Sep 7 '19 at 3:42
  • @sfdcfox thank you much, really appreciate your response. Will try that out and share my findings. – SMorse Sep 7 '19 at 3:52
0

The "AJAX" type switch mode results in a round-trip to the server and the DOM is regenerated. This wipes out any changes that may have been made to the DOM by the client since the last update. Change the switchType attribute to "client." Self-contained example follows.

<apex:page >
    <script>
        function filter() {
            var searchTerm = (document.querySelector("#search").value || '').toUpperCase();
            Array.prototype.forEach.call(
                document.querySelectorAll("td.data"),
                function(row) {
                    row.style.display = row.innerText && row.innerText.toUpperCase().indexOf(searchTerm) > -1?'inherit':'none';
                }
            );
        }
    </script>
    <apex:pageBlock>
        <apex:pageBlockButtons location="top">
            <input id="search" type="search" onkeyup="filter()" />
        </apex:pageBlockButtons>
        <apex:tabPanel switchType="client">
            <apex:tab label="Tab 1">
                <table>
                    <thead>
                        <th>Name</th>
                    </thead>
                    <tbody>
                        <tr>
                            <td class="data">Demo 1</td>
                        </tr>
                        <tr>
                            <td class="data">Demo 2</td>
                        </tr>                        
                        <tr>
                            <td class="data">Demo 1: 2</td>
                        </tr>
                        <tr>
                            <td class="data">Demo 2: 4</td>
                        </tr>                        
                    </tbody>
                </table>
            </apex:tab>
            <apex:tab label="Tab 2">
                <table>
                    <thead>
                        <th>Name</th>
                    </thead>
                    <tbody>
                        <tr>
                            <td class="data">Demo 3</td>
                        </tr>
                        <tr>
                            <td class="data">Demo 4</td>
                        </tr>                        
                        <tr>
                            <td class="data">Demo 3: 1</td>
                        </tr>
                        <tr>
                            <td class="data">Demo 4: 2</td>
                        </tr>                        
                    </tbody>
                </table>
            </apex:tab>
        </apex:tabPanel>
    </apex:pageBlock>
</apex:page>

Note also that if you use reRender to update part of the page, you must also use an oncomplete to call the filter() function again to restore the desired search state.

| improve this answer | |
  • Tried to incorporate similar thing but it still doesnt work on tab2. Please let me know if i need to consider anything else – SMorse Oct 18 '19 at 19:41

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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