从 UpdatePanel 异步回发后,嵌入式 javascript 不起作用
Posted
技术标签:
【中文标题】从 UpdatePanel 异步回发后,嵌入式 javascript 不起作用【英文标题】:Embedded javascript does not work after async postback from UpdatePanel 【发布时间】:2011-12-26 22:08:41 【问题描述】:我创建了一个服务器控件,其中嵌入了一些 javascript 文件。这可以正常工作,但是当服务器控件放在 ajax UpdatePanel 中时,它会在更新面板中触发异步回发后停止工作。
这是我在服务器控件中的代码:
protected override void OnPreRender(EventArgs e)
base.OnPreRender(e);
ClientScriptManager clientScriptManager = Page.ClientScript;
const string DATE_TIME_PICKER_JS = "JQueryControls.Scripts.DateTimePicker.js";
clientScriptManager.RegisterClientScriptResource(typeof(DateTimePicker), DATE_TIME_PICKER_JS);
if (Ajax.IsControlInsideUpdatePanel(this) && Ajax.IsInAsyncPostBack(Page))
Ajax.RegisterClientScriptResource(Page, typeof(DateTimePicker), DATE_TIME_PICKER_JS);
Ajax 是class from this link。
此代码在异步回发中执行的位置:
public static void RegisterClientScriptResource(Page page, Type type, string resourceName)
object scriptManager = FindScriptManager(page);
if (scriptManager != null)
System.Type smClass = GetScriptManagerType(scriptManager);
if (smClass != null)
Object[] args = new Object[] page, type, resourceName ;
smClass.InvokeMember("RegisterClientScriptResource",
System.Reflection.BindingFlags.Static | System.Reflection.BindingFlags.Public |
System.Reflection.BindingFlags.InvokeMethod,
null, null, args);
关于如何让它在 UpdatePanel 中工作的任何想法?
【问题讨论】:
【参考方案1】:UpdatePanel 会在新元素回发时将它们放置在页面中。它不再是同一个元素,因此您的绑定不再存在。如果您正在使用 jQuery 并将事件绑定在一起,您可以使用他们的 live
API 找到 here。否则对于诸如日期选择器之类的东西,它们会触发一次并从根本上改变项目的功能,您需要在加载新元素后触发一些 javascript;所有这一切都需要将一些 javascript 调用绑定到 Microsoft 提供的回调函数:
function BindEvents()
//Here your jQuery function calls go
var prm = Sys.WebForms.PageRequestManager.getInstance();
prm.add_endRequest(BindEvents);
编辑:根据您的评论,我会像这样制作 DatePicker.js 文件:
$(document).ready(function ()
// Call BindDatePicker so that the DatePicker is bound on initial page request
BindDatePicker();
// Add BindDatePicker to the PageRequestManager so that it
// is called after each UpdatePanel load
var prm = Sys.WebForms.PageRequestManager.getInstance();
prm.add_endRequest(BindDatePicker);
);
// We put the actual binding of the DatePicker to the input here
// so that we can call it multiple times. Other binds that need to happen to the
// elements inside the UpdatePanel can be put here as well.
var BindDatePicker = function()
$('.DatepickerInput').datepicker(
showAnim: 'blind',
autoSize: true,
dateFormat: 'dd-mm-yy'
);
;
【讨论】:
感谢您的反馈,但我仍然不确定如何设置。仅供参考,除了 DateTimePicker.js 文件之外,我还以相同的方式嵌入了 jquery-1.6.3.min.js 和 jquery-ui-1.8.16.custom.min.js。到目前为止我的 DateTimePicker.js 文件的内容是: $(document).ready(function () $('.DatepickerInput').datepicker( showAnim: 'blind', autoSize: true, dateFormat: 'dd-mm -yy' ); );你能帮我提供更多细节吗? 我编辑了问题,为您提供了我将用于该文件的特定代码。 太好了,现在可以使用了。只需要更改 prm.add_endRequest(BindDatePicker());到 prm.add_endRequest(BindDatePicker); 啊,打错字了。我已经在解决方案中修复了它。以上是关于从 UpdatePanel 异步回发后,嵌入式 javascript 不起作用的主要内容,如果未能解决你的问题,请参考以下文章