jQuery $ (dokumen) .ready dan UpdatePanels?

Saya menggunakan jQuery untuk menghubungkan beberapa efek mouseover pada elemen yang ada di dalam UpdatePanel. Peristiwa terikat $(document).ready. Sebagai contoh:

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

Tentu saja, ini berfungsi dengan baik pertama kali halaman dimuat, tetapi ketika UpdatePanel melakukan pembaruan sebagian halaman, itu tidak berjalan dan efek mouseover tidak berfungsi lagi di dalam UpdatePanel.

Apa pendekatan yang disarankan untuk memasang kabel di jQuery tidak hanya pada pemuatan halaman pertama, tetapi setiap kali UpdatePanel mengaktifkan pembaruan sebagian halaman? Haruskah saya menggunakan siklus hidup ASP.NET ajax bukan $(document).ready?

UpdatePanel sepenuhnya menggantikan konten panel pembaruan pada pembaruan. Ini berarti bahwa peristiwa yang Anda langgani tidak lagi berlangganan karena ada elemen baru di panel pembaruan itu.

Apa yang telah saya lakukan untuk mengatasi ini adalah berlangganan kembali ke acara yang saya butuhkan setelah setiap pembaruan. Saya menggunakan $(document).ready()untuk memuat awal, kemudian menggunakan Microsoft PageRequestManager(tersedia jika Anda memiliki panel pembaruan pada halaman Anda) untuk berlangganan kembali setiap pembaruan.

$(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
});

Ini PageRequestManageradalah objek javascript yang tersedia secara otomatis jika panel pembaruan ada di halaman. Anda tidak perlu melakukan apa pun selain kode di atas untuk menggunakannya selama UpdatePanel ada di halaman.

Jika Anda memerlukan kontrol yang lebih terperinci, peristiwa ini meneruskan argumen yang mirip dengan bagaimana .NET peristiwa dilewati argumen (sender, eventArgs)sehingga Anda dapat melihat apa yang mengangkat peristiwa tersebut dan hanya mengikat kembali jika diperlukan.

Ini adalah versi terbaru dari dokumentasi dari Microsoft: msdn.microsoft.com/.../bb383810.aspx

Opsi yang lebih baik yang mungkin Anda miliki, tergantung pada kebutuhan Anda, adalah menggunakan jQuery's .on(). Metode ini lebih efisien daripada berlangganan ulang ke elemen DOM pada setiap pembaruan. Baca semua dokumentasi sebelum Anda menggunakan pendekatan ini, karena mungkin atau mungkin tidak memenuhi kebutuhan Anda. Ada banyak plugin jQuery yang tidak masuk akal untuk ditolak untuk digunakan .delegate()atau .on(), jadi dalam kasus itu, Anda lebih baik berlangganan ulang.

<script type="text/javascript">

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

Area yang akan diperbarui.

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

Kontrol Pengguna dengan jQuery Di dalam UpdatePanel

Ini bukan jawaban langsung untuk pertanyaan itu, tetapi saya memang menyatukan solusi ini dengan membaca jawaban yang saya temukan di sini, dan saya pikir seseorang mungkin menganggapnya berguna.

Saya mencoba menggunakan pembatas teks jQuery di dalam Kontrol Pengguna. Ini rumit, karena Kontrol Pengguna berjalan di dalam UpdatePanel, dan kehilangan ikatannya saat dipanggil kembali.

Jika ini hanya sebuah halaman, jawaban di sini akan diterapkan secara langsung. Namun, Kontrol Pengguna tidak memiliki akses langsung ke tag kepala, juga tidak memiliki akses langsung ke UpdatePanel seperti yang diasumsikan oleh beberapa jawaban.

Saya akhirnya menempatkan blok skrip ini tepat di atas markup Kontrol Pengguna saya. Untuk ikatan awal, ia menggunakan $ (dokumen). Sudah, dan kemudian menggunakan prm.add_endRequest dari sana:

<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>

Jadi ... Hanya berpikir seseorang mungkin ingin tahu bahwa ini berhasil.

Tingkatkan ke jQuery 1.3 dan gunakan:

$(function() {

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

});

Catatan: siaran langsung dengan sebagian besar acara, tetapi tidak semua. Ada daftar lengkap dalam dokumentasi .

Anda juga dapat mencoba:

<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>

, karena pageLoad () adalah peristiwa ajax ASP.NET yang dijalankan setiap kali halaman dimuat di sisi klien.

Jawabanku?

function pageLoad() {

  $(document).ready(function(){

dll.

Bekerja seperti pesona, di mana sejumlah solusi lain gagal total.

Saya akan menggunakan salah satu pendekatan berikut:

1. Meringkas peristiwa yang mengikat dalam suatu fungsi dan menjalankannya setiap kali Anda memperbarui halaman. Anda selalu dapat berisi acara yang mengikat elemen tertentu agar tidak mengikat acara berulang kali ke elemen yang sama.

2. Gunakan plug-in livequery , yang pada dasarnya melakukan metode satu untuk Anda secara otomatis. Preferensi Anda dapat bervariasi tergantung pada jumlah kontrol yang ingin Anda miliki pada acara yang mengikat.

Ini bekerja untuk saya:

$(document).ready(function() {

    // Do something exciting

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

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

});

fungsi pageLoad () sangat berbahaya untuk digunakan dalam situasi ini. Anda bisa membuat acara menjadi kabel beberapa kali. Saya juga akan tinggal jauh dari .live () karena melekat pada elemen dokumen dan harus melintasi seluruh halaman (lambat dan jelek).

Solusi terbaik yang saya lihat sejauh ini adalah dengan menggunakan fungsi jQuery .delegate () pada pembungkus di luar panel pembaruan dan memanfaatkan penggelembungan. Selain itu, Anda selalu bisa memasang penangan menggunakan perpustakaan Ajax Microsoft yang dirancang untuk bekerja dengan UpdatePanels.

Ketika $(document).ready(function (){...})tidak berfungsi setelah posting halaman kembali maka gunakan fungsi JavaScript pageLoad di Asp.page sebagai berikut:

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

Saya memiliki masalah yang sama dan menemukan cara yang paling berhasil adalah mengandalkan Event Bubbling dan delegasi acara untuk menanganinya. Hal yang menyenangkan tentang pendelegasian acara adalah bahwa sekali pengaturan, Anda tidak harus membatalkan acara setelah pembaruan AJAX.

Apa yang saya lakukan dalam kode saya adalah mengatur delegasi pada elemen induk dari panel pembaruan. Elemen induk ini tidak diganti pada pembaruan dan oleh karena itu pengikatan acara tidak terpengaruh.

Ada sejumlah artikel dan plugin yang bagus untuk menangani delegasi acara di jQuery dan fitur ini kemungkinan akan dimasukkan ke rilis 1.3. Artikel / plugin yang saya gunakan untuk referensi adalah:

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

Setelah Anda memahami apa yang terjadi, saya pikir Anda akan menemukan ini solusi yang jauh lebih elegan yang lebih dapat diandalkan daripada mengingat untuk mengikat kembali acara setelah setiap pembaruan. Ini juga memiliki manfaat tambahan yaitu memberi Anda satu acara untuk dilepas saat halaman dibongkar.

FWIW, saya mengalami masalah serupa w / mootools. Melampirkan kembali acara saya adalah langkah yang benar, tetapi perlu dilakukan di akhir permintaan..ceg

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

Hanya sesuatu yang perlu diingat jika beginRequest menyebabkan Anda mendapatkan referensi JS pengecualian nol.

Bersulang

Ini adalah plugin yang bagus untuk digunakan dengan panel pembaruan:

http://updatepanelplugin.codeplex.com/

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

Fungsi pageLoad sangat cocok untuk kasus ini karena berjalan pada halaman awal dan setiap postback updatepanel async. Saya hanya perlu menambahkan metode unbind untuk membuat jquery bekerja pada postback updatepanel.

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

Jawaban saya didasarkan pada semua komentar ahli di atas, tetapi di bawah ini adalah kode berikut yang dapat digunakan siapa pun untuk memastikan pada setiap postback dan pada setiap postback asinkron, kode JavaScript masih akan dieksekusi.

Dalam kasus saya, saya memiliki kontrol pengguna dalam satu halaman. Cukup tempel kode di bawah ini di kontrol pengguna Anda.

<script type="text/javascript"> 
        var prm = Sys.WebForms.PageRequestManager.getInstance();
    prm.add_endRequest(EndRequestHandler);
    function EndRequestHandler(sender, args) {
        if (args.get_error() == undefined) {
            UPDATEPANELFUNCTION();
        }                   
    }

    function UPDATEPANELFUNCTION() {
        jQuery(document).ready(function ($) {
            /* Insert all your jQuery events and function calls */
        });
    }

    UPDATEPANELFUNCTION(); 

</script>

Panel Pembaruan selalu menggantikan Jquery Anda dengan skrip Scriptmanager bawaannya setelah setiap pemuatan. Lebih baik jika Anda menggunakan metode instance pageRequestManager seperti ini ...

Sys.WebForms.PageRequestManager.getInstance().add_endRequest(onEndRequest)
    function onEndRequest(sender, args) {
       // your jquery code here
      });

itu akan bekerja dengan baik ...

Gunakan skrip di bawah ini dan ubah badan skrip yang sesuai.

       <script>
        //Re-Create for on page postbacks
        var prm = Sys.WebForms.PageRequestManager.getInstance();
        prm.add_endRequest(function () {
           //your codes here!
        });
    </script>

Menanggapi jawaban Brian MacKay:

Saya menyuntikkan JavaScript ke halaman saya melalui ScriptManager alih-alih memasukkannya langsung ke HTML UserControl. Dalam kasus saya, saya perlu menggulir ke formulir yang dibuat terlihat setelah UpdatePanel selesai dan dikembalikan. Ini berlaku pada kode di belakang file. Dalam sampel saya, saya sudah membuat variabel PRM di halaman konten utama.

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;
}

Sys.Application.add_load(LoadHandler); //This load handler solved update panel did not bind control after partial postback
function LoadHandler() {
        $(document).ready(function () {
        //rebind any events here for controls under update panel
        });
}