选择的下拉更改功能不会在嵌套的 gridview 中触发
chosen dropdown change function not trigger in nested gridview
我有一个嵌套的网格视图。当此嵌套网格中的数据行处于编辑模式时,我希望将其中的 2 列更改为选定的下拉列表。
当用户在第一个下拉列表中输入 selection 时,第二个下拉列表中的列表会发生变化。这是在客户端使用 jquery 完成的。此设计在应用程序的另一个网格中运行良好,这不是嵌套网格。
问题是首先创建了下拉菜单,但没有显示为所选样式的下拉菜单。然后当用户更改第一个下拉列表中的值时,不会触发更改事件并且不会更新第二个下拉列表。但是,如果您 select 在第二个下拉列表中输入一个值,则两个控件都会更改为所选样式。
这是我的标记:
<div id="RecipientWrapper">
<asp:ScriptManager ID="recipientScriptMgr" runat="server">
</asp:ScriptManager>
<asp:GridView ID="RecipientInfoGridView" runat="server" AllowPaging="True" PageSize="10"
AutoGenerateColumns="False" Caption="Recipient Information" CaptionAlign="Top"
CssClass="grid" HorizontalAlign="Left" ShowFooter="True"
ShowHeaderWhenEmpty="True" DataKeyNames="RecipientID"
onpageindexchanging="RecipientInfoGridView_PageIndexChanging"
onrowcancelingedit="RecipientInfoGridView_RowCancelingEdit"
onrowcommand="RecipientInfoGridView_RowCommand"
onrowdeleting="RecipientInfoGridView_RowDeleting"
onrowediting="RecipientInfoGridView_RowEditing"
onrowupdating="RecipientInfoGridView_RowUpdating"
OnRowDataBound="RecipientInfoGridView_RowDataBound">
<Columns>
<asp:TemplateField>
<ItemTemplate>
<a href="javascript:DivExpandCollapse('div<%# Eval("RecipientID")%>');">
<img id="imgdiv<%# Eval("RecipientID")%>" alt="" width="25px" border="0" src="Images/plus.png" />
</a>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="RecipientID">
<ItemTemplate>
<asp:Label ID="rigvLblRecipientID" runat="server" Text='<%# Bind("RecipientID") %>' ClientIDMode="Static"></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="UserID">
<ItemTemplate>
<asp:Label ID="rigvLblUserID" runat="server" Text='<%# Bind("UserID") %>' ClientIDMode="Static"></asp:Label>
</ItemTemplate>
<EditItemTemplate>
<asp:TextBox ID="rigvTxtBxUserID" runat="server" Text='<%# Bind("UserID") %>' ClientIDMode="Static"></asp:TextBox>
<asp:RequiredFieldValidator ID="rigvRequiredFieldEditUserID" ControlToValidate="rigvTxtBxUserID" runat="server"
ErrorMessage="Required field." ValidationGroup="EditRecipientValidation" Display="Dynamic" CssClass="message-error">
</asp:RequiredFieldValidator>
<asp:RegularExpressionValidator ID="rigvMaxValEditUserID" ControlToValidate="rigvTxtBxUserID" runat="server"
ErrorMessage="Maximum length is 40." ValidationGroup="EditRecipientValidation" Display="Dynamic"
CssClass="message-error" ValidationExpression="^.{1,40}$">
</asp:RegularExpressionValidator>
</EditItemTemplate>
<FooterTemplate>
<asp:TextBox ID="rigvTxtBxInsertUserID" runat="server" Text='<%# Bind("UserID") %>' ClientIDMode="Predictable"></asp:TextBox>
<asp:RequiredFieldValidator ID="rigvRequiredFieldInsertUserID" ControlToValidate="rigvTxtBxInsertUserID" runat="server"
ErrorMessage="Required field." ValidationGroup="InsertRecipientValidation" Display="Dynamic" CssClass="message-error">
</asp:RequiredFieldValidator>
<asp:RegularExpressionValidator ID="rigvMaxValInsertUserID" ControlToValidate="rigvTxtBxInsertUserID" runat="server"
ErrorMessage="Maximumn length is 40." ValidationGroup="InsertRecipientValidation" Display="Dynamic" CssClass="message-error"
ValidationExpression="^.{1,40}$" >
</asp:RegularExpressionValidator>
</FooterTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Name">
<ItemTemplate>
<asp:Label ID="rigvLblName" runat="server" Text='<%# Bind("RecipientName") %>' ClientIDMode="Static"></asp:Label>
</ItemTemplate>
<EditItemTemplate>
<asp:TextBox ID="rigvTxtBxName" runat="server" Text='<%# Bind("RecipientName") %>' ClientIDMode="Static"></asp:TextBox>
<asp:RequiredFieldValidator ID="rigvRequiredFieldEditName" ControlToValidate="rigvTxtBxName" runat="server"
ErrorMessage="Required field." ValidationGroup="EditRecipientValidation" Display="Dynamic"
CssClass="message-error">
</asp:RequiredFieldValidator>
<asp:RegularExpressionValidator ID="rigvMaxValEditName" ControlToValidate="rigvTxtBxName" runat="server"
ErrorMessage="Maximum length is 80." ValidationGroup="EditRecipientValidation" Display="Dynamic"
CssClass="message-error" ValidationExpression="^.{1,80}$">
</asp:RegularExpressionValidator>
</EditItemTemplate>
<FooterTemplate>
<asp:TextBox ID="rigvTxtBxInsertName" runat="server" Text='<%# Bind("RecipientName") %>' ClientIDMode="Predictable"></asp:TextBox>
<asp:RequiredFieldValidator ID="rigvRequiredFieldInsertName" ControlToValidate="rigvTxtBxInsertName" runat="server"
ErrorMessage="Required field." ValidationGroup="InsertRecipientValidation" Display="Dynamic" CssClass="message-error">
</asp:RequiredFieldValidator>
<asp:RegularExpressionValidator ID="rigvMaxValInsertName" ControlToValidate="rigvTxtBxInsertName" runat="server"
ErrorMessage="Maximumn length is 80." ValidationGroup="InsertRecipientValidation" Display="Dynamic" CssClass="message-error"
ValidationExpression="^.{1,80}$">
</asp:RegularExpressionValidator>
</FooterTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Action" ShowHeader="False" ItemStyle-Wrap="false" ItemStyle-HorizontalAlign="Center">
<ItemTemplate>
<asp:Button ID="rigvEditButton" runat="server" CausesValidation="False" CommandName="Edit"
Text="Edit" CssClass="gridActionbutton"></asp:Button>
<asp:Button ID="rigvDeleteButton" runat="server" CausesValidation="False" CommandName="Delete"
Text="Delete" CssClass="gridActionbutton" OnClientClick="return confirm('Are you sure you want to delete this Recipient Information?')" >
</asp:Button>
<tr>
<td colspan="100%">
<asp:UpdatePanel ID="updatePnlDeviceNestedGrid" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<div id="div<%# Eval("RecipientID") %>" style="display:none">
<asp:GridView ID="RecipientDeviceGridView" runat="server" AutoGenerateColumns="false" CssClass="grid" ShowFooter="true" Caption="Device Information"
CaptionAlign="Top" AllowPaging="true" PageSize="3" HorizontalAlign="Left"
onpageindexchanging="RecipientDeviceGridView_PageIndexChanging"
OnPageIndexChanged="RecipientDeviceGridView_PageIndexChanged"
onrowcommand="RecipientDeviceGridView_RowCommand"
onrowediting="RecipientDeviceGridView_RowEditing"
onrowupdating="RecipientDeviceGridView_RowUpdating"
OnRowCancelingEdit="RecipientDeviceGridView_RowCancelingEdit"
OnRowDeleting="RecipientDeviceGridView_RowDeleting"
OnRowDataBound="RecipientDeviceGridView_RowDataBound">
<Columns>
<asp:TemplateField HeaderText="DeviceID">
<ItemTemplate>
<asp:Label ID="recdevgvLblDeviceID" runat="server" Text='<%# Bind("DeviceID") %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Device" ItemStyle-Wrap="false">
<ItemTemplate>
<asp:Label ID="recdevgvDeviceID" runat="server" Visible="false" Text='<%# Bind("DeviceID") %>'></asp:Label>
<asp:Label ID="recdevgvLblDeviceName" runat="server" Text='<%# Bind("DeviceName") %>'></asp:Label>
</ItemTemplate>
<EditItemTemplate>
<asp:Label ID="recdevgvEditDeviceID" runat="server" Visible="false" Text='<%# Bind("DeviceID") %>'></asp:Label>
<asp:Label ID="recdevgvEditDeviceName" runat="server" Visible="false" Text='<%# Bind("DeviceName") %>'></asp:Label>
<asp:DropDownList ID="recdevgvDDListDeviceName" runat="server" ClientIDMode="Static"
data-placeholder="Choose device…" class="chosen-single">
</asp:DropDownList>
<asp:RequiredFieldValidator ID="recdevReqValueDDLDeviceNameEdit" runat="server"
ControlToValidate="recdevgvDDListDeviceName" ValidationGroup="recdevEditDeviceValidation"
ErrorMessage="Selection required." CssClass="message-error-dropdown">
</asp:RequiredFieldValidator>
</EditItemTemplate>
<FooterTemplate>
<asp:DropDownList ID="recdevgvDDListDeviceNameInsert" runat="server" ClientIDMode="Static"
data-placeholder="Choose device..." class="chosen-single">
</asp:DropDownList>
<asp:RequiredFieldValidator ID="recdevReqValueDDLDeviceNameInsert" runat="server" InitialValue="0"
ControlToValidate="recdevgvDDListDeviceNameInsert" ValidationGroup="recdevInsertDeviceValidation"
ErrorMessage="Selection required." CssClass="message-error-dropdown">
</asp:RequiredFieldValidator>
</FooterTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Service Provider">
<ItemTemplate>
<asp:Label ID="recdevgvLblServiceName" runat="server" Text='<%# Bind("ServiceName") %>'></asp:Label>
</ItemTemplate>
<EditItemTemplate>
<asp:Label ID="recdevgvEditServiceName" runat="server" Visible="false" Text='<%# Bind("ServiceName") %>'></asp:Label>
<asp:DropDownList ID="recdevgvDDListServiceName" runat="server" ClientIDMode="Static"
OnSelectedIndexChanged="RecipientDeviceGridView_SelectedIndexChanged_EditServiceName" AutoPostBack="true" EnableViewState="true"
data-placeholder="Choose service…" class="chosen-single">
</asp:DropDownList>
<asp:RequiredFieldValidator ID="recdevReqValueDDLServiceNameEdit" runat="server"
ControlToValidate="recdevgvDDListServiceName" ValidationGroup="recdevEditDeviceValidation"
ErrorMessage="Selection required." CssClass="message-error-dropdown">
</asp:RequiredFieldValidator>
</EditItemTemplate>
<FooterTemplate>
<asp:DropDownList ID="recdevgvDDListServiceNameInsert" runat="server" ClientIDMode="Static" Enabled="false"
OnSelectedIndexChanged="RecipientDeviceGridView_SelectedIndexChanged_EditServiceName" AutoPostBack="true" EnableViewState="true"
data-placeholder="Choose service…" class="chosen-single">
</asp:DropDownList>
<asp:RequiredFieldValidator ID="recdevReqValueDDLServiceNameInsert" runat="server" InitialValue="0"
ControlToValidate="recdevgvDDListServiceNameInsert" ValidationGroup="recdevInsertDeviceValidation"
ErrorMessage="Selection required." CssClass="message-error-dropdown">
</asp:RequiredFieldValidator>
</FooterTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Address">
<ItemTemplate>
<asp:Label ID="recdevgvLblAddress" runat="server" Text='<%# Bind("Address") %>'></asp:Label>
</ItemTemplate>
<EditItemTemplate>
<asp:TextBox ID="recdevgvTxtBoxAddress" runat="server" Text='<%# Bind("Address") %>' ClientIDMode="Static"></asp:TextBox>
<asp:Label ID="recdevgvEditAddressExt" runat="server" Visible="false" Text='<%# Bind("ServiceExtension") %>'
ClientIDMode="Static">
</asp:Label>
<asp:RequiredFieldValidator ID="recdevReqValueAddressEdit" runat="server"
ControlToValidate="recdevgvTxtBoxAddress" ValidationGroup="recdevEditDeviceValidation"
ErrorMessage="Required field." CssClass="message-error">
</asp:RequiredFieldValidator>
<asp:CustomValidator ID="recdevCustomValAddressEdit" runat="server" ControlToValidate="recdevgvTxtBoxAddress" CssClass="message-error"
ErrorMessage="*" ClientValidationFunction="ValidateAddressEdit" EnableClientScript="true"
ValidationGroup="recdevEditDeviceValidation">
</asp:CustomValidator>
</EditItemTemplate>
<FooterTemplate>
<asp:TextBox ID="recdevgvTxtBoxAddressInsert" runat="server" ClientIDMode="Static"></asp:TextBox>
<asp:Label ID="recdevgvAddressExtInsert" runat="server" Visible="false" ClientIDMode="Static"></asp:Label>
<asp:RequiredFieldValidator ID="recdevReqValueAddressInsert" runat="server"
ControlToValidate="recdevgvTxtBoxAddressInsert" ValidationGroup="recdevInsertDeviceValidation"
ErrorMessage="Required field." CssClass="message-error">
</asp:RequiredFieldValidator>
<asp:CustomValidator ID="recdevCustomValAddressInsert" runat="server" ControlToValidate="recdevgvTxtBoxAddressInsert" CssClass="message-error"
ErrorMessage="*" ClientValidationFunction="ValidateAddressInsert" EnableClientScript="true"
ValidationGroup="recdevInsertDeviceValidation">
</asp:CustomValidator>
</FooterTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Active">
<ItemTemplate>
<asp:Label ID="recdevgvLblActive" runat="server" Text='<%# (Boolean.Parse(Eval("Active").ToString())) ? "Yes" : "No" %>'></asp:Label>
</ItemTemplate>
<EditItemTemplate>
<asp:DropDownList ID="recdevgvDDListActive" runat="server" Text='<%# (Boolean.Parse(Eval("Active").ToString())) ? "Yes" : "No" %>'>
<asp:ListItem>Yes</asp:ListItem>
<asp:ListItem>No</asp:ListItem>
</asp:DropDownList>
</EditItemTemplate>
<FooterTemplate>
<asp:DropDownList ID="recdevgvDDListActiveInsert" runat="server">
<asp:ListItem Selected="True">Yes</asp:ListItem>
<asp:ListItem>No</asp:ListItem>
</asp:DropDownList>
</FooterTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Cortext Enabled">
<ItemTemplate>
<asp:Label ID="recdevgvLblCortextEnabled" runat="server" Text='<%# (Boolean.Parse(Eval("CortextEnabled").ToString())) ? "Yes" : "No" %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Action" ShowHeader="False" ItemStyle-Wrap="false" ItemStyle-HorizontalAlign="Center">
<ItemTemplate>
<asp:Button ID="recdevgvEditButton" runat="server" CausesValidation="True" CommandName="Edit"
Text="Edit" CssClass="gridActionbutton" ValidationGroup="EditDeviceValidation"></asp:Button>
<asp:Button ID="recdevgvDeleteButton" runat="server" CausesValidation="False" CommandName="Delete"
Text="Delete" CssClass="gridActionbutton" OnClientClick="return confirm('Are you sure you want to delete this Device Information?')" >
</asp:Button>
</ItemTemplate>
<EditItemTemplate>
<asp:Button ID="recdevgvUpdateButton" runat="server" CausesValidation="True" ValidationGroup="recdevEditDeviceValidation" CommandName="Update"
Text="Update" CssClass="gridActionbutton"></asp:Button>
<asp:Button ID="recdevgvCancelButton" runat="server" CausesValidation="False" CommandName="Cancel"
Text="Cancel" CssClass="gridActionbutton"></asp:Button>
</EditItemTemplate>
<FooterTemplate>
<asp:Button ID="recdevgvAddButton" runat="server" CommandName="Add" Text="Add Device" CausesValidation="true"
CssClass="gridActionbutton" ValidationGroup="recdevInsertDeviceValidation"></asp:Button>
</FooterTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
<%-- <asp:HiddenField ID="recdevgvIsExpanded" runat="server" ClientIDMode="Static"/>--%>
</div>
</ContentTemplate>
</asp:UpdatePanel>
</td>
</tr>
</ItemTemplate>
<EditItemTemplate>
<asp:Button ID="rigvUpdateButton" runat="server" CausesValidation="True" ValidationGroup="EditRecipientValidation" CommandName="Update"
Text="Update" CssClass="gridActionbutton"></asp:Button>
<asp:Button ID="rigvCancelButton" runat="server" CausesValidation="False" CommandName="Cancel"
Text="Cancel" CssClass="gridActionbutton"></asp:Button>
</EditItemTemplate>
<FooterTemplate>
<asp:Button ID="rigvAddButton" runat="server" CommandName="Add" Text="Add Recipient" Width="90%" CausesValidation="true"
CssClass="gridActionbutton" ValidationGroup="InsertRecipientValidation">
</asp:Button>
</FooterTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
这是我的 javascript:
$(document).ready(function () {
//Configure the DropDownBox using the 'chosen' jquery plugin
$(".chosen-single").chosen({
search_contains: true,
width: "200px",
no_results_text: "Sorry, no match!"
});
//Set the Service Name values when in Edit Mode
$("#recdevgvDDListServiceName").each(function () {
alert('document ready fn: in servicename each fn');
var DeviceSelValue = $("#recdevgvDDListDeviceName").val();
$("#recdevgvDDListServiceName").children("option").hide();
$("#recdevgvDDListServiceName").trigger("chosen:updated");
switch (DeviceSelValue) {
case "1":
$("#recdevgvDDListServiceName option[value*='cell']").show();
$("#recdevgvDDListServiceName").trigger("chosen:updated");
break;
case "2":
$("#recdevgvDDListServiceName option[value*='email']").show();
$("#recdevgvDDListServiceName").trigger("chosen:updated");
break;
case "3":
$("#recdevgvDDListServiceName option[value*='page']").show();
$("#recdevgvDDListServiceName").trigger("chosen:updated");
break;
default:
break;
}
});
//This change function is when the Device grid is in Edit Mode
$("#recdevgvDDListDeviceName").change(function () {
alert('Edit Mode: Device name DDL change fn');
$("#recdevgvDDListServiceName").val('');
$("#recdevgvDDListServiceName").chosen({
search_contains: true,
no_results_text: "Sorry, no match!"
});
$("#recdevgvTxtBoxAddress").val('');
var DeviceSelValue = $(this).val();
$("#recdevgvDDListServiceName").children("option").hide();
$("#recdevgvDDListServiceName").trigger("chosen:updated");
switch (DeviceSelValue) {
case "1":
$("#recdevgvDDListServiceName option[value*='cell']").show();
$("#recdevgvDDListServiceName").trigger("chosen:updated");
$("#recdevgvEditAddressExt").hide();
// $("#recdevgvTxtBoxAddress").width("50%");
break;
case "2":
$("#recdevgvDDListServiceName option[value*='email']").show();
$("#recdevgvDDListServiceName").trigger("chosen:updated");
$("#recdevgvEditAddressExt").hide();
// $("#recdevgvTxtBoxAddress").width("90%");
break;
case "3":
$("#recdevgvDDListServiceName option[value*='page']").show();
$("#recdevgvDDListServiceName").trigger("chosen:updated");
$("#recdevgvEditAddressExt").hide();
// $("#recdevgvTxtBoxAddress").width("50%");
break;
default:
break;
}
});
});
最后,这是创建下拉菜单的 RowEditing 事件背后的代码。
protected void RecipientDeviceGridView_RowEditing(object sender, GridViewEditEventArgs e)
{
try
{
GridView tgvRecipientDevice = (GridView)sender;
tgvRecipientDevice.EditIndex = e.NewEditIndex;
int tiRecipientID = Convert.ToInt32((tgvRecipientDevice.Parent.FindControl("rigvLblRecipientID") as Label).Text);
populateDeviceGrid(tgvRecipientDevice, tiRecipientID);
string tstrXmlTableData = string.Empty;
// Get the current Device Name
string tstrCurrentDevice = (tgvRecipientDevice.Rows[e.NewEditIndex].FindControl("recdevgvEditDeviceName") as Label).Text;
DropDownList tddLstDeviceName = (tgvRecipientDevice.Rows[e.NewEditIndex].FindControl("recdevgvDDListDeviceName") as DropDownList);
tstrXmlTableData = m_pagingClient.GetDeviceTypes();
DataTable tdtDeviceTypes = CommonMethods.ParseXML(tstrXmlTableData);
tddLstDeviceName.DataSource = tdtDeviceTypes;
tddLstDeviceName.DataTextField = tdtDeviceTypes.Columns["DeviceName"].ToString();
tddLstDeviceName.DataValueField = tdtDeviceTypes.Columns["DeviceTypeID"].ToString();
tddLstDeviceName.DataBind();
tddLstDeviceName.Items.Insert(0, new ListItem("", "0"));
tddLstDeviceName.Items.FindByText(tstrCurrentDevice).Selected = true;
//Get the current Service Provider
string tstrCurrentService = (tgvRecipientDevice.Rows[e.NewEditIndex].FindControl("recdevgvEditServiceName") as Label).Text;
DropDownList tddLstServiceName = (tgvRecipientDevice.Rows[e.NewEditIndex].FindControl("recdevgvDDListServiceName") as DropDownList);
tstrXmlTableData = m_pagingClient.GetServiceTypes();
DataTable tdtServiceTypes = CommonMethods.ParseXML(tstrXmlTableData);
tddLstServiceName.DataSource = tdtServiceTypes;
tddLstServiceName.DataTextField = tdtServiceTypes.Columns["ServiceName"].ToString();
tddLstServiceName.DataValueField = tdtServiceTypes.Columns["CombineID_Group"].ToString();
tddLstServiceName.DataBind();
tddLstServiceName.Items.Insert(0, new ListItem("", "0"));
tddLstServiceName.Items.FindByText(tstrCurrentService).Selected = true;
Label tlblEditAddressExt = (tgvRecipientDevice.Rows[e.NewEditIndex].FindControl("recdevgvEditAddressExt") as Label);
TextBox ttxtBoxAddress = (tgvRecipientDevice.Rows[e.NewEditIndex].FindControl("recdevgvTxtBoxAddress") as TextBox);
if ((tstrCurrentService.Equals("SMTP")) || (tstrCurrentService.Equals("Other")))
{
tlblEditAddressExt.Visible = false;
tlblEditAddressExt.Text = string.Empty;
}
else
{
tlblEditAddressExt.Visible = true;
//Parse the string in the text field to only have the cell phone or pager number
string tstrAddress = ttxtBoxAddress.Text;
ttxtBoxAddress.Text = tstrAddress.Substring(0, tstrAddress.IndexOf("@"));
}
ExpandChildGrid(tgvRecipientDevice, tiRecipientID);
}
catch (Exception ex)
{
//TO DO:Response.Redirect("~/Error.aspx");
}
}
因此,重申一下...当网格处于编辑模式时不会创建所选样式,并且 jquery 'change' 事件不会由 DeviceName 下拉菜单触发。
谁能看出我错在哪里?
谢谢。
更新
我发现了部分问题...DeviceName 的下拉列表没有属性 Autopostback=true
。这使文档就绪函数可以触发并更新 ServiceName 下拉列表。
但是,现在当 DeviceName 下拉列表更改时,它会关闭嵌套的 gridview。更改后,网格需要保持打开状态。
选择的插件没有被触发的原因是UpdatePanel替换了面板的内容。所有事件都需要重新订阅。这是使用以下 javascript 代码完成的:
Sys.WebForms.PageRequestManager.getInstance().add_endRequest(onEndRequest);
function onEndRequest(sender, args) {
if (sender._postBackSettings.panelsToUpdate != null) {
$("select:not(.chosen-select, .no-chosen)").chosen({
search_contains: true,
width: "200px",
no_results_text: "Sorry, no match!"
});
}
};
我有一个嵌套的网格视图。当此嵌套网格中的数据行处于编辑模式时,我希望将其中的 2 列更改为选定的下拉列表。 当用户在第一个下拉列表中输入 selection 时,第二个下拉列表中的列表会发生变化。这是在客户端使用 jquery 完成的。此设计在应用程序的另一个网格中运行良好,这不是嵌套网格。
问题是首先创建了下拉菜单,但没有显示为所选样式的下拉菜单。然后当用户更改第一个下拉列表中的值时,不会触发更改事件并且不会更新第二个下拉列表。但是,如果您 select 在第二个下拉列表中输入一个值,则两个控件都会更改为所选样式。
这是我的标记:
<div id="RecipientWrapper">
<asp:ScriptManager ID="recipientScriptMgr" runat="server">
</asp:ScriptManager>
<asp:GridView ID="RecipientInfoGridView" runat="server" AllowPaging="True" PageSize="10"
AutoGenerateColumns="False" Caption="Recipient Information" CaptionAlign="Top"
CssClass="grid" HorizontalAlign="Left" ShowFooter="True"
ShowHeaderWhenEmpty="True" DataKeyNames="RecipientID"
onpageindexchanging="RecipientInfoGridView_PageIndexChanging"
onrowcancelingedit="RecipientInfoGridView_RowCancelingEdit"
onrowcommand="RecipientInfoGridView_RowCommand"
onrowdeleting="RecipientInfoGridView_RowDeleting"
onrowediting="RecipientInfoGridView_RowEditing"
onrowupdating="RecipientInfoGridView_RowUpdating"
OnRowDataBound="RecipientInfoGridView_RowDataBound">
<Columns>
<asp:TemplateField>
<ItemTemplate>
<a href="javascript:DivExpandCollapse('div<%# Eval("RecipientID")%>');">
<img id="imgdiv<%# Eval("RecipientID")%>" alt="" width="25px" border="0" src="Images/plus.png" />
</a>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="RecipientID">
<ItemTemplate>
<asp:Label ID="rigvLblRecipientID" runat="server" Text='<%# Bind("RecipientID") %>' ClientIDMode="Static"></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="UserID">
<ItemTemplate>
<asp:Label ID="rigvLblUserID" runat="server" Text='<%# Bind("UserID") %>' ClientIDMode="Static"></asp:Label>
</ItemTemplate>
<EditItemTemplate>
<asp:TextBox ID="rigvTxtBxUserID" runat="server" Text='<%# Bind("UserID") %>' ClientIDMode="Static"></asp:TextBox>
<asp:RequiredFieldValidator ID="rigvRequiredFieldEditUserID" ControlToValidate="rigvTxtBxUserID" runat="server"
ErrorMessage="Required field." ValidationGroup="EditRecipientValidation" Display="Dynamic" CssClass="message-error">
</asp:RequiredFieldValidator>
<asp:RegularExpressionValidator ID="rigvMaxValEditUserID" ControlToValidate="rigvTxtBxUserID" runat="server"
ErrorMessage="Maximum length is 40." ValidationGroup="EditRecipientValidation" Display="Dynamic"
CssClass="message-error" ValidationExpression="^.{1,40}$">
</asp:RegularExpressionValidator>
</EditItemTemplate>
<FooterTemplate>
<asp:TextBox ID="rigvTxtBxInsertUserID" runat="server" Text='<%# Bind("UserID") %>' ClientIDMode="Predictable"></asp:TextBox>
<asp:RequiredFieldValidator ID="rigvRequiredFieldInsertUserID" ControlToValidate="rigvTxtBxInsertUserID" runat="server"
ErrorMessage="Required field." ValidationGroup="InsertRecipientValidation" Display="Dynamic" CssClass="message-error">
</asp:RequiredFieldValidator>
<asp:RegularExpressionValidator ID="rigvMaxValInsertUserID" ControlToValidate="rigvTxtBxInsertUserID" runat="server"
ErrorMessage="Maximumn length is 40." ValidationGroup="InsertRecipientValidation" Display="Dynamic" CssClass="message-error"
ValidationExpression="^.{1,40}$" >
</asp:RegularExpressionValidator>
</FooterTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Name">
<ItemTemplate>
<asp:Label ID="rigvLblName" runat="server" Text='<%# Bind("RecipientName") %>' ClientIDMode="Static"></asp:Label>
</ItemTemplate>
<EditItemTemplate>
<asp:TextBox ID="rigvTxtBxName" runat="server" Text='<%# Bind("RecipientName") %>' ClientIDMode="Static"></asp:TextBox>
<asp:RequiredFieldValidator ID="rigvRequiredFieldEditName" ControlToValidate="rigvTxtBxName" runat="server"
ErrorMessage="Required field." ValidationGroup="EditRecipientValidation" Display="Dynamic"
CssClass="message-error">
</asp:RequiredFieldValidator>
<asp:RegularExpressionValidator ID="rigvMaxValEditName" ControlToValidate="rigvTxtBxName" runat="server"
ErrorMessage="Maximum length is 80." ValidationGroup="EditRecipientValidation" Display="Dynamic"
CssClass="message-error" ValidationExpression="^.{1,80}$">
</asp:RegularExpressionValidator>
</EditItemTemplate>
<FooterTemplate>
<asp:TextBox ID="rigvTxtBxInsertName" runat="server" Text='<%# Bind("RecipientName") %>' ClientIDMode="Predictable"></asp:TextBox>
<asp:RequiredFieldValidator ID="rigvRequiredFieldInsertName" ControlToValidate="rigvTxtBxInsertName" runat="server"
ErrorMessage="Required field." ValidationGroup="InsertRecipientValidation" Display="Dynamic" CssClass="message-error">
</asp:RequiredFieldValidator>
<asp:RegularExpressionValidator ID="rigvMaxValInsertName" ControlToValidate="rigvTxtBxInsertName" runat="server"
ErrorMessage="Maximumn length is 80." ValidationGroup="InsertRecipientValidation" Display="Dynamic" CssClass="message-error"
ValidationExpression="^.{1,80}$">
</asp:RegularExpressionValidator>
</FooterTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Action" ShowHeader="False" ItemStyle-Wrap="false" ItemStyle-HorizontalAlign="Center">
<ItemTemplate>
<asp:Button ID="rigvEditButton" runat="server" CausesValidation="False" CommandName="Edit"
Text="Edit" CssClass="gridActionbutton"></asp:Button>
<asp:Button ID="rigvDeleteButton" runat="server" CausesValidation="False" CommandName="Delete"
Text="Delete" CssClass="gridActionbutton" OnClientClick="return confirm('Are you sure you want to delete this Recipient Information?')" >
</asp:Button>
<tr>
<td colspan="100%">
<asp:UpdatePanel ID="updatePnlDeviceNestedGrid" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<div id="div<%# Eval("RecipientID") %>" style="display:none">
<asp:GridView ID="RecipientDeviceGridView" runat="server" AutoGenerateColumns="false" CssClass="grid" ShowFooter="true" Caption="Device Information"
CaptionAlign="Top" AllowPaging="true" PageSize="3" HorizontalAlign="Left"
onpageindexchanging="RecipientDeviceGridView_PageIndexChanging"
OnPageIndexChanged="RecipientDeviceGridView_PageIndexChanged"
onrowcommand="RecipientDeviceGridView_RowCommand"
onrowediting="RecipientDeviceGridView_RowEditing"
onrowupdating="RecipientDeviceGridView_RowUpdating"
OnRowCancelingEdit="RecipientDeviceGridView_RowCancelingEdit"
OnRowDeleting="RecipientDeviceGridView_RowDeleting"
OnRowDataBound="RecipientDeviceGridView_RowDataBound">
<Columns>
<asp:TemplateField HeaderText="DeviceID">
<ItemTemplate>
<asp:Label ID="recdevgvLblDeviceID" runat="server" Text='<%# Bind("DeviceID") %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Device" ItemStyle-Wrap="false">
<ItemTemplate>
<asp:Label ID="recdevgvDeviceID" runat="server" Visible="false" Text='<%# Bind("DeviceID") %>'></asp:Label>
<asp:Label ID="recdevgvLblDeviceName" runat="server" Text='<%# Bind("DeviceName") %>'></asp:Label>
</ItemTemplate>
<EditItemTemplate>
<asp:Label ID="recdevgvEditDeviceID" runat="server" Visible="false" Text='<%# Bind("DeviceID") %>'></asp:Label>
<asp:Label ID="recdevgvEditDeviceName" runat="server" Visible="false" Text='<%# Bind("DeviceName") %>'></asp:Label>
<asp:DropDownList ID="recdevgvDDListDeviceName" runat="server" ClientIDMode="Static"
data-placeholder="Choose device…" class="chosen-single">
</asp:DropDownList>
<asp:RequiredFieldValidator ID="recdevReqValueDDLDeviceNameEdit" runat="server"
ControlToValidate="recdevgvDDListDeviceName" ValidationGroup="recdevEditDeviceValidation"
ErrorMessage="Selection required." CssClass="message-error-dropdown">
</asp:RequiredFieldValidator>
</EditItemTemplate>
<FooterTemplate>
<asp:DropDownList ID="recdevgvDDListDeviceNameInsert" runat="server" ClientIDMode="Static"
data-placeholder="Choose device..." class="chosen-single">
</asp:DropDownList>
<asp:RequiredFieldValidator ID="recdevReqValueDDLDeviceNameInsert" runat="server" InitialValue="0"
ControlToValidate="recdevgvDDListDeviceNameInsert" ValidationGroup="recdevInsertDeviceValidation"
ErrorMessage="Selection required." CssClass="message-error-dropdown">
</asp:RequiredFieldValidator>
</FooterTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Service Provider">
<ItemTemplate>
<asp:Label ID="recdevgvLblServiceName" runat="server" Text='<%# Bind("ServiceName") %>'></asp:Label>
</ItemTemplate>
<EditItemTemplate>
<asp:Label ID="recdevgvEditServiceName" runat="server" Visible="false" Text='<%# Bind("ServiceName") %>'></asp:Label>
<asp:DropDownList ID="recdevgvDDListServiceName" runat="server" ClientIDMode="Static"
OnSelectedIndexChanged="RecipientDeviceGridView_SelectedIndexChanged_EditServiceName" AutoPostBack="true" EnableViewState="true"
data-placeholder="Choose service…" class="chosen-single">
</asp:DropDownList>
<asp:RequiredFieldValidator ID="recdevReqValueDDLServiceNameEdit" runat="server"
ControlToValidate="recdevgvDDListServiceName" ValidationGroup="recdevEditDeviceValidation"
ErrorMessage="Selection required." CssClass="message-error-dropdown">
</asp:RequiredFieldValidator>
</EditItemTemplate>
<FooterTemplate>
<asp:DropDownList ID="recdevgvDDListServiceNameInsert" runat="server" ClientIDMode="Static" Enabled="false"
OnSelectedIndexChanged="RecipientDeviceGridView_SelectedIndexChanged_EditServiceName" AutoPostBack="true" EnableViewState="true"
data-placeholder="Choose service…" class="chosen-single">
</asp:DropDownList>
<asp:RequiredFieldValidator ID="recdevReqValueDDLServiceNameInsert" runat="server" InitialValue="0"
ControlToValidate="recdevgvDDListServiceNameInsert" ValidationGroup="recdevInsertDeviceValidation"
ErrorMessage="Selection required." CssClass="message-error-dropdown">
</asp:RequiredFieldValidator>
</FooterTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Address">
<ItemTemplate>
<asp:Label ID="recdevgvLblAddress" runat="server" Text='<%# Bind("Address") %>'></asp:Label>
</ItemTemplate>
<EditItemTemplate>
<asp:TextBox ID="recdevgvTxtBoxAddress" runat="server" Text='<%# Bind("Address") %>' ClientIDMode="Static"></asp:TextBox>
<asp:Label ID="recdevgvEditAddressExt" runat="server" Visible="false" Text='<%# Bind("ServiceExtension") %>'
ClientIDMode="Static">
</asp:Label>
<asp:RequiredFieldValidator ID="recdevReqValueAddressEdit" runat="server"
ControlToValidate="recdevgvTxtBoxAddress" ValidationGroup="recdevEditDeviceValidation"
ErrorMessage="Required field." CssClass="message-error">
</asp:RequiredFieldValidator>
<asp:CustomValidator ID="recdevCustomValAddressEdit" runat="server" ControlToValidate="recdevgvTxtBoxAddress" CssClass="message-error"
ErrorMessage="*" ClientValidationFunction="ValidateAddressEdit" EnableClientScript="true"
ValidationGroup="recdevEditDeviceValidation">
</asp:CustomValidator>
</EditItemTemplate>
<FooterTemplate>
<asp:TextBox ID="recdevgvTxtBoxAddressInsert" runat="server" ClientIDMode="Static"></asp:TextBox>
<asp:Label ID="recdevgvAddressExtInsert" runat="server" Visible="false" ClientIDMode="Static"></asp:Label>
<asp:RequiredFieldValidator ID="recdevReqValueAddressInsert" runat="server"
ControlToValidate="recdevgvTxtBoxAddressInsert" ValidationGroup="recdevInsertDeviceValidation"
ErrorMessage="Required field." CssClass="message-error">
</asp:RequiredFieldValidator>
<asp:CustomValidator ID="recdevCustomValAddressInsert" runat="server" ControlToValidate="recdevgvTxtBoxAddressInsert" CssClass="message-error"
ErrorMessage="*" ClientValidationFunction="ValidateAddressInsert" EnableClientScript="true"
ValidationGroup="recdevInsertDeviceValidation">
</asp:CustomValidator>
</FooterTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Active">
<ItemTemplate>
<asp:Label ID="recdevgvLblActive" runat="server" Text='<%# (Boolean.Parse(Eval("Active").ToString())) ? "Yes" : "No" %>'></asp:Label>
</ItemTemplate>
<EditItemTemplate>
<asp:DropDownList ID="recdevgvDDListActive" runat="server" Text='<%# (Boolean.Parse(Eval("Active").ToString())) ? "Yes" : "No" %>'>
<asp:ListItem>Yes</asp:ListItem>
<asp:ListItem>No</asp:ListItem>
</asp:DropDownList>
</EditItemTemplate>
<FooterTemplate>
<asp:DropDownList ID="recdevgvDDListActiveInsert" runat="server">
<asp:ListItem Selected="True">Yes</asp:ListItem>
<asp:ListItem>No</asp:ListItem>
</asp:DropDownList>
</FooterTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Cortext Enabled">
<ItemTemplate>
<asp:Label ID="recdevgvLblCortextEnabled" runat="server" Text='<%# (Boolean.Parse(Eval("CortextEnabled").ToString())) ? "Yes" : "No" %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Action" ShowHeader="False" ItemStyle-Wrap="false" ItemStyle-HorizontalAlign="Center">
<ItemTemplate>
<asp:Button ID="recdevgvEditButton" runat="server" CausesValidation="True" CommandName="Edit"
Text="Edit" CssClass="gridActionbutton" ValidationGroup="EditDeviceValidation"></asp:Button>
<asp:Button ID="recdevgvDeleteButton" runat="server" CausesValidation="False" CommandName="Delete"
Text="Delete" CssClass="gridActionbutton" OnClientClick="return confirm('Are you sure you want to delete this Device Information?')" >
</asp:Button>
</ItemTemplate>
<EditItemTemplate>
<asp:Button ID="recdevgvUpdateButton" runat="server" CausesValidation="True" ValidationGroup="recdevEditDeviceValidation" CommandName="Update"
Text="Update" CssClass="gridActionbutton"></asp:Button>
<asp:Button ID="recdevgvCancelButton" runat="server" CausesValidation="False" CommandName="Cancel"
Text="Cancel" CssClass="gridActionbutton"></asp:Button>
</EditItemTemplate>
<FooterTemplate>
<asp:Button ID="recdevgvAddButton" runat="server" CommandName="Add" Text="Add Device" CausesValidation="true"
CssClass="gridActionbutton" ValidationGroup="recdevInsertDeviceValidation"></asp:Button>
</FooterTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
<%-- <asp:HiddenField ID="recdevgvIsExpanded" runat="server" ClientIDMode="Static"/>--%>
</div>
</ContentTemplate>
</asp:UpdatePanel>
</td>
</tr>
</ItemTemplate>
<EditItemTemplate>
<asp:Button ID="rigvUpdateButton" runat="server" CausesValidation="True" ValidationGroup="EditRecipientValidation" CommandName="Update"
Text="Update" CssClass="gridActionbutton"></asp:Button>
<asp:Button ID="rigvCancelButton" runat="server" CausesValidation="False" CommandName="Cancel"
Text="Cancel" CssClass="gridActionbutton"></asp:Button>
</EditItemTemplate>
<FooterTemplate>
<asp:Button ID="rigvAddButton" runat="server" CommandName="Add" Text="Add Recipient" Width="90%" CausesValidation="true"
CssClass="gridActionbutton" ValidationGroup="InsertRecipientValidation">
</asp:Button>
</FooterTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
这是我的 javascript:
$(document).ready(function () {
//Configure the DropDownBox using the 'chosen' jquery plugin
$(".chosen-single").chosen({
search_contains: true,
width: "200px",
no_results_text: "Sorry, no match!"
});
//Set the Service Name values when in Edit Mode
$("#recdevgvDDListServiceName").each(function () {
alert('document ready fn: in servicename each fn');
var DeviceSelValue = $("#recdevgvDDListDeviceName").val();
$("#recdevgvDDListServiceName").children("option").hide();
$("#recdevgvDDListServiceName").trigger("chosen:updated");
switch (DeviceSelValue) {
case "1":
$("#recdevgvDDListServiceName option[value*='cell']").show();
$("#recdevgvDDListServiceName").trigger("chosen:updated");
break;
case "2":
$("#recdevgvDDListServiceName option[value*='email']").show();
$("#recdevgvDDListServiceName").trigger("chosen:updated");
break;
case "3":
$("#recdevgvDDListServiceName option[value*='page']").show();
$("#recdevgvDDListServiceName").trigger("chosen:updated");
break;
default:
break;
}
});
//This change function is when the Device grid is in Edit Mode
$("#recdevgvDDListDeviceName").change(function () {
alert('Edit Mode: Device name DDL change fn');
$("#recdevgvDDListServiceName").val('');
$("#recdevgvDDListServiceName").chosen({
search_contains: true,
no_results_text: "Sorry, no match!"
});
$("#recdevgvTxtBoxAddress").val('');
var DeviceSelValue = $(this).val();
$("#recdevgvDDListServiceName").children("option").hide();
$("#recdevgvDDListServiceName").trigger("chosen:updated");
switch (DeviceSelValue) {
case "1":
$("#recdevgvDDListServiceName option[value*='cell']").show();
$("#recdevgvDDListServiceName").trigger("chosen:updated");
$("#recdevgvEditAddressExt").hide();
// $("#recdevgvTxtBoxAddress").width("50%");
break;
case "2":
$("#recdevgvDDListServiceName option[value*='email']").show();
$("#recdevgvDDListServiceName").trigger("chosen:updated");
$("#recdevgvEditAddressExt").hide();
// $("#recdevgvTxtBoxAddress").width("90%");
break;
case "3":
$("#recdevgvDDListServiceName option[value*='page']").show();
$("#recdevgvDDListServiceName").trigger("chosen:updated");
$("#recdevgvEditAddressExt").hide();
// $("#recdevgvTxtBoxAddress").width("50%");
break;
default:
break;
}
});
});
最后,这是创建下拉菜单的 RowEditing 事件背后的代码。
protected void RecipientDeviceGridView_RowEditing(object sender, GridViewEditEventArgs e)
{
try
{
GridView tgvRecipientDevice = (GridView)sender;
tgvRecipientDevice.EditIndex = e.NewEditIndex;
int tiRecipientID = Convert.ToInt32((tgvRecipientDevice.Parent.FindControl("rigvLblRecipientID") as Label).Text);
populateDeviceGrid(tgvRecipientDevice, tiRecipientID);
string tstrXmlTableData = string.Empty;
// Get the current Device Name
string tstrCurrentDevice = (tgvRecipientDevice.Rows[e.NewEditIndex].FindControl("recdevgvEditDeviceName") as Label).Text;
DropDownList tddLstDeviceName = (tgvRecipientDevice.Rows[e.NewEditIndex].FindControl("recdevgvDDListDeviceName") as DropDownList);
tstrXmlTableData = m_pagingClient.GetDeviceTypes();
DataTable tdtDeviceTypes = CommonMethods.ParseXML(tstrXmlTableData);
tddLstDeviceName.DataSource = tdtDeviceTypes;
tddLstDeviceName.DataTextField = tdtDeviceTypes.Columns["DeviceName"].ToString();
tddLstDeviceName.DataValueField = tdtDeviceTypes.Columns["DeviceTypeID"].ToString();
tddLstDeviceName.DataBind();
tddLstDeviceName.Items.Insert(0, new ListItem("", "0"));
tddLstDeviceName.Items.FindByText(tstrCurrentDevice).Selected = true;
//Get the current Service Provider
string tstrCurrentService = (tgvRecipientDevice.Rows[e.NewEditIndex].FindControl("recdevgvEditServiceName") as Label).Text;
DropDownList tddLstServiceName = (tgvRecipientDevice.Rows[e.NewEditIndex].FindControl("recdevgvDDListServiceName") as DropDownList);
tstrXmlTableData = m_pagingClient.GetServiceTypes();
DataTable tdtServiceTypes = CommonMethods.ParseXML(tstrXmlTableData);
tddLstServiceName.DataSource = tdtServiceTypes;
tddLstServiceName.DataTextField = tdtServiceTypes.Columns["ServiceName"].ToString();
tddLstServiceName.DataValueField = tdtServiceTypes.Columns["CombineID_Group"].ToString();
tddLstServiceName.DataBind();
tddLstServiceName.Items.Insert(0, new ListItem("", "0"));
tddLstServiceName.Items.FindByText(tstrCurrentService).Selected = true;
Label tlblEditAddressExt = (tgvRecipientDevice.Rows[e.NewEditIndex].FindControl("recdevgvEditAddressExt") as Label);
TextBox ttxtBoxAddress = (tgvRecipientDevice.Rows[e.NewEditIndex].FindControl("recdevgvTxtBoxAddress") as TextBox);
if ((tstrCurrentService.Equals("SMTP")) || (tstrCurrentService.Equals("Other")))
{
tlblEditAddressExt.Visible = false;
tlblEditAddressExt.Text = string.Empty;
}
else
{
tlblEditAddressExt.Visible = true;
//Parse the string in the text field to only have the cell phone or pager number
string tstrAddress = ttxtBoxAddress.Text;
ttxtBoxAddress.Text = tstrAddress.Substring(0, tstrAddress.IndexOf("@"));
}
ExpandChildGrid(tgvRecipientDevice, tiRecipientID);
}
catch (Exception ex)
{
//TO DO:Response.Redirect("~/Error.aspx");
}
}
因此,重申一下...当网格处于编辑模式时不会创建所选样式,并且 jquery 'change' 事件不会由 DeviceName 下拉菜单触发。
谁能看出我错在哪里?
谢谢。
更新
我发现了部分问题...DeviceName 的下拉列表没有属性 Autopostback=true
。这使文档就绪函数可以触发并更新 ServiceName 下拉列表。
但是,现在当 DeviceName 下拉列表更改时,它会关闭嵌套的 gridview。更改后,网格需要保持打开状态。
选择的插件没有被触发的原因是UpdatePanel替换了面板的内容。所有事件都需要重新订阅。这是使用以下 javascript 代码完成的:
Sys.WebForms.PageRequestManager.getInstance().add_endRequest(onEndRequest);
function onEndRequest(sender, args) {
if (sender._postBackSettings.panelsToUpdate != null) {
$("select:not(.chosen-select, .no-chosen)").chosen({
search_contains: true,
width: "200px",
no_results_text: "Sorry, no match!"
});
}
};