c# - 调用jGrowl时，thickbox停止正常工作(使用UpdatePanel)

单击链接时，我正在调用一个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首先显示时。这将导致thickbox无法正常工作，并且该页面将显示为普通网页(就像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无关，而与您使用UpdatePanel有关。

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

有多种方法可以解决此问题，具体取决于您的情况。

选项1 :根据上面粘贴的代码，在回发处理期间，看起来实际上没有任何与链接相关的更改。因此，也许您可以将<div><a ...></a> </div>移到UpdatePanel的外面，而只保留其中的按钮。这会将您的链接保留为页面的一部分，并且仍将附加其thickbox处理程序。

选项2 :如果出于某些原因您不能使用选项1，则可以设置一些JavaScript，使其在加载UpdatePanel时运行，以重新为链接附加点击处理程序。在调用jGrowl的函数中，尝试将tb_init('a.thickbox');添加到您的代码中。

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

希望这可以帮助。

Thickbox

c# - 调用jGrowl时，thickbox停止正常工作(使用UpdatePanel)