Why is 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
Loading.... Please Wait...
Loading.... Please Wait...
[removed]
// 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]
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!
Why is Search while Type functionality not working as expected between apex tab transitions?
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.