javascript - jQuery $(document).ready と UpdatePanels?

Question

jQuery を使用して、UpdatePanel 内の要素に対するマウスオーバー効果を接続しています。イベントはにバインドされてい$(document).readyます。例えば：

$(function() {    
    $('div._Foo').bind("mouseover", function(e) {
        // Do something exciting
    });    
});

もちろん、これはページが最初にロードされるときは正常に機能しますが、UpdatePanel が部分的なページ更新を行うと、更新パネルは実行されず、UpdatePanel 内でマウスオーバー効果が機能しなくなります。

最初のページの読み込み時だけでなく、UpdatePanel が部分的なページ更新を起動するたびに、jQuery に配線するための推奨されるアプローチは何ですか? 代わりに ASP.NET ajax ライフサイクルを使用する必要があり$(document).readyますか?

score 553 · Accepted Answer

UpdatePanel は、更新時に更新パネルの内容を完全に置き換えます。これは、その更新パネルに新しい要素があるため、サブスクライブしていたイベントがサブスクライブされなくなったことを意味します。

これを回避するために私が行ったことは、更新のたびに必要なイベントを再サブスクライブすることです。私$(document).ready()は最初の読み込みに使用し、次に Microsoft のPageRequestManager(ページに更新パネルがある場合に利用可能) を使用して、すべての更新を再サブスクライブします。

$(document).ready(function() {
    // bind your jQuery events here initially
});

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

prm.add_endRequest(function() {
    // re-bind your jQuery events here
});

はPageRequestManager、更新パネルがページ上にある場合に自動的に使用可能になる JavaScript オブジェクトです。UpdatePanel がページ上にある限り、それを使用するために上記のコード以外に何もする必要はありません。

より詳細な制御が必要な場合、このイベントは、.NET イベントが引数を渡す方法と同様の引数を渡す(sender, eventArgs)ため、何がイベントを発生させたかを確認し、必要な場合にのみ再バインドできます。

Microsoft のドキュメントの最新バージョンは次のとおりです: msdn.microsoft.com/.../bb383810.aspx

必要に応じて、より良いオプションは、jQuery の.on(). これらの方法は、更新のたびに DOM 要素を再サブスクライブするよりも効率的です。ただし、このアプローチを使用する前に、すべてのドキュメントを読んでください。ニーズを満たす場合と満たさない場合があるためです。.delegate()またはを使用するようにリファクタリングするのは合理的でない jQuery プラグインがたくさんある.on()ため、そのような場合は、再サブスクライブすることをお勧めします。

score 158 · Accepted Answer

<script type="text/javascript">

        function BindEvents() {
            $(document).ready(function() {
                $(".tr-base").mouseover(function() {
                    $(this).toggleClass("trHover");
                }).mouseout(function() {
                    $(this).removeClass("trHover");
                });
         }
</script>

更新予定のエリアです。

<asp:UpdatePanel...
<ContentTemplate
     <script type="text/javascript">
                    Sys.Application.add_load(BindEvents);
     </script>
 *// Staff*
</ContentTemplate>
    </asp:UpdatePanel>

score 63 · Accepted Answer

UpdatePanel 内の jQuery を使用したユーザーコントロール

これは質問に対する直接的な回答ではありませんが、ここで見つけた回答を読んでこのソリューションをまとめました。誰かが役に立つと思うかもしれません.

ユーザーコントロール内で jQuery テキストエリアリミッターを使用しようとしていました。ユーザーコントロールは UpdatePanel 内で実行され、コールバックでバインドが失われていたため、これは注意が必要でした。

これが単なるページである場合、ここでの回答が直接適用されます。ただし、一部の回答が想定しているように、ユーザーコントロールは head タグに直接アクセスしたり、UpdatePanel に直接アクセスしたりできませんでした。

最終的に、このスクリプトブロックをユーザーコントロールのマークアップの一番上に配置しました。最初のバインドでは、$(document).ready を使用し、そこから prm.add_endRequest を使用します。

<script type="text/javascript">
    function BindControlEvents() {
        //jQuery is wrapped in BindEvents function so it can be re-bound after each callback.
        //Your code would replace the following line:
            $('#<%= TextProtocolDrugInstructions.ClientID %>').limit('100', '#charsLeft_Instructions');            
    }

    //Initial bind
    $(document).ready(function () {
        BindControlEvents();
    });

    //Re-bind for callbacks
    var prm = Sys.WebForms.PageRequestManager.getInstance(); 

    prm.add_endRequest(function() { 
        BindControlEvents();
    }); 

</script>

だから...誰かがこれが機能することを知りたいと思った.

score 33 · Accepted Answer

jQuery 1.3 にアップグレードして以下を使用します。

$(function() {

    $('div._Foo').live("mouseover", function(e) {
        // Do something exciting
    });

});

注: ライブはほとんどのイベントで機能しますが、すべてではありません。ドキュメントに完全なリストがあります。

score 20 · Accepted Answer

あなたも試すことができます：

<asp:UpdatePanel runat="server" ID="myUpdatePanel">
    <ContentTemplate>

        <script type="text/javascript" language="javascript">
        function pageLoad() {
           $('div._Foo').bind("mouseover", function(e) {
               // Do something exciting
           });
        }
        </script>

    </ContentTemplate>
</asp:UpdatePanel>

pageLoad() は、クライアント側でページがロードされるたびに実行される ASP.NET ajax イベントであるためです。

score 17 · Accepted Answer

私の答え？

function pageLoad() {

  $(document).ready(function(){

等

他の多くの解決策が惨めに失敗した魅力のように機能しました。

score 7 · Accepted Answer

次のいずれかのアプローチを使用します。

イベントバインディングを関数にカプセル化し、ページを更新するたびに実行します。イベントが同じ要素に複数回バインドされないように、特定の要素にバインドするイベントを常に含めることができます。
livequeryプラグインを使用すると、基本的に方法 1 が自動的に自動的に実行されます。イベントバインディングをどの程度制御したいかによって、好みが変わる場合があります。

score 6 · Accepted Answer

関数 pageLoad() をこの状況で使用するのは非常に危険です。イベントが複数回ワイヤードになる可能性があります。また、.live() はドキュメント要素にアタッチされ、ページ全体をトラバースする必要があるため (遅くてくだらない) には近づきません。

これまでに見た最善の解決策は、更新パネルの外側のラッパーで jQuery .delegate() 関数を使用し、バブリングを利用することです。それ以外の場合は、UpdatePanels で動作するように設計された Microsoft の Ajax ライブラリを使用して、いつでもハンドラーを接続できます。

score 6 · Accepted Answer

ページのポストバック後に機能しない場合$(document).ready(function (){...})は、次のように Asp.page で JavaScript 関数 pageLoad を使用します。

<script type="text/javascript" language="javascript">
function pageLoad() {
// Initialization code here, meant to run once. 
}
</script>

score 4 · Accepted Answer

FWIW、mootools で同様の問題が発生しました。イベントの再添付は正しい動きでしたが、リクエストの最後に行う必要がありました..eg

var prm = Sys.WebForms.PageRequestManager.getInstance();
prm.add_endRequest(function() {...

beginRequest によって null 参照 JS 例外が発生する場合は、注意が必要です。

乾杯

score 4 · Accepted Answer

これは、更新パネルで使用するための優れたプラグインです。

http://updatepanelplugin.codeplex.com/

score 4 · Accepted Answer

私も同様の問題を抱えていましたが、最も効果的な方法は、イベントバブリングとイベント委任に依存して処理することであることがわかりました。イベントデリゲーションの優れた点は、一度設定すると、AJAX の更新後にイベントを再バインドする必要がないことです。

私のコードで行っていることは、更新パネルの親要素にデリゲートを設定することです。この親要素は更新時に置き換えられないため、イベントバインディングは影響を受けません。

jQuery でイベント委任を処理するための優れた記事とプラグインが多数あり、この機能は 1.3 リリースに組み込まれる可能性があります。参照用に使用する記事/プラグインは次のとおりです。

http://www.danwebb.net/2008/2/8/event-delegation-made-easy-in-jquery

何が起こっているのかを理解すれば、更新のたびにイベントを再バインドすることを覚えておくよりも、はるかに洗練された信頼性の高いソリューションであることがわかると思います。これには、ページがアンロードされたときにバインドを解除する 1 つのイベントが提供されるという追加の利点もあります。

score 3 · Accepted Answer

pageLoad = function () {
    $('#div').unbind();
    //jquery here
}

pageLoad 関数は、最初のページの読み込みとすべての updatepanel 非同期ポストバックで実行されるため、この場合に最適です。unbind メソッドを追加して、jquery が updatepanel ポストバックで機能するようにする必要がありました。

http://encosia.com/document-ready-and-pageload-are-not-the-same/

score 0 · Accepted Answer

ブライアン・マッケイの答えに応えて：

JavaScript を UserControl の HTML に直接挿入するのではなく、ScriptManager を介してページに挿入します。私の場合、UpdatePanel が終了して戻った後に表示されるフォームまでスクロールする必要があります。これはコードビハインドファイルに含まれます。サンプルでは、メインコンテンツページにprm変数を既に作成しています。

private void ShowForm(bool pShowForm) {
    //other code here...
    if (pShowForm) {
        FocusOnControl(GetFocusOnFormScript(yourControl.ClientID), yourControl.ClientID);
    }
}

private void FocusOnControl(string pScript, string pControlId) {
    ScriptManager.RegisterStartupScript(this.Page, this.Page.GetType(), "focusControl_" + pControlId, pScript, true);
}

/// <summary>
/// Scrolls to the form that is made visible
/// </summary>
/// <param name="pControlId">The ClientID of the control to focus on after the form is made visible</param>
/// <returns></returns>
private string GetFocusOnFormScript(string pControlId) {
    string script = @"
    function FocusOnForm() {
        var scrollToForm = $('#" + pControlId + @"').offset().top;
        $('html, body').animate({ 
            scrollTop: scrollToForm}, 
            'slow'
        );
        /* This removes the event from the PageRequestManager immediately after the desired functionality is completed so that multiple events are not added */
        prm.remove_endRequest(ScrollFocusToFormCaller);
    }
    prm.add_endRequest(ScrollFocusToFormCaller);
    function ScrollFocusToFormCaller(sender, args) {
        if (args.get_error() == undefined) {
            FocusOnForm();
        }
    }";
    return script;
}

javascript - jQuery $(document).ready と UpdatePanels?

19 に答える 19

Related

Reference