回发后jQuery的自动完成扩展器不工作 [英] Jquery Auto complete extender not working after postback
本文介绍了回发后jQuery的自动完成扩展器不工作的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
即时通讯使用jQuery自动完成使用Web服务中使用ASP.Net.I've自动完成过滤员工code.当页面加载自动完成工作正常，但是当我点击搜索按钮自动完成后无法正常工作
我认为问题出在的document.ready功能，所以当页面加载它工作正常，但我已经ButtonClick事件之后也使用自动完成。
我怎样才能做到这一点？
我的继承人的jQuery自动完成
＆LT;链接的href =../自动完成/ jQuery的-ui.css的rel =stylesheet属性类型=文/ CSS/＆GT;
＆LT; SCRIPT SRC =../自动完成/ jquery.min.js类型=文/ JavaScript的＆GT;＆LT; / SCRIPT＆GT;
＆LT; SCRIPT SRC =../自动完成/ jQuery的-ui.min.js类型=文/ JavaScript的＆GT;＆LT; / SCRIPT＆GT;
＆LT;脚本类型=文/ JavaScript的＆GT;
$（文件）。就绪（函数（）{
$（＃＆LT;％= txtEmp code.ClientID％GT;）。自动完成（{
来源：函数（请求，响应）{
$阿贾克斯（{
网址：'＆LT;％= RESOLVEURL（〜/ MyWebService.asmx / FetchEmp code）％GT;，
数据：{'的Emp code'：'+ request.term +'}，
数据类型：JSON
键入：POST，
的contentType：应用/ JSON的;字符集= UTF-8，
成功：功能（数据）{
响应（$。图（data.d，函数（项目）{
返回{
标签：item.split（' - '）[1]，
// VAL：项目
}
}））
}，
错误：功能（响应）{
警报（response.responseText）;
}，
故障：功能（响应）{
警报（response.responseText）;
}
}）;
}，
的minLength：1
}）;
}）;
＆LT; / SCRIPT＆GT;
标记
＆LT; TD ALIGN =右＆GT;
＆LT; ASP：标签ID =lblEmp codeSrch=服务器文本=的Emp code的CssClass =标签＆GT; ＆LT; / ASP：标签＆gt;
＆LT; / TD＆GT;
＆所述; TD＆GT;
＆LT; ASP：文本框ID =txtEmp codeSrch=服务器WIDTH =250px的工具提示=输入员工code＆GT;＆LT; / ASP：文本框＆GT;
＆安培; NBSP;＆安培; NBSP;＆LT; ASP：按钮的ID =bttnSearch=服务器的CssClass =提交HEIGHT =23像素文本=搜索的onclick =bttnSearch_Click/＆GT;
＆LT; / TD＆GT;
ButtonSearch codebehind
保护无效bttnSearch_Click（对象发件人，EventArgs的发送）
{
clsEmp.EMPLOYEEID = txtEmp codeSrch.Text.Trim（）==？ 0：Convert.ToInt32（hFieldEmpId.Value）;
数据表DTEMP = clsEmp.GetDetails（）;
如果（dtEmp.Rows.Count大于0）
{
hFieldEmpId.Value =;
// txtEmp codeSrch.Text =;
如果（的ViewState [排序]！= NULL）
{
数据视图DVIEW =新的数据视图（DTEMP）;
dView.Sort =的ViewState [排序]的ToString（）。
gdView.DataSource = DVIEW;
gdView.DataBind（）;
}
其他
{
gdView.DataSource = DTEMP;
gdView.DataBind（）;
}
}
}
解决方案
当你有一个UpdatePanel，数据的更新后，您还需要重新初始化JavaScript的，因为旧的不再工作，因为你的HTML页面的结构有改变，DOM有变化。
在UpdatePanel是给一些功能做在客户端，你的code会像：
＆LT;脚本类型=文/ JavaScript的＆GT;
//如果你使用jQuery，您可以在读取DOM加载它们。
$（文件）。就绪（函数（）{
变种PRM = Sys.WebForms.PageRequestManager.getInstance（）;
prm.add_initializeRequest（InitializeRequest）;
prm.add_endRequest（EndRequest）; //此处将自动完成的第一个初始化
InitAutoCompl（）;
}）; 功能InitializeRequest（发件人，参数）{
} 功能EndRequest（发件人，参数）{
//更新后出现的UpdatePanel上重新初始化自动完成
InitAutoCompl（）;
} 功能InitAutoCompl（）{
$（＃＆LT;％= txtEmp code.ClientID％GT;）。自动完成（{
来源：函数（请求，响应）{
$阿贾克斯（{
网址：'＆LT;％= RESOLVEURL（〜/ MyWebService.asmx / FetchEmp code）％GT;，
数据：{'的Emp code'：'+ request.term +'}，
数据类型：JSON
键入：POST，
的contentType：应用/ JSON的;字符集= UTF-8，
成功：功能（数据）{
响应（$。图（data.d，函数（项目）{
返回{
标签：item.split（' - '）[1]，
// VAL：项目
}
}））
}，
错误：功能（响应）{
警报（response.responseText）;
}，
故障：功能（响应）{
警报（response.responseText）;
}
}）;
}，
的minLength：1
}）;
}
＆LT; / SCRIPT＆GT;
Im using jQuery Autocomplete using Web Service in ASP.Net.I've used the autocomplete to filter employeecode.When the page loads autocomplete works fine,but after when i click the search button autocomplete is not working properly.
I think the problem lies in document.ready function,so when the page loads it works fine,But i've to use autocomplete after the buttonclick event also. How can i do this ???
Heres my jQuery Autocomplete
<link href="../AutoComplete/jquery-ui.css" rel="stylesheet" type="text/css" />
<script src="../AutoComplete/jquery.min.js" type="text/javascript"></script>
<script src="../AutoComplete/jquery-ui.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#<%=txtEmpcode.ClientID %>").autocomplete({
source: function (request, response) {
$.ajax({
url: '<%=ResolveUrl("~/MyWebService.asmx/FetchEmpCode") %>',
data: "{ 'Empcode': '" + 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('-')[1],
//val: item
}
}))
},
error: function (response) {
alert(response.responseText);
},
failure: function (response) {
alert(response.responseText);
}
});
},
minLength: 1
});
});
</script>
Markup
<td align="right">
<asp:Label ID="lblEmpCodeSrch" runat="server" Text="EmpCode" CssClass="label"> </asp:Label>
</td>
<td>
<asp:TextBox ID="txtEmpCodeSrch" runat="server" Width="250px" ToolTip="Enter Employeecode"></asp:TextBox>
<asp:Button ID="bttnSearch" runat="server" CssClass="submit" Height="23px" Text="Search" onclick="bttnSearch_Click" />
</td>
ButtonSearch Codebehind
protected void bttnSearch_Click(object sender, EventArgs e)
{
clsEmp.EMPLOYEEID =txtEmpCodeSrch.Text.Trim()==""? 0:Convert.ToInt32(hFieldEmpId.Value);
DataTable dtEmp = clsEmp.GetDetails();
if (dtEmp.Rows.Count > 0)
{
hFieldEmpId.Value = "";
// txtEmpCodeSrch.Text = "";
if (ViewState["Sort"] != null)
{
DataView dView = new DataView(dtEmp);
dView.Sort = ViewState["Sort"].ToString();
gdView.DataSource = dView;
gdView.DataBind();
}
else
{
gdView.DataSource = dtEmp;
gdView.DataBind();
}
}
}
解决方案
When you have an UpdatePanel, after the update of the data, you also need to re-initialize the javascript, because the old one is not longer working, because the struct of your html page have change, the dom have change.
The UpdatePanel is giving some function to do that on client side, and your code will be as:
<script type="text/javascript">
// if you use jQuery, you can load them when dom is read.
$(document).ready(function () {
var prm = Sys.WebForms.PageRequestManager.getInstance();
prm.add_initializeRequest(InitializeRequest);
prm.add_endRequest(EndRequest);
// Place here the first init of the autocomplete
InitAutoCompl();
});
function InitializeRequest(sender, args) {
}
function EndRequest(sender, args) {
// after update occur on UpdatePanel re-init the Autocomplete
InitAutoCompl();
}
function InitAutoCompl() {
$("#<%=txtEmpcode.ClientID %>").autocomplete({
source: function (request, response) {
$.ajax({
url: '<%=ResolveUrl("~/MyWebService.asmx/FetchEmpCode") %>',
data: "{ 'Empcode': '" + 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('-')[1],
//val: item
}
}))
},
error: function (response) {
alert(response.responseText);
},
failure: function (response) {
alert(response.responseText);
}
});
},
minLength: 1
});
}
</script>
这篇关于回发后jQuery的自动完成扩展器不工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
