6

リンクがクリックされたときにシックボックスを呼び出しています。

<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よりも最初に表示される場合を除いて、両方とも期待どおりに機能します。これにより、シックボックスが機能しなくなり、ページは通常のWebとして表示されます（シックボックスがなくなったかのように）。

誰かが何が起こっているのか知っていますか？

更新：これはマスターページのないテストページです：

<%@ 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でもこれを試しました。したがって、これはブラウザとは関係ありません。念のため。

4

3 に答える 3

2

私はあなたのページのアーキテクチャを完全には理解していませんが、@ patmortechが指摘しているように、UpdatePanel原因は各非同期ポストバックでDOM要素が完全に置き換えられます。影響を受ける要素を再バインドする必要があります。

$(document).ready更新パネルを扱っているときは十分ではありません。最初のページの読み込み時にのみ呼び出されます（UpdatePanel更新後は呼び出されません）。解決策は、構成コード用にASP.NETのajaxアーキテクチャにフックすることです。

ThickBoxリンクとjGrowlリンクを構成するために使用しているコードが何であれ、ここに追加します。

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

これはASP.NETクライアントのライフサイクルの最後に呼び出されるため、UpdatePanelそこにすべての構成コードを配置します。複数のUpdatePanelがある場合は、どれが更新されたかをテストできます（googleadd_endRequest）。ただし、多くの場合、クライアントのマークアップ状態を使用して何かを構成する必要があるかどうかを判断するか、同じマークアップに対して2回実行しても問題が発生しない構成コードを使用する方が簡単です。

jqueryの使用liveもオプションですが、すべての状況で機能するとは限りません。

于 2011-09-26T14:53:21.437 に答える
2

あなたの問題はjGrowlとは何の関係もなく、すべてUpdatePanelの使用と関係があると思います。

UpdatePanelを使用すると、それに含まれるDOM内のすべての要素が更新されます。これは<a>、ページで作成され、thickboxを使用するようにクリックイベントが設定された元のタグが存在しないことを意味します。UpdatePanelが更新さ<a>れると、thickboxクラスを持つが、「初期化」されていないNEWタグが作成されます（thickboxはページの読み込み中にクリックハンドラーを設定するため、部分的なポストバックでは通常のようには発生しません）。したがって、リンクをクリックすると、通常のリンクのように機能します。

状況に応じて、これを修正する方法はいくつかあります。

オプション1：上記で貼り付けたコードに基づくと、ポストバック処理中にリンクに関連する実際の変更はないようです。<div><a ...></a> </div>したがって、UpdatePanelの外側に移動して、ボタンだけを内側に残すことができるかもしれません。これにより、リンクがページの一部として保持され、thickboxハンドラーがアタッチされたままになります。

オプション2：オプション1を使用できない理由がある場合は、UpdatePanelのロード中に実行するJavaScriptを設定して、リンクのクリックハンドラーを再接続できます。jGrowlを呼び出す関数でtb_init('a.thickbox');、コードに追加してみてください。

オプション3：通常のクリックハンドラーの代わりにjQueryのライブハンドラーを使用するようにthickbox.jsファイルを変更できます。関数では、tb_initに変更します$(domChunk).live('click', function(){..})。これはうまくいくと思いますが、パネルの更新プロセスがそれを失敗させる可能性はあります。

お役に立てれば。

于 2011-09-26T14:40:30.533 に答える
1 
protected void Button1_Click(object sender, EventArgs e)
{
    ScriptManager.RegisterStartupScript(this.Page, typeof(Page), Guid.NewGuid().ToString(),
            "$.jGrowl('My Message');", true);
}
于 2011-09-20T02:36:02.017 に答える