我的 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;
}
}
这里有几个问题。
如果您打算使用 javascript 来操作输入字段,则可能需要使用 custom attribute。这实际上更像是一个建议。您放置 html-
前缀,然后它会在没有该前缀的情况下呈现为 html。 <apex:inputText html-data-input-field="Name" value="{!name}" />
您的脚本无效 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 = '';
}
调用clear函数,函数名后需要open/close括号:
<input type = "button" value="Clear Fields" onclick="ClearFields()" />
要重新渲染输出 table,您将错误的部分传递给了重新渲染。您已经有一个 pageBlockSection
包裹着您的 pageBlockTable
.
只需为其添加一个 id:
<apex:pageBlockSection id="output">
并像这样更改 commandButton
上的 rerender
:
<apex:commandButton value="Search Contacts" action="{!searchContacts}" reRender="output" />
我正在开发自定义视觉力联系人搜索页面。
这是我想要实现的目标:
用户可以在页面的相应字段中输入姓名、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;
}
}
这里有几个问题。
如果您打算使用 javascript 来操作输入字段,则可能需要使用 custom attribute。这实际上更像是一个建议。您放置
html-
前缀,然后它会在没有该前缀的情况下呈现为 html。<apex:inputText html-data-input-field="Name" value="{!name}" />
您的脚本无效 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 = ''; }
调用clear函数,函数名后需要open/close括号:
<input type = "button" value="Clear Fields" onclick="ClearFields()" />
要重新渲染输出 table,您将错误的部分传递给了重新渲染。您已经有一个
pageBlockSection
包裹着您的pageBlockTable
.
只需为其添加一个 id:
<apex:pageBlockSection id="output">
并像这样更改commandButton
上的rerender
:
<apex:commandButton value="Search Contacts" action="{!searchContacts}" reRender="output" />