[英]How can I execute JavaScript from my code-behind after my UpdatePanel has finished loading its DOM elements?
I have an UpdatePanel with a repeater in it that is re-bound after a user adds an item to it via a modal popup. 我有一个带有转发器的UpdatePanel,在用户通过模式弹出窗口向其添加项目后重新绑定。
When they click the button to add a new row to the repeater the code-behind looks something like this: 当他们单击按钮向转发器添加新行时,代码隐藏看起来像这样:
protected void lbtnAddOption_Click(object sender, EventArgs e)
{
SelectedOption = new Option()
{
Account = txtAddOptionAccountNumber.Text,
Margin = chkAddOptionMargin.Checked,
Symbol = txtAddOptionSymbol.Text,
Usymbol = txtAddOptionUsymbol.Text,
};
Presenter.OnAddOption(); // Insert the new item
RefreshOptions(); // Pull down and re-bind all the items
mpeAddOptionDialog.Hide(); // Hide the modal
// ... Make call to jQuery scrollTo() method here?
}
This works fine and the new row will show up quickly via the UpdatePanel. 这很好用,新行将通过UpdatePanel快速显示。
However, there are often hundreds of rows and where the new one is added is based on the current sorting column used. 但是,通常会有数百行,并且添加新行的行基于当前使用的排序列。
So, I wanted to take this as a chance to use the sweet jQuery ScrollTo plugin . 所以,我想把它作为使用甜蜜的jQuery ScrollTo插件的机会。 I know that if I give it the ID of my overflowed container div and the ID of an element within it, it will smoothly scroll straight to the users newly added row. 我知道如果我给它溢出的容器div的ID和其中元素的ID,它将平滑地直接滚动到用户新添加的行。
However, there are two problems: 但是,有两个问题:
I've solved #1. 我已经解决了#1。 I have a reliable method that will produce the newly added row's ClientID. 我有一个可靠的方法,将产生新添加的行的ClientID。
However, problem #2 is proving to be tricky. 然而,问题#2被证明是棘手的。 I know I can just call ScriptManager.RegisterStartupScript()
form my code-behind and it will execute the JavaScript on my page. 我知道我可以调用ScriptManager.RegisterStartupScript()
构成我的代码隐藏,它将在我的页面上执行JavaScript。
The problem I'm having is that it seems that it is executing that piece of JavaScript before (I'm guessing) the newly refreshed DOM elements have fully loaded. 我遇到的问题是它似乎正在执行那段JavaScript(我猜)新刷新的DOM元素已经完全加载。 So, even though I am passing in the appropriate jQuery line to scroll to the element I want, it is erroring out for me because it can't find that element yet. 所以,即使我传入适当的jQuery行来滚动到我想要的元素,它对我来说也是错误的,因为它还找不到那个元素。
Here is the line I'm using at the end of the method I posted above: 这是我在上面发布的方法结尾处使用的行:
string clientID = getClientIdOfNewRow();
ScriptManager.RegisterStartupScript(this, typeof(Page), "ScrollScript", String.Format("$(\"#optionContainer\").scrollTo(\"{0}\", 800);", clientID), true);
What do I need to do so I can ensure that this line of JavaScript isn't called until the page with the UpdatePanel is truly ready? 我需要做什么才能确保在具有UpdatePanel的页面真正准备好之前不会调用这一行JavaScript?
If the stuff you need to process is in the update panel, then you need to run your JS once that panel is loaded. 如果你需要处理的东西在更新面板中,那么你需要在加载面板后运行你的JS。 I use add_endRequest for that. 我使用add_endRequest。 This below is hacked from something rather more complex. 以下内容是从更复杂的东西入侵的。 It runs once on document ready, but installs the "end ajax" handler which is triggered every time your update panel is updated. 它在文档就绪时运行一次,但安装了“end ajax”处理程序,每次更新更新面板时都会触发该处理程序。 And by the time it fires, it's all there for you. 当它发射时,它就在你身边。
var prm = Sys.WebForms.PageRequestManager.getInstance();
jQuery(document).ready(function () {
prm.add_endRequest(EndRequestHandler);
});
function EndRequestHandler(sender, args) {
// do whatever you need to do with the stuff in the update panel.
}
Obviously you can inject that from code-behind if you want. 显然,如果你愿意,你可以从代码隐藏中注入它。
You can use the Sys.Application.load event which is raised after all scripts have been loaded and the objects in the application have been created and initialized. 您可以使用在加载所有脚本并创建并初始化应用程序中的对象后引发的Sys.Application.load事件。
So your code would be: 所以你的代码是:
string clientID = getClientIdOfNewRow();
ScriptManager.RegisterStartupScript(this, typeof(Page)
,"ScrollScript"
,String.Format("Sys.Application.add_load(function(){{$(\"#optionContainer\").scrollTo(\"{0}\", 800);}});"
, clientID)
, true);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.