当jGrowl被调用时，thickbox停止正常工作(使用UpdatePanel)

本文关键字：UpdatePanel 常工作 工作 使用 调用 jGrowl thickbox | 更新日期: 2023-09-27 18:07:58

点击链接时调用thickbox:

<a href="createContact.aspx?placeValuesBeforeTB_=savedValues&TB_iframe=true&height=400&width=550&modal=true"
                            title="Add a new Contact" class="thickbox">Add a new Contact</a>

并且，当服务器按钮被点击时，我调用这个javascript函数来显示一个jGrowl通知:

ScriptManager.RegisterClientScriptBlock(this, typeof(Page), Guid.NewGuid().ToString(), "$(function(){$.jGrowl('No Contact found: " + searchContactText.Text + "');});", true);

都像预期的那样工作，除了jGrowl比thickbox先显示。这将导致粗框不起作用，页面将显示为一个正常的网页(就好像粗框已经消失了)。

有人知道发生了什么事吗?

更新:这是一个没有母版页的测试页:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm2.aspx.cs" Inherits="RoutingPortal.Presentation.WebForm2" %>
<!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 src="../Scripts/jquery-1.6.2.js" type="text/javascript"></script>
<script src="../Scripts/jquery-ui-1.8.16.custom.min.js" type="text/javascript"></script>
<script src="../Scripts/thickbox.js" type="text/javascript"></script>
<script src="../Scripts/jquery.jgrowl.js" type="text/javascript"></script>
<link href="../Scripts/css/jquery.jgrowl.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="~/CSS/thickbox.css" type="text/css" media="screen" />
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<div>
    <a href="createContact.aspx?placeValuesBeforeTB_=savedValues&TB_iframe=true&height=400&width=550&modal=true"
            title="Add a new Contact" class="thickbox">Add a new Contact</a>
        <asp:Button ID="Button1" runat="server" Text="Button" OnClick="Button1_Click" />
</div>
</ContentTemplate>
</asp:UpdatePanel>
</form>
</body>
</html>

这是背后的代码:

namespace RoutingPortal.Presentation
{
public partial class WebForm2 : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
    }
    protected void Button1_Click(object sender, EventArgs e)
    {
        ScriptManager.RegisterClientScriptBlock(this.Page, typeof(Page), Guid.NewGuid().ToString(),
                "$(function(){$.jGrowl('My Message');});", true);
    }
}
}

我刚刚在没有UpdatePanel的情况下测试了它，它工作得很好。因此，这绝对是UpdatePanel的问题，或者它与代码背后调用的jGrowl交互的方式。

我非常感谢你们的帮助。

更新:我甚至创建了一个演示项目，可以很容易地识别这个问题。我不介意把它发给任何愿意帮我解决这个问题的人。提前感谢各位!

更新:我也尝试了@Rick给出的解决方案，改变了jGrowl脚本从代码后面执行的方式:

ScriptManager.RegisterStartupScript(this.Page, typeof(Page), Guid.NewGuid().ToString(),
        "$.jGrowl('My Message');", true);

然而，由于结果完全相同，问题仍然存在。还有其他想法吗?我非常感谢你的帮助。

更新:我也在IE8和Chrome中尝试过，面临同样的问题。所以，这与浏览器无关。以防万一。

当jGrowl被调用时，thickbox停止正常工作(使用UpdatePanel)

我相信你的问题与jGrowl无关，而与你使用的UpdatePanel有关。

当您使用UpdatePanel时，它会刷新DOM中包含的所有元素。这意味着在页面中创建并将其click事件设置为使用thickbox的原始<a>标记不再存在。在UpdatePanel刷新后，您现在有一个NEW <a>标记，它具有thickbox类，但尚未"初始化"(因为thickbox在页面加载期间设置了单击处理程序，这在部分回发期间不会像正常情况那样发生)。因此，当您单击链接时，它的行为就像一个普通链接。

有几种方法可以解决这个问题，这取决于您的情况。

选项1:根据上面粘贴的代码，在回发处理期间，看起来没有任何与链接相关的实际更改。所以也许你可以移动你的<div><a ...></a> </div>外面的UpdatePanel，只留下里面的按钮。这将保持你的链接作为页面的一部分，它仍然有它的thickbox处理程序附加。

选项2:如果有一些原因你不能使用选项1，那么你可以设置一些javascript在加载你的UpdatePanel时运行，以重新连接链接的点击处理程序。在调用jGrowl的函数中，尝试将tb_init('a.thickbox');添加到代码中。

选项3:你可以修改thickbox.js文件，使用jQuery的实时处理程序，而不是普通的点击处理程序。在tb_init函数中，您可以将其更改为$(domChunk).live('click', function(){..})。我认为这是可行的，尽管更新面板过程可能仍然会阻止它。

我不完全理解您的页面的架构，但是正如@patmortech注意到的那样，UpdatePanel导致DOM元素在每次异步回发时被完全替换。您需要重新绑定所有受影响的元素。

$(document).ready在处理updatepanels时不够好。它将只在第一个页面加载时被调用(而不是在UpdatePanel刷新之后)。解决方案是挂钩到ASP。. NET的ajax架构为您的配置代码。

无论您使用什么代码来配置ThickBox和jGrowl链接，请在这里添加:

Sys.WebForms.PageRequestManager.getInstance().add_endRequest(function() {
    // page config code
});

在ASP的末尾被调用。. NET客户端生命周期，所以把你的配置代码在一个UpdatePanel里面。如果你有多个UpdatePanels，你可以测试哪一个已经更新(google add_endRequest)。然而，通常使用客户端标记状态来确定是否需要配置某些内容更容易，或者使用配置代码，如果对相同的标记运行两次，则不会破坏内容。

使用jquery live也是一种选择，但它并不适用于所有情况

protected void Button1_Click(object sender, EventArgs e)
{
    ScriptManager.RegisterStartupScript(this.Page, typeof(Page), Guid.NewGuid().ToString(),
            "$.jGrowl('My Message');", true);
}
相关文章：