Miesiąc: Lipiec 2010

Document.ready() vs pageLoad() – deatchmatch bibliotek Ajax

Często zdarza się że w projekcie ASN.NET Ajax, oprócz Microsoft Ajax Library używamy jeszcze jQuery . Jest to genialna biblioteka, zachwalana przez wszystkich dot netowych guru jak Scott Gunthrie oraz Omar Al Zahir. Wcześniej czy później napotkamy metody document.ready() oraz pageLoad(). I powstaje pytanie czy można ich używać razem.Otóż TAK! Czy to to samo? Niekoniecznie. Pod maską document.ready() jest zdarzenie DOMContentLoaded, jeśli przeglądarka je obsługuje. Jeśli nie, wywoływane jest zdarzenie window.onLoad. Metoda pageLoad() wykorzystuje uniwersalne odwołanie setTimeout z wartością 0 sekund. Co powoduje że skrypt czeka na załadowanie się całego modelu DOM, przed wywołaniem. Z tym wiąże się 1 pułapka – pageLoad() wywołuje się więcej niż raz – także po każdym postbacku.Na przykład na takiej stronie:


<script type="text/javascript"> <br /> function pageLoad() { <br /> // to zadziała więcej niż raz <br /> } <br /></script>

<asp:scriptmanager runat="server">

<asp:updatepanel runat="server">
<contenttemplate>
<asp:button runat="server" id="Button1">
<asp:literal runat="server" id="TextBox1">
</asp:literal>
</asp:button>

metoda pageLoad() zostanie wywołana po każdym naciśnięciu buttona. Oczywiście w pewnych sytuacjach taka funkcjonalność jest idealna, np.


<script type="text/javascript">
function pageLoad() {
$('#TextBox1').unbind();
$('#TextBox1').datepicker();
}
</script>

<asp:ScriptManager runat="server" />

<asp:UpdatePanel runat="server">
<ContentTemplate>
<asp:Button runat="server" ID="Button1" />
<asp:TextBox runat="server" ID="TextBox1" />
</ContentTemplate>
</asp:UpdatePanel>

Wtedy po postbacku plugin datepicker zostanie ponownie powiązany z textboxem. Inaczej utracilibyśmy tą funkcjonalność.
Podsumowując, pageLoad(), jest metodą wywoływaną wielokrotnie, po załadowaniu strony, oraz przy każdym postbacku. Działa tak samo w każdej przeglądarce. Natomiast document.ready() zawiera optymalizacje dla przeglądarek i jest wywoływana tylko raz po załadowaniu strony. Ciekawostka : Jeśli chcemy osiągnąć funkcjonalność document.ready() (jednokrotne przetwarzanie) bez korzystania z biblioteki jQuery ? Wtedy należy wykożystać metodę S Sys.Application.init. Aby z niej korzystać użyj tego snipletu z kodem:


<asp:ScriptManager runat="server" />

<script type="text/javascript">
Sys.Application.add_init(function() {
// Kod inicjujący, do uruchomienia tylko raz
});
</script>