UpdatePanel membawa masalah bagi sang JQueryyyy..

UpdatePanel : Hey kau JQuery..
JQuery : Ya ada apa?
UpdatePanel : gpp.. cuman manggill..
JQuery : What the.. ???

UPdatePanel : Jquery Jquery Jquery..
JQuery : Ya ada apa?
UpdatePanel : Gpp, cuman tes kuping aja..
JQuery : . . . .


Yah sepenggal di atas adalah spoiler dari film yg sebentar lagi tayang.. eh...
maksud saya..
Sepenggal di atas adalah inti dari topik yg akan saya tulis di postingan kali ini..

Udah ah.. jayus nya udahan dulu..
(Jayus Mode Off)
(Serius Mode ON)

Ehem..
Pernahkah anda menggunakan sebuah JQuery, dan objek yg berhubungan dengan JQuery itu berada di dalam UpdatePanel... Ketika UpdatePanel sudah ter-"update", tiba2 objek yg berhubungan dengan JQuery itu seakan2 kehilangan fungsi2 Jquery nya..

Yak! anda tidak salah baca.. JQuery kehilangan semua fungsi2nya jika berada di dalam sebuah UpdatePanel..

Contoh kasusnya seperti ini :
(untuk ilustrasi, saya akan gunakan Javascript saja.. karna klo pake Jquery bisa2 jadi terlalu panjang, dan yg baca bakal ngantuk, dan yg bikin jga capek ngetiknya, dan blum tentu yg baca ngerti, dan blum tentu jga ada yg baca, dan belum tentu jga waktu nya sempet..)

Suatu hari hiduplah seorang UpdatePanel lengkap dengan Literal yg berisi fungsi Javascript dinamis..

//WebPage.aspx
<asp:UpdatePanel ID="UpdatePanelTersangka" runat="server">
 <ContentTemplate>
  <asp:Literal ID="litJavascript" runat="server"></asp:Literal>
 </ContentTemplate>
</asp:UpdatePanel>

Dan tentu saja, ada fungsi yg bertujuan untuk menggenerate si fungsi javscript itu sesuai keinginan..

//WebPage.aspx.cs
private void LoadData(){
 String Text = "Haloooo.. gw ganteng banged yahh..";
 litJavascript.Text = "<script type='text/javascript'>\n";
 litJavascript.Text += "function LoadSayaLagiDonk() {\n";
 litJavascript.Text += "alert('" + Text + "');\n";
 litJavascript.Text += "}\n";
 litJavascript.Text += "</script>";
}

Tapi semua berubah ketika negara api menyerang.. (lho??)


Pada awal pertama kali web itu di jalankan.. Fungsi LoadData() ini akan berjalan seperti biasa nya..
Namun apabila UpdatePanel ini ter-update (ter-load / berubah) Maka entah kenapa semua fungsi javascript & Jquery pun tidak akan berjalan..
Bahkan walopun kita menjalankan fungsi LoadData() ini sekali lagi..

Penyebabnya karna DOM nya sudah selesai ter-load.. dan JavaScript ini biasa dijalankan setelah DOM, UpdatePanel memiliki kemampuan untuk mengubah halaman, tanpa perlu melalui DOM lagi..

Jadi Bagaimana donkkkkkkkk....?????


Solusi nya mudah.. Kita cukup menambahkan sepenggal Javascript di dalam UpdatePanel tersebut..
Jadi seperti ini :

<asp:UpdatePanel ID="UpdatePanelTersangka" runat="server">
 <ContentTemplate>
 
  <script type="text/javascript">
  var prm = Sys.WebForms.PageRequestManager.getInstance();
  prm.add_endRequest(function() {
   LoadSayaLagiDonk();
  }); 
  </script>
     
  <asp:Literal ID="litJavascript" runat="server"></asp:Literal>
 </ContentTemplate>
</asp:UpdatePanel>

Kita cukup memasukkan Fungsi Javascript yg ingin kita jalankan ke dalam add_endRequest..
Dan Voila...
Javascript & Jquery pun kembali riang...
:D :D :D :D :D

Hope this help the world.. :)