Jon*_*Jon 14 c# jquery updatepanel asp.net-ajax
所以我做了一些相关问题的阅读,并有一些有趣的东西,但没有找到我的答案,至少没有理解答案.
我对AJAX,javascript和sclient side scripting一般都是新手.
我一直在使用C#asp.net,并且最近添加了一些更新面板以平滑用户控件和更新位,以便每次都不重新加载页面.一切都很出色,我很高兴,直到我决定尝试使用一些JQuery.
我从ui.jquery.js中选择了一个很好的日期选择器,它在普通页面上运行得很好.当我在updatepanel中进行回发时,我的问题就出现了.日期选择器停止工作.
根据我的阅读,我需要在回发后手动连接这个.
1)我真的不明白为什么.在我的母版页上我有:
<script type="text/javascript">
$(function() {
$(".mydatepickerclass").datepicker({dateFormat: 'dd-mm-yy'});
});
</script>
它使用分配的mydatepickerclass获取我的输入框.和所有的作品.为什么这会停止回发.
2)我如何解决这个问题....如何连接它以便在updatepanel中回发后它仍然有效.
我知道ID可能会在回发中发生变化,我认为但是当我使用课程时,我不知道出了什么问题.
编辑
我的usercontrol中有以下代码,其中发生了更新:
<asp:UpdatePanel ID="HistoryUpdatePanel" runat="server">
<ContentTemplate>
<%-- Start of Company History section --%>
<fieldset>
<legend>Activity History</legend>
<script type="text/javascript">
$(function() {
$(".mydatepickerclass").datepicker({dateFormat: 'dd-mm-yy'});
});
</script>
<div>
<asp:ListBox ID="listBoxHistoryTypes" runat="server" SelectionMode="Multiple" AutoPostBack="true" OnSelectedIndexChanged="listBoxHistoryTypes_IndexChanged" />
<label>Date From:</label><asp:TextBox class="mydatepickerclass" ID="txtdatefrom" runat="server" />
<label>Date To:</label><input class="mydatepickerclass" type="text" />
<asp:TextBox class="mydatepickerclass" ID="txtdateto" runat="server" />
<asp:Button ID="btnFilterSearch" runat="server" Text="Filter Results" OnClick="btnFilterSearch_Click" />
</div>
</fieldset>
</ContentTemplate>
updatepanel内的脚本不会重新连接吗？
谢谢
乔恩霍金斯
ben*_*wey 43
更新面板将重新加载html的内容.您必须侦听UpdatePanel以完成并重新创建日期选择器.
这是一个非常基本的样本.这不会考虑页面上的多个更新面板或未正确销毁日期选择器的潜在内存泄漏.
混合ASP.NET Ajax和jQuery时要注意的另一点需要注意,因为两者都在不同的上下文中使用$
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.1.js">
</script>
<script type="text/javascript">
$(document).ready(function() {
Sys.WebForms.PageRequestManager.getInstance().add_endRequest(EndRequestHandler);
function EndRequestHandler(sender, args) {
$('.mydatepickerclass').datepicker({ dateFormat: 'dd-mm-yy' });
}
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
</div>
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:TextBox ID="TextBox1" runat="server" CssClass="mydatepickerclass"></asp:TextBox>
<br />
<asp:Button ID="Button1" runat="server" Text="UpdateMe"
onclick="Button1_Click" />
</ContentTemplate>
</asp:UpdatePanel>
</form>
</body>
</html>
小智 9
我知道这是旧的但是...尝试替换:
$(document).ready(function() {
有:
Sys.WebForms.PageRequestManager.getInstance().add_pageLoaded(function () {
小智 5
而不是这样做有一个简单的替代方案.
在更新面板中元素的回发中添加此代码
ScriptManager.RegisterStartupScript(Me, Me.GetType(), "asddas", "getjquerydate();", True)
这在javascript中
function getjquerydate() {
$(".datepicker").datepicker({
numberOfMonths: 2,
showButtonPanel: true,
minDate: 1,
dateFormat: 'dd/mm/yy',
showOn: "button",
buttonImage: "images/calendar.gif",
buttonImageOnly: true
});
}
在更新的面板中进行部分回发后,它再次调用datepicker函数
$(document).ready(function () {
Sys.WebForms.PageRequestManager.getInstance().add_endRequest(EndRequestHandler);
Sys.WebForms.PageRequestManager.getInstance().beginAsyncPostBack();
function EndRequestHandler(sender, args) {
$('.mydatepickerclass').datepicker({ dateFormat: 'dd-mm-yy' });
}
});
你可以这样做。在这种情况下，它将始终有效；))