我似乎无法让它发挥作用。我确信这将是一系列问题(除非有人可以向我展示一些可行的示例),但首先......
我收到一条错误消息:
The name 'txtNewSongName' does not exist in the current context
这是我的 ASP.NET 代码的相关部分: $(函数(){ NewEmptyTrackName();
});
var prm = Sys.WebForms.PageRequestManager.getInstance();
if (prm != null) {
prm.add_endRequest(function (sender, e) {
if (sender._postBackSettings.panelsToUpdate != null) {
NewEmptyTrackName();
}
});
};
function NewEmptyTrackName() {
$("#<%=txtNewSongName.ClientID %>").autocomplete({
source: function (request, response) {
$.ajax({
url: '<%=ResolveUrl("~/AutocompleteSetlist.asmx/SongCompletionList") %>',
data: "{ 'cSong': '" + request.term + "'}",
dataType: "json",
type: "POST",
contentType: "application/json; charset=utf-8",
success: function (data) {
response($.map(data.d, function (item) {
return {
label: item.split('|')[0],
val: item.split('|')[1]
}
}))
},
error: function (response) {
alert(response.responseText);
},
failure: function (response) {
alert(response.responseText);
}
});
},
select: function (e, i) {
$("#<%=hfNewSongName.ClientID %>").val(i.item.val);
},
minLength: 1
});
};
</script>
<asp:Panel runat="server" ID="ShowDiv3" Visible="false" BorderStyle="Solid" BorderWidth="0" Width="1389px">
<asp:Label ID="lblShowSetlist" runat="server" Text="Setlist:" Font-Bold="true"></asp:Label>
<br />
<%-- This line needed to be commented out when paging was removed: AllowPaging="True" AllowCustomPaging="True" PageSize="10" --%>
<div id="divGrid3" style='width:800px; overflow:auto'>
<asp:GridView ID="DataGrid_Setlist" runat="server" ShowHeaderWhenEmpty="true"
AllowSorting="True" OnSorting="DataGrid_Setlist_Sorting" AutoGenerateColumns="False" ShowFooter ="true" CellPadding="1"
CssClass="hoverTable"
HeaderStyle-BackColor="#4DA6A6" HeaderStyle-BorderColor="#4DA6A6"
HeaderStyle-Font-Size="Small" HeaderStyle-ForeColor="White"
FooterStyle-BackColor="#4DA6A6" FooterStyle-BorderColor="#4DA6A6" FooterStyle-ForeColor="White"
DataKeyNames="DateID"
OnDataBound="DataGrid_Setlist_OnDataBound"
OnRowDataBound="DataGrid_Setlist_RowDataBound"
OnRowCancelingEdit="DataGrid_Setlist_CancelCommand"
OnRowEditing="DataGrid_Setlist_EditCommand"
OnRowDeleting="DataGrid_Setlist_DeleteCommand"
OnRowUpdating="DataGrid_Setlist_UpdateCommand">
<EmptyDataTemplate>
<columns>
<asp:TemplateField HeaderText="Song Order">
<ItemTemplate>
<asp:TextBox ID="txtNewSongOrder" runat="server" Width="100px"></asp:TextBox>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Song Name">
<ItemTemplate>
<asp:TextBox ID="txtNewSongName" runat="server" Width="370px"></asp:TextBox>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Song Name">
<ItemTemplate>
<asp:HiddenField ID="hfNewSongName" runat="server"></asp:HiddenField>
</ItemTemplate>
</asp:TemplateField>
<FooterTemplate>
<asp:Button ID="btn_Add" runat="server" Text="Add" OnClick="DataGrid_Setlist_RowCreated" />
</FooterTemplate>
</columns>
</EmptyDataTemplate>
<Columns>
<asp:TemplateField HeaderText="Song Order">
<ItemTemplate>
<asp:Label ID="lblSongOrder" runat="server" Width="100px" Text='<%#Eval("SongOrder") %>'></asp:Label>
</ItemTemplate>
<EditItemTemplate>
<asp:TextBox ID="txtNewSongOrder" runat="server" Width="100px" Text='<%#Eval("SongOrder") %>'></asp:TextBox>
</EditItemTemplate>
<FooterTemplate>
<asp:TextBox ID="txtNewSongOrder" runat="server" Width="100px" ></asp:TextBox>
</FooterTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Song Name">
<ItemTemplate>
<asp:Label ID="lblSongID" runat="server" Width="370px" Text='<%#Eval("SongID") %>'></asp:Label>
</ItemTemplate>
<EditItemTemplate>
<asp:TextBox ID="txtNewSongName" runat="server" Width="370px" Text='<%#Eval("SongID") %>'></asp:TextBox>
</EditItemTemplate>
<FooterTemplate>
<asp:TextBox ID="txtNewSongName" runat="server" Width="370px" ></asp:TextBox>
</FooterTemplate>
</asp:TemplateField>
<asp:TemplateField ItemStyle-Width="90px">
<ItemTemplate>
<asp:Button ID="btn_Edit" runat="server" Text="Edit" CommandName="Edit" />
</ItemTemplate>
<EditItemTemplate>
<asp:Button ID="btn_Update" runat="server" Text="Update" CommandName="Update"/>
<asp:Button ID="btn_Cancel" runat="server" Text="Cancel" CommandName="Cancel"/>
</EditItemTemplate>
<FooterTemplate>
<asp:Button ID="btn_Add" runat="server" Text="Add" OnClick="DataGrid_Setlist_RowCreated" />
</FooterTemplate>
</asp:TemplateField>
<asp:TemplateField>
<ItemTemplate>
<asp:Button ID="btn_Delete" runat="server" OnClientClick="javascript:return confirm('Are you sure?');" Text="Delete" CommandName="Delete" />
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
<asp:Label ID="lblEmpty1" runat="server" Visible="false" Style="font-weight:bold; font-size:large;"></asp:Label>
</div>
</asp:Panel>
我想做的是按特定顺序输入歌曲。歌曲标题是使用自动完成网络服务填写的。我已经在其他几个页面上使用了 Web 服务,所以我确信这没问题,但我不擅长 Javascript,并且无法弄清楚为什么当文本框位于 GridView 内时,代码不起作用。
最佳答案
原因是<%=txtNewSongName.ClientID %>
不起作用是因为txtNewSongName
仅存在于单个 GridView 行中。因此,从 GridView 外部无法访问它,因为可能有多个。
最简单的解决方法是分配 autocomplete
到 GridView 中的每个文本框。
启动 bij 为 TextBox 提供一个唯一的类来识别它们
<asp:TextBox ID="txtNewSongName" runat="server" CssClass="AutoCompleteMe"></asp:TextBox>
然后你可以使用 jQuery each
将自动完成功能绑定(bind)到它。请参阅下面的片段。当焦点丢失时,它将更改每个 TextBox 的文本。
function NewEmptyTrackName() {
$('#<%=DataGrid_Setlist.ClientID %> .AutoCompleteMe').each(function () {
$(this).blur(function () {
$(this).val("Testing...");
});
});
};
在你的情况下,它会变成这样
function NewEmptyTrackName() {
$('#<%=DataGrid_Setlist.ClientID %> .AutoCompleteMe').each(function () {
$(this).autocomplete({
...
如果您绝对需要来自具有 GridView 的 TextBox 的 ClientID,则必须通过索引访问它。
<%= ((TextBox)GridView1.Rows[i].FindControl("txtNewSongName")).ClientID %>
关于javascript - GridView 内的自动完成,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48290658/