ajax 自动完成功能不在 updatepanel 和模态弹出窗口中
我在模态中有一个 Ajax 自动完成文本框，模态位于 updatepanel 中，此代码在模态之外可以正常工作，但在位于模态中时不起作用，我认为使用 jquery 访问元素时存在问题，请帮助我 有我的 JQuery Ajax 代码：
<script type="text/javascript">
//On Page Load.
$(function () {
SetAutoComplete();
});
//On UpdatePanel Refresh.
var prm = Sys.WebForms.PageRequestManager.getInstance();
if (prm != null) {
prm.add_endRequest(function (sender, e) {
if (sender._postBackSettings.panelsToUpdate != null) {
SetAutoComplete();
}
});
};
function SetAutoComplete() {
$("ContentPlaceHolder2_txtSearch").autocomplete({
source: function (request, response) {
$.ajax({
url: 'Unites.aspx/GetAutoCompleteTechnicalAssistance',
data: "{ 'name': '" + 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]
};
}))
}
});
}
});
}
</script>
html 代码是：
<asp:UpdatePanel ID="upModal" runat="server" UpdateMode="Conditional">
<div class="modal fade" id="TechnicalModal">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<!-- Modal Header -->
<div class="modal-header btn-success">
<h4 class="modal-title">Register Technical Assistant</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div class="card">
<div class="card-header myHeaderCard">Technical Assistant properties</div>
<div class="card-body">
<div class="form-group row" runat="server">
<label for="cmbusers" class="col-md-4 col-form-label mylabel">select user</label>
<div class="col-md-8">
<asp:TextBox runat="server" ID="txtSearch" CssClass="autosuggest mycomboBox form-control"></asp:TextBox>
</div>
</div>
<div class="card-footer myfooterCard">
<div class="text-center">
<asp:Button Text="Insert" runat="server" ID="btnTechnicalInsert" CssClass="btn btn-success myBtn" Width="80px"
OnClick="btnTechnicalInsert_Click" OnClientClick="dismissModal();" />
<asp:Button Text="cancel" runat="server" Visible="false" ID="btnTechnicalCancel" CssClass="btn btn-warning"
Width="90px" OnClick="btnTechnicalCancel_Click" />
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</asp:UpdatePanel>
c# 代码是：
[WebMethod]
[System.Web.Script.Services.ScriptMethod()]
public static List<string> GetAutoCompleteTechnicalAssistance(string name)
{
List<string> result = new List<string>();
string connection = WebConfigurationManager.ConnectionStrings["strCnn"].ConnectionString;
using (SqlConnection con = new SqlConnection(connection))
{
using (SqlCommand cmd = new SqlCommand("select DISTINCT id, name from TA where name LIKE '%'+@SearchText+'%' ", con))
{
con.Open();
cmd.Parameters.AddWithValue("@SearchText", name);
SqlDataReader dr = cmd.ExecuteReader();
while (dr.Read())
{
result.Add(dr["name"].ToString());
}
return result;
}
}
}
提前谢谢
I have an Ajax autocomplete Textbox in modal and modal is located in updatepanel, This code works properly outside the modal But it does not work when located in modal ,I think there is a problem in accessing the elements with jquery, please help me
There is My JQuery Ajax Codes:
<script type="text/javascript">
//On Page Load.
$(function () {
SetAutoComplete();
});
//On UpdatePanel Refresh.
var prm = Sys.WebForms.PageRequestManager.getInstance();
if (prm != null) {
prm.add_endRequest(function (sender, e) {
if (sender._postBackSettings.panelsToUpdate != null) {
SetAutoComplete();
}
});
};
function SetAutoComplete() {
$("ContentPlaceHolder2_txtSearch").autocomplete({
source: function (request, response) {
$.ajax({
url: 'Unites.aspx/GetAutoCompleteTechnicalAssistance',
data: "{ 'name': '" + 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]
};
}))
}
});
}
});
}
</script>
html code is:
<asp:UpdatePanel ID="upModal" runat="server" UpdateMode="Conditional">
<div class="modal fade" id="TechnicalModal">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<!-- Modal Header -->
<div class="modal-header btn-success">
<h4 class="modal-title">Register Technical Assistant</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div class="card">
<div class="card-header myHeaderCard">Technical Assistant properties</div>
<div class="card-body">
<div class="form-group row" runat="server">
<label for="cmbusers" class="col-md-4 col-form-label mylabel">select user</label>
<div class="col-md-8">
<asp:TextBox runat="server" ID="txtSearch" CssClass="autosuggest mycomboBox form-control"></asp:TextBox>
</div>
</div>
<div class="card-footer myfooterCard">
<div class="text-center">
<asp:Button Text="Insert" runat="server" ID="btnTechnicalInsert" CssClass="btn btn-success myBtn" Width="80px"
OnClick="btnTechnicalInsert_Click" OnClientClick="dismissModal();" />
<asp:Button Text="cancel" runat="server" Visible="false" ID="btnTechnicalCancel" CssClass="btn btn-warning"
Width="90px" OnClick="btnTechnicalCancel_Click" />
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</asp:UpdatePanel>
and c# code is :
[WebMethod]
[System.Web.Script.Services.ScriptMethod()]
public static List<string> GetAutoCompleteTechnicalAssistance(string name)
{
List<string> result = new List<string>();
string connection = WebConfigurationManager.ConnectionStrings["strCnn"].ConnectionString;
using (SqlConnection con = new SqlConnection(connection))
{
using (SqlCommand cmd = new SqlCommand("select DISTINCT id, name from TA where name LIKE '%'+@SearchText+'%' ", con))
{
con.Open();
cmd.Parameters.AddWithValue("@SearchText", name);
SqlDataReader dr = cmd.ExecuteReader();
while (dr.Read())
{
result.Add(dr["name"].ToString());
}
return result;
}
}
}
thank you in advance
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
删除 UpdateMode="Conditional"
PanelScript 上有一个更新块触发器
Remove UpdateMode="Conditional"
The PanelScript has an update block trigger on it
我通过更改面板覆盖的区域并添加缺少的
I corrected your code by changing area covered with panel and adding missing
<ContentTemplate>to wrap panel content. Check if it works for you.