Search while Type functionality on VFP not working as expected between apex: tab transition
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 belowscript. //VFP
[removed] <input type="text" id="inputAccountName" onkeyup="searchByAccountName()" placeholder="Search by Account..." title="Type in an Account Name"> <!-------- Primary Tab --------> <!-- *** Primary Detail Mode*** -->
// 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>
table = document.getElementById(multipletables[k]);
tr = table.getElementsByTagName("tr");
for (i = 1; i < tr>
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";
}
}
}
}
}
[removed]
[removed]
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 within the table. However, it won’t work on the Secondary Tab and I'm unable to figure out/ debug what went wrong where the functionality won't work when switched to another tab. Please let me know what I’m missing here. Thanks in advance!
Why is search while Type functionality on VFP not working as expected between apex: tab transition?
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.
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'; } ); } Name Demo 1 Demo 2 Demo 1: 2 Demo 2: 4 Name Demo 3 Demo 4 Demo 3: 1 Demo 4: 2 Note also that if you use reRender to update part of the page, you must also use an incomplete to call the filter() function again to restore the desired search state.
Note: What is apex tab?
A page area that displays as a set of tabs. When a user clicks a tab header, the tab's associated content displays, hiding the content of other tabs. This component supports HTML pass-through attributes using the "html-" prefix.