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

Question

我正在开发一个自定义视觉强制联系人搜索页面。

这是我想要实现的目标：

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

如果点击“搜索联系人”，下面的表格将填充所有联系人的字段与之前的输入匹配。

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

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

我的页面

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

Answer 1

这里有几个问题。

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">
   并更改您的commandButton 上的rerender，如下所示：
   <apex:commandButton value="Search Contacts" action="{!searchContacts}" reRender="output" />