My Visualforce Custom Search Page is unresponsive?

Question

I'm working on a custom visual force contact search page.

Here's what I'm trying to achieve:

A user would input either a Name, Phone Number or Email Address into the corresponding fields on the page. After that, they would either click the "Search Contacts" or "Clear Fields" Button.

If "Search Contacts" is clicked, a table below would be populated with all contacts with fields matching the previous input.

If "Clear Fields" is clicked, all the input fields on the page will be cleared.

Currently I don't have any errors but neither button seems to work. Could anyone tell me where I went wrong and how to fix it?

My Page

 <apex:page id="ContactPage" controller="Ctrl_ContactSearch">
  
     
      <apex:tabPanel id="ContactPanel">
             
        <apex:tab id="ContactTab" label="Contact Search"> 
                  
          <apex:form id="ContactForm">

            <apex:pageBlock  title="Contact Search Page" id="ContactBlock">
                
                <!-- Buttons -->
                <apex:pageBlockButtons location="top">
                    <apex:commandButton value="Search Contacts" action="{!searchContacts}" reRender="contact-table" />
                    <input type = "button" value="Clear Fields" onclick="(ClearFields)" />   
                </apex:pageBlockButtons>
                
                 <!-- Input Fields -->
                <apex:pageBlockSection id="contact-table" columns="3">
                                     
                    <apex:pageBlockSectionItem id = "NameInputBlock">                    
                        <apex:outputLabel value="Name" />
                        <apex:inputText id = "NameInputField" value="{!name}" />                   
                    </apex:pageBlockSectionItem>
    
                    <apex:pageBlockSectionItem id = "PhoneInputBlock">                    
                        <apex:outputLabel value="Phone" />
                        <apex:inputText id = "PhoneInputField" value="{!Phone}" />                   
                    </apex:pageBlockSectionItem>
                    
                    <apex:pageBlockSectionItem id = "EmailInputBlock">                    
                        <apex:outputLabel value="Email" />
                        <apex:inputText id = "EmailInputField" value="{!Email}" />                   
                    </apex:pageBlockSectionItem>
                       
                </apex:pageBlockSection>   
                
             </apex:pageBlock>
            
           </apex:form>

            
            <!-- Results Display -->
            <apex:pageBlock>
                
                <apex:pageBlockSection>
                
                 <apex:pageBlockTable value="{!contacts}" var="c">
                            
                            <apex:column>
                                <apex:facet name="header">Name</apex:facet>
                                {!c.Name}
                            </apex:column>
        
                            <apex:column>
                                <apex:facet name="header">Phone Number</apex:facet>
                                {!c.Phone}
                            </apex:column>
                            
                            <apex:column>
                                <apex:facet name="header">Email</apex:facet>
                                {!c.Email}
                            </apex:column>
                            
                        </apex:pageBlockTable>
                    
                </apex:pageBlockSection>
                
            </apex:pageBlock>
            

            
        </apex:tab>
                  
      </apex:tabPanel>      
        
        <script>
        public string ClearFields()
            {
               document.getElementById('{$Component.ContactPage:ContactPanel:ContactTab:ContactForm:ContactBlock:contact-table:NameInputBlock:NameInputField}').value = '';
               document.getElementById('{$Component.ContactPage:ContactPanel:ContactTab:ContactForm:ContactBlock:contact-table:PhoneInputBlock:PhoneInputField}').value = '';
               document.getElementById('{$Component.ContactPage:ContactPanel:ContactTab:ContactForm:ContactBlock:contact-table:EmailInputBlock:EmailInputField}').value = '';
    
            }
        </script>
        
   

</apex:page>

My Controller

public with sharing class Ctrl_ContactSearch
{
    public List<Contact> contacts { get; set; }
    public String name { get; set; }
    public String phone { get; set; }
    public String email { get; set; }

     

    public PageReference searchContacts()
    {
        contacts = [select Name, Phone, Email from Contact where Name = :name or Phone = :phone or email = :email];
        return null;
    }
}

Abraham Labkovsky · Accepted Answer · 2020-09-02T16:28:53.237

0

There are several issues here.

you might want to use a custom attribute if you plan to use javascript to manipulate the input fields. This is more of a suggestion actually. you put the html- prefix and then it gets rendered to html without that prefix. <apex:inputText html-data-input-field="Name" value="{!name}" />
your script was not valid Javascript. you declare a function with the function keyword. Do not specify a return type.
(I also changed your getElementById to a query selector because of the change I made in #1 above. I am not using IDs here.)
Use something like this:
```
 function ClearFields()
     {
        document.querySelector('[data-input-field=Name]').value = '';
        document.querySelector('[data-input-field=Phone]').value = '';
        document.querySelector('[data-input-field=Email]').value = '';

     }
```
to call the clear function, you need to open/close parenthesis after the function name: <input type = "button" value="Clear Fields" onclick="ClearFields()" />
to rerender the output table, you passed the wrong section to your rerender. You already have a pageBlockSection wrapping your pageBlockTable.
Simply add an id to it:
<apex:pageBlockSection id="output">
and change the rerender on your commandButton like so:
<apex:commandButton value="Search Contacts" action="{!searchContacts}" reRender="output" />

edited Sep 02 '20 at 16:28

answered Sep 02 '20 at 15:50

Abraham Labkovsky

1,771
6
12

Thank you so much! I was hoping for an answer like this. I'll try out what you recommended. – ButtonPusher Sep 02 '20 at 16:47
You got it! Let us know. – Abraham Labkovsky Sep 02 '20 at 16:49
Side note: your query may be returning unexpected results. Think of this scenario: user puts just a name. The other 2 fields are null or `''`. SOQL returns all records where those fields are empty. Also, for true search function, use the SOQL `LIKE` comparison operator with wildcards... – Abraham Labkovsky Sep 02 '20 at 19:06
That's actually another problem I've been having lol. Could you show an example of how to implement that? I'm very new to this and the help would go a long way. – ButtonPusher Sep 03 '20 at 00:39
Sure, you want to use a dynamic query so your code can decide which `where` clause to use... Ask a new question and I'll try to whip up an example or someone else might... – Abraham Labkovsky Sep 03 '20 at 01:27

My Visualforce Custom Search Page is unresponsive?

1 Answers1