UpdatePanel停止Javascript工作
本文关键字:工作 Javascript 停止 UpdatePanel | 更新日期: 2023-09-27 18:04:46
我有一个自动完成下拉菜单,它工作得很好,但是每次一个项目被添加到列表框时都会回发。
为了纠正这个问题,我将内容包装在更新面板中。在单击添加之前,自动完成功能按预期运行。在通常的回发位置,在添加项目后,自动完成不起作用。
代码如下:
aspx:
<asp:ScriptManager ID="ScriptManager1" runat="server" />
<asp:UpdatePanel runat="server" ID="UpdatePanel" UpdateMode="Conditional">
<ContentTemplate>
<div class="row">
<div class="span4">
<h3>
Create Season</h3>
</div>
</div>
<div class="row">
<div class="span2">
<label class="control-label" for="TeamName">
Season Name:</label>
</div>
<div class="span3">
<asp:TextBox ID="SeasonNameTextBox" runat="server" Text="Premier League"></asp:TextBox>
</div>
</div>
<div class="row">
<div class="span2">
<label class="control-label" for="TeamName">
Season Year:</label>
</div>
<div class="span3">
<asp:DropDownList ID="DropDownList1" runat="server" Width="100px">
<asp:ListItem>2012/13</asp:ListItem>
<asp:ListItem Value="2013/14">2013/14</asp:ListItem>
<asp:ListItem>2014/15</asp:ListItem>
<asp:ListItem>2015/16</asp:ListItem>
</asp:DropDownList>
</div>
</div>
<div class="row">
<div class="span2">
<label class="control-label" for="TeamName">
Add Team to Season:</label></p>
</div>
<div class="span3">
<asp:TextBox ID="TeamNameTextBox" runat="server" CssClass="searchinput"></asp:TextBox>
</div>
</div>
<div class="row">
<div class="span2">
</div>
<div class="span3">
<p>
<asp:Button ID="AddTeamButton" CssClass="btn btn-primary" runat="server" Text="Add"
OnClick="AddTeamButton_Click" /></p>
</div>
</div>
<div class="row">
<div class="span2">
<label class="control-label" for="TeamName">
Seasons Teams:</label></p>
</div>
<div class="span3">
<asp:ListBox ID="TeamNameListBox" runat="server"></asp:ListBox>
<asp:Button ID="SubmitTeamsButton" CssClass="btn btn-primary" runat="server" Text="Submit"
OnClick="SubmitTeamsButton_Click" />
<asp:Literal ID="TeamCount" runat="server"></asp:Literal>
</div>
</div>
<div class="row">
<div class="span9">
<p>
<asp:Literal ID="CreateSeasonError" runat="server"></asp:Literal></p>
</div>
</div>
<script type="text/javascript">
$(document).ready(function () {
$(".searchinput").autocomplete({
source: function (request, response) {
$.ajax({
type: "POST",
contentType: "application/json; charset=utf-8",
url: "PredictiveSearch.asmx/GetAllPredictions",
data: "{'keywordStartsWith':'" + request.term + "'}",
dataType: "json",
async: true,
success: function (data) {
response(data.d);
},
error: function (result) {
alert("Due to unexpected errors we were unable to load data");
}
});
},
minLength: 1
});
});
</script>
</ContentTemplate>
</asp:UpdatePanel>
asmx:
[System.Web.Script.Services.ScriptService]
public class PredictiveSearch : System.Web.Services.WebService
{
[WebMethod]
public IList<string> GetAllPredictions(string keywordStartsWith)
{
//TODO: implement real search here!
SqlConnection conn = new SqlConnection(WebConfigurationManager.ConnectionStrings["RaiseFantasyLeagueConnectionString"].ConnectionString);
SqlCommand cmd = new SqlCommand("[dbo].[findEnglishTeams]", conn);
cmd.CommandType = CommandType.StoredProcedure;
string searchTerm = keywordStartsWith;
SqlParameter searchTermParam = new SqlParameter("@searchterm", searchTerm);
cmd.Parameters.Add(searchTermParam);
IList<string> output = new List<string>();
conn.Open();
SqlDataReader dReader = cmd.ExecuteReader(CommandBehavior.CloseConnection);
if (dReader.HasRows)
{
while (dReader.Read())
{
output.Add(dReader["englishTeamName"].ToString());
}
return output;
}
else
{
return output;
}
}
}
有没有人能解释一下为什么会发生这种情况,以及如何修复它?
试试这个:使用
Sys.WebForms.PageRequestManager.getInstance().add_pageLoaded();
UpdatePanels 而不是
$(document).ready() {.. }
示例(未测试):
Sys.WebForms.PageRequestManager.getInstance().add_pageLoaded(yourAutoCompleteInitializationFunction);
function yourAutoCompleteInitializationFunction() {
$(".searchinput").autocomplete({
source: function (request, response) {
$.ajax({
type: "POST",
contentType: "application/json; charset=utf-8",
url: "PredictiveSearch.asmx/GetAllPredictions",
data: "{'keywordStartsWith':'" + request.term + "'}",
dataType: "json",
async: true,
success: function (data) {
response(data.d);
},
error: function (result) {
alert("Due to unexpected errors we were unable to load data");
}
});
},
minLength: 1
});
}