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

My Visualforce Custom Search Page is unresponsive?

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

这是我想要实现的目标:

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

如果单击“搜索联系人”,下面的 table 将填充字段与先前输入匹配的所有联系人。

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

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

我的主页

 <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 关键字声明一个函数。不要指定 return 类型。
    (由于我在上面#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函数,函数名后需要open/close括号: <input type = "button" value="Clear Fields" onclick="ClearFields()" />

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