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
2
Answers
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.