Search while Type functionality on VFP not working as expected between apex: tab transition

Question

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*** -->     
      
  
 
    {!a.Acc.name}  
  
 

      
  
 
    {!a.Acc.name}  
  
 
        
    
        // 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]

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

enter image description here

Why is search while Type functionality on VFP not working as expected between apex: tab transition?

Ranjana Admin · Accepted Answer

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.

Search while Type functionality on VFP not working as expected between apex: tab transition

About this question

Your answer

1 Answer

More Salesforce discussions

Learn & Explore

Salesforce Tutorials

Salesforce Interview Q&A

Latest Salesforce Blogs

Want answers to more Salesforce questions?

Stay in the loop — it’s free

You’re on the list!