我的Visualforce自定义搜索页面无响应？

如何解决我的Visualforce自定义搜索页面无响应？

我正在自定义视觉力联系人搜索页面。

这是我要实现的目标：

用户可以在页面上的相应字段中输入姓名，电话号码或电子邮件地址。 之后，他们可以单击“搜索联系人”或“清除字段”按钮。

如果点击“搜索联系人”，则会在下表中填充所有字段，这些联系人的字段与先前的输入相匹配。

如果单击“清除字段”，则会清除页面上的所有输入字段。

目前我没有任何错误，但是两个按钮似乎都没有作用。谁能告诉我我哪里出了问题以及如何解决？

我的页面

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

我的控制器

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;
    }
}

解决方法

这里有几个问题。

1. 如果计划使用javascript来操纵输入字段，则可能要使用custom attribute。实际上，这更多是一个建议。您放置html-前缀，然后将其呈现为不带该前缀的html。 <apex:inputText html-data-input-field="Name" value="{!name}" />

2. 您的脚本不是有效的Javascript。您可以使用function关键字声明一个函数。不要指定返回类型。
   （由于我在上面的＃1中所做的更改，我也将您的getElementById更改为查询选择器。这里我没有使用ID。）
   使用类似这样的内容：

    function ClearFields()
        {
           document.querySelector('[data-input-field=Name]').value = '';
           document.querySelector('[data-input-field=Phone]').value = '';
           document.querySelector('[data-input-field=Email]').value = '';
   
        }
   

3. 要调用clear函数，您需要在函数名称后打开/关闭括号： <input type = "button" value="Clear Fields" onclick="ClearFields()" />

4. 要重新渲染输出表，您将错误的部分传递给了重新渲染。您已经有pageBlockSection包裹了pageBlockTable。
   只需为其添加一个ID：
   <apex:pageBlockSection id="output">
   然后像这样更改rerender上的commandButton：
   <apex:commandButton value="Search Contacts" action="{!searchContacts}" reRender="output" />