2

jquery UI.button()から、アンカー、ボタン、送信ボタンなどに適用できるようになりました。次のような単純なasp.netボタンがあります。

<asp:Button ID="btnFindSearch" runat="server" Text="Search" 
                        onclick="btnFindSearch_Click" />

ただし、次のように更新パネルの内部にあります。

 <div id="dialog" title="Select Address">
        <asp:UpdatePanel ID="upNewUpdatePanel" UpdateMode="Conditional" ChildrenAsTriggers="true" runat="server">
        <ContentTemplate>
            <div id="search" style="width:100%; text-align:center;">
                <asp:TextBox ID="txtFindSearch" runat="server"></asp:TextBox> 
                <asp:Button ID="btnFindSearch" runat="server" Text="Search" 
                    onclick="btnFindSearch_Click" />
            </div>
        </ContentTemplate>
        </asp:UpdatePanel>
        </div>

私のjqueryでは次のことができます：

$('#btnFindSearch').button();

そしてそれは私にボタンのjqueryuiの外観を与えます...私は素晴らしいと思いました。しかし、ボタンをクリックすると、ボタンは昔ながらのasp.netサーバーボタンに戻ります。.button()が適用されなくなったかのように。

これは、UpdatePanel内にあるという事実によるものですか、それともこれを引き起こしている可能性があるものによるものですか？

4

2 に答える 2

6

これは、ボタンをクリックするとサーバーのPostBackが発生し、元のDOM要素が置き換えられるためです。

UpdatePanelは特に賢いわけではありません。すべての子コンテンツをサーバーから送信された新しいHTMLに置き換えるだけです（think innerHTML = severStuff）。したがって、新しく作成されたDOM要素は「装飾されていません」。魔法は.button()、新しいDOM要素で再度実行する必要があります。

これを処理するためのより良い方法を除いて、私にはわかりませんが、さまざまなシナリオを自動的に処理するインラインスクリプトブロックの便利なクラスを次に示します。これは一種の厄介で「ハック」ですが、かなりうまく機能します（変更されたバージョンを使用します）。

使用法は次のようになります（部分的なPostBackで機能するには、[updated] UpdatePanel内にある必要があります）。

<UpdatePanel ...>
  <OtherControls ...>
  // Put other controls first, because this will be rendered in-order
  // (which should usually be last!) in a normal/full PostBack.
  // It will use the appropriate "RegisterScript" for partial PostBacks.
  <InlineScript runat="server">
    <script>
        // Add .button() stuff here - note that InlineScript is last
        // so the previous (control) DOM nodes exist already in current
        // browser implementations, even if there is no "DOM loaded" per-se...
        // -- or --
        jQuery(function ($) {
            // Add .button() stuff here; using $.ready here might (??)
            // actually cause the browser to update the UI first...
            // ...but it will guarantee the DOM is completely loaded.
        })
    </script>
  </InlineScript>
</UpdatePanel>
于 2012-04-22T22:29:58.663 に答える
3

これは、jQuery livequeryプラグインで実行できます。

現在domにあるものと後で追加されるものすべての要素の関数を定義するために使用できます..これにより、ほとんどの問題が解決されます。

使用例を次に示します。

$("#btnFindSearch").livequery(function(){$(this).button();})
于 2012-04-22T22:53:30.717 に答える