jQuery $ (dokument) .ready i UpdatePanels?

Używam jQuery, aby połączyć niektóre efekty najechania kursorem myszy na elementy znajdujące się w UpdatePanel. Wydarzenia są powiązane $(document).ready. Na przykład:

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

Oczywiście działa to dobrze przy pierwszym załadowaniu strony, ale gdy UpdatePanel wykonuje częściową aktualizację strony, nie jest uruchamiana, a efekty najechania kursorem nie działają już w UpdatePanel.

Jakie jest zalecane podejście do okablowania w jQuery nie tylko przy ładowaniu pierwszej strony, ale za każdym razem, gdy UpdatePanel uruchamia częściową aktualizację strony? Czy powinienem używać cyklu życia aukcji ASP.NET zamiast $(document).ready?

UpdatePanel całkowicie zastępuje zawartość panelu aktualizacji podczas aktualizacji. Oznacza to, że subskrybowane wydarzenia nie są już subskrybowane, ponieważ w tym panelu aktualizacji znajdują się nowe elementy.

Aby to obejść, subskrybuję wydarzenia, których potrzebuję po każdej aktualizacji. Używam $(document).ready()do początkowego ładowania, a następnie używam Microsoft PageRequestManager(dostępny, jeśli masz panel aktualizacji na swojej stronie), aby ponownie subskrybować każdą aktualizację.

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

Jest PageRequestManagerto obiekt javascript, który jest automatycznie dostępny, jeśli na stronie znajduje się panel aktualizacji. Nie powinieneś robić nic innego niż powyższy kod, aby go używać, dopóki UpdatePanel jest na stronie.

Jeśli potrzebujesz bardziej szczegółowej kontroli, to zdarzenie przekazuje argumenty podobne do argumentów przekazywanych w zdarzeniach platformy .NET, (sender, eventArgs)dzięki czemu można zobaczyć, co wywołało zdarzenie, i ponownie powiązać tylko w razie potrzeby.

Oto najnowsza wersja dokumentacji firmy Microsoft: msdn.microsoft.com/.../bb383810.aspx

Lepszą opcją, jaką możesz mieć, w zależności od potrzeb, jest użycie jQuery's .on(). Te metody są bardziej wydajne niż ponowne subskrybowanie elementów DOM przy każdej aktualizacji. Przeczytaj całą dokumentację, zanim zastosujesz to podejście, ponieważ może ono, ale nie musi, odpowiadać Twoim potrzebom. Istnieje wiele wtyczek jQuery że byłoby nierozsądne byłaby do wykorzystania .delegate()lub .on(), więc w tych przypadkach, jesteś lepiej ponownym śledzeniem.

<script type="text/javascript">

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

Obszar, który będzie aktualizowany.

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

Kontrola użytkownika za pomocą jQuery wewnątrz UpdatePanel

To nie jest bezpośrednia odpowiedź na pytanie, ale zestawiłem to rozwiązanie, czytając odpowiedzi, które tu znalazłem, i pomyślałem, że ktoś może uznać je za przydatne.

Próbowałem użyć ogranicznika jQuery textarea wewnątrz Kontroli użytkownika. Było to trudne, ponieważ Kontrola użytkownika działa wewnątrz UpdatePanel i traciła swoje powiązania w wyniku wywołania zwrotnego.

Gdyby to była tylko strona, odpowiedzi tutaj zastosowałyby się bezpośrednio. Jednak formanty użytkownika nie mają bezpośredniego dostępu do tagu head, ani nie mają bezpośredniego dostępu do UpdatePanel, jak zakładają niektóre odpowiedzi.

W końcu umieściłem ten blok skryptu na samym początku znaczników mojej Kontroli użytkownika. Do pierwszego wiązania używa $ (dokument) .ready, a następnie używa stamtąd 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>

Więc ... Pomyślałem, że ktoś może wiedzieć, że to działa.

Zaktualizuj do jQuery 1.3 i użyj:

$(function() {

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

});

Uwaga: transmisja na żywo działa z większością wydarzeń, ale nie ze wszystkimi. Dokumentacja zawiera pełną listę .

Możesz także spróbować:

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

, ponieważ pageLoad () to zdarzenie ajaxowe ASP.NET, które jest wykonywane za każdym razem, gdy strona jest ładowana po stronie klienta.

Moja odpowiedź?

function pageLoad() {

  $(document).ready(function(){

itp.

Działał jak urok, w którym wiele innych rozwiązań zawiodło.

Chciałbym zastosować jedno z następujących podejść:

1. Hermetyzuj powiązanie zdarzenia w funkcji i uruchamiaj je przy każdej aktualizacji strony. Zawsze możesz zawierać powiązanie zdarzenia z określonymi elementami, aby nie wiązać zdarzeń wiele razy z tymi samymi elementami.

2. Skorzystaj z wtyczki livequery , która w zasadzie wykonuje dla Ciebie metodę pierwszą automatycznie. Twoje preferencje mogą się różnić w zależności od stopnia kontroli powiązania zdarzenia.

To działało dla mnie:

$(document).ready(function() {

    // Do something exciting

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

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

});

W tej sytuacji bardzo niebezpieczne jest użycie funkcji pageLoad (). Możliwe, że wydarzenia zostaną połączone wielokrotnie. Byłbym również z dala od .live (), ponieważ dołącza się do elementu dokumentu i musi przeglądać całą stronę (powolną i kiepską).

Najlepszym rozwiązaniem, jakie do tej pory widziałem, jest użycie funkcji jQuery .delegate () na opakowaniu poza panelem aktualizacji i korzystanie z propagacji. Poza tym zawsze można było połączyć programy obsługi za pomocą biblioteki Ajax firmy Microsoft, która została zaprojektowana do pracy z UpdatePanels.

Jeśli $(document).ready(function (){...})nie działa po opublikowaniu strony, użyj funkcji JavaScript pageLoad w Asp.page w następujący sposób:

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

Miałem podobny problem i odkryłem, że najlepszym sposobem było poleganie na Event Bubbling i delegowaniu wydarzeń, aby sobie z tym poradzić. Zaletą delegowania zdarzeń jest to, że po skonfigurowaniu nie trzeba ponownie łączyć zdarzeń po aktualizacji AJAX.

To, co robię w kodzie, to ustawienie delegata na elemencie nadrzędnym panelu aktualizacji. Ten element nadrzędny nie jest zastępowany podczas aktualizacji, a zatem powiązanie zdarzenia pozostaje nienaruszone.

Istnieje wiele dobrych artykułów i wtyczek do obsługi delegowania zdarzeń w jQuery, a funkcja prawdopodobnie zostanie upieczona w wersji 1.3. Artykuł / wtyczka, której używam w celach informacyjnych to:

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

Kiedy zrozumiesz, co się dzieje, myślę, że znajdziesz to o wiele bardziej eleganckie rozwiązanie, bardziej niezawodne niż pamiętanie o ponownym wiązaniu zdarzeń po każdej aktualizacji. Ma to również tę dodatkową zaletę, że daje jedno zdarzenie do oderwania, gdy strona jest rozładowana.

FWIW, doświadczyłem podobnego problemu z mootools. Ponowne dołączenie moich zdarzeń było poprawnym ruchem, ale musiało zostać wykonane na końcu żądania. Np

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

Należy tylko pamiętać, jeśli parametr beginRequest powoduje uzyskanie wyjątków JS o zerowej wartości referencyjnej.

Twoje zdrowie

To świetna wtyczka do użytku z panelami aktualizacji:

http://updatepanelplugin.codeplex.com/

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

Funkcja pageLoad jest idealna w tym przypadku, ponieważ działa przy początkowym ładowaniu strony i każdym ponownym asynchronicznym ponownym ładowaniu strony. Musiałem tylko dodać metodę unbind, aby jquery działało na postbackpanach updatepanel.

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

Moja odpowiedź opiera się na wszystkich powyższych komentarzach ekspertów, ale poniżej znajduje się następujący kod, którego każdy może użyć, aby upewnić się, że przy każdym postback i przy każdym asynchronicznym postback kod JavaScript będzie nadal wykonywany.

W moim przypadku miałem kontrolę użytkownika na stronie. Po prostu wklej poniższy kod do swojej kontroli użytkownika.

<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 aktualizacji zawsze zastępuje twoją Jquery wbudowanymi skryptami Scriptmanager po każdym załadowaniu. Lepiej jest, jeśli używasz takich metod instancji pageRequestManager ...

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

będzie dobrze działać ...

Użyj poniższego skryptu i odpowiednio zmień jego treść.

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

W odpowiedzi na odpowiedź Briana MacKaya:

Wprowadzam JavaScript do mojej strony za pomocą ScriptManager zamiast umieszczać go bezpośrednio w kodzie HTML UserControl. W moim przypadku muszę przewinąć do formularza, który jest widoczny po zakończeniu i zwróceniu UpdatePanel. To znajduje się w kodzie pliku. W moim przykładzie utworzyłem już zmienną prm na głównej stronie treści.

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