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"/>
<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>
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!
