שיוך אירועי jQuery מחדש לאחר ריענון UpdatePanel

לאחרונה נתקלתי במקרה בעייתי: הפעלתי מספר פונקציות בטעינת הדף באמצעות jQuery ו- $(document).ready. אך כאשר לחצתי על אחד הכפתורים באתר כל השינויים שביצעתי בטעינת הדף נעלמו!

בדקתי מה קורה כאשר אני לוחץ על הכפתור הבעייתי והתברר שהמקטע הבעייתי נמצא בתוך Update Panel, מה שגורם לכך שהוא יוצר מחדש את המקטע שהפעלתי עליו את הקוד באמצעות AJAX, וכך נעלמים כל השינויים שעשיתי באמצעות $(document).ready.

ניסיתי לגרום לשינויים לעבוד באמצעות הפונקציה on (לשעבר load) של jQuery אך נראה שהיא לא תומכת בהרצת הקוד בטעינת הדף מחדש אלא רק בשיוך מחדש של אירוע לאלמנט בדף לאחר פעולת ה- AJAX.

לאחר חיפוש באינטרנט מצאתי פיתרון אחר: שמירה של PageRequestManager שאחראי על פעולת ה-Update Panel בדף ושיוך פונקציות אל האירוע של סיום טעינת הנתונים מחדש.

 

אז איך זה נעשה?

var prm = Sys.WebForms.PageRequestManager.getInstance();
prm.add_endRequest(function() {
    // re-bind jQuery events here
});

 

שורה מספר 1 שומרת את האובייקט של PageRequestManager, 

שורה 2 מוסיפה את האירועים שבשורה מספר 3 לסיום טעינת ה- Update Panel.

 

הוסף תגובה