加载特定更新面板后如何加载 jquery 文件？答案

【问题标题】：How is it possible to load jquery files after a specific update panel has been loaded?加载特定更新面板后如何加载 jquery 文件？
【发布时间】：2012-03-06 21:40:30
【问题描述】：

我有一组jquery 文件。像这样：

 <script src="js/PortalJs/jquery-ui-personalized-1.6rc2.min.js" type="text/javascript"></script>

 <script src="js/PortalJs/inettuts.js" type="text/javascript"></script>

如何在加载特定更新面板后调用这些文件。

【问题讨论】：

你所说的“调用”到底是什么意思，你想运行一些特定的 JavaScript 吗？因为至少第一个条目只是加载一个库，所以什么时候这样做并不重要
是的，第一个没问题，但是当我点击updatepanel 中触发的链接按钮后，jquery 的效果完全消失了。
更多关于真正问题的信息在这里：stackoverflow.com/questions/9292547/…

标签： c# jquery asp.net ajax updatepanel

【解决方案1】：

这是我用来动态添加依赖的函数

function addDependencies(args) {
  var head = document.getElementsByTagName('head')[0];

  // todo refactor this logic
  function exists(tag, src) {
    var elms = document.getElementsByTagName(tag);

    for (var i=0; i<elms.length; i++) {
      if (elms[i].getAttribute('src') === src) {
        return true;
      }
    }
  }

  for (var src in args) {
    var isCss = /.+\.css$/i.test(src);
    var isJs = /.+\.js$/i.test(src);
    var tag = isCss ? 'link' : 'script';

    if (!exists(tag, src)) {
      if (isCss) {
        if (document.createStyleSheet) {
          document.createStyleSheet(src);
        } else {
          var link = document.createElement(tag);
          link.type = 'text/css';
          link.href = src;
          head.appendChild(link);
        }
      } else if (isJs) {
        var script   = document.createElement(tag);
        script.type = 'text/javascript';
        script.src = src;
        script.onload = args[src]();
        head.appendChild(script);
      }
    }
  }
}

这是demo

【讨论】：

【解决方案2】：

要在加载更新面板后在 javascript 端进行调用，请使用此标准代码。

var prm = Sys.WebForms.PageRequestManager.getInstance();

prm.add_initializeRequest(InitializeRequest);
prm.add_endRequest(EndRequest);

function InitializeRequest(sender, args) {     
}

function EndRequest(sender, args) {
  // here you can load your scripts.
}

您可以在 EndRequest 中添加加载 javascript 的代码，但请注意仅加载它。如果 jQuery 有冲突，请尝试 jQuery.noConflict() 命令。 http://api.jquery.com/jQuery.noConflict/

【讨论】：

@just_name 您在 javascript 会话的页面中编写此代码，这会在任何更新面板更新时触发。您可以在加载更新面板后使用加载脚本。
那我该如何加载我的脚本呢？将其附加到标签 ?
@Nexus 是的，你可以把它放在那里......或者也可以放在页面底部，确保在页面加载时加载

【解决方案3】：

Sys.WebForms.PageRequestManager endRequest 事件

MSDN 文档 endRequest 事件在异步回发完成并且控制权返回给浏览器后引发。您可以使用此事件向用户提供通知或记录错误。

参考 - endRequest

示例代码

<script type="text/javascript" language="javascript">
function EndRequestHandler(sender, args){
 // here you can call the function provided by other user
}
<script

所以你必须在javascript中写下脚本加载功能......

【讨论】：

【解决方案4】：

更新面板有一个 onLoad 事件：http://msdn.microsoft.com/en-us/library/system.web.ui.updatepanel.onload.aspx。

<asp:UpdatePanel OnLoad="upOnload" ...

您可以在代码后面的 updatePanel Onload 事件中加载您的 javascript，如下所示：

    protected void upOnload(object sender, EventArgs e)
{
    Page.Header.Controls.Add(new LiteralControl("<script type='text/javascript' src='" + Page.ResolveUrl("~/js/PortalJs/inettuts.js") + "'></script>"));
}

【讨论】：