החשכת המסך בזמן פניית ajax של jquery

(ושוב תודה לחיים בריקמן - על השיתוף)

לרוב כשאנו עושים פעולת ajax נרצה לתת למשתמש אינדקציה שמשהו קורה, בג'ימל אנו מקבלים הודעת Loading בצהוב בראש העמוד, כשעובדים עם Update Panel יש Control שעושה את העבודה בצורה אוטומטית.

כאן נראה כיצד ניתן להחשיך את המסך ולהציג במרכזו אנימציה בזמן פניית ajax.

(כאן הדגמתי כיצד לעשות זאת ידנית - בזמן לחיצה על כפתור)

בקובץ js מרכזי (שכל הדפים מכילים אותו) נכתוב את הקוד הבא:

$.ajaxSetup({
    beforeSend: function () {
        var $window = $(window);
        var $body = $('body');
 
        $body.css('cursor', 'wait');
        var $loadingOverlay = $('<div />').addClass('loading_overlay')
                                          .css({
                                              width: $window.width(),
                                              height: $window.height()
                                          });
 
        $body.prepend($loadingOverlay);
    },
    complete: function () {
        var $body = $('body');
 
        $body.css('cursor', 'default');
        $body.find('div.loading_overlay').remove();
    }
});

ה - ajaxSetup נותן לנו להגדיר הגדרות כלליות אודות בקשות ה - ajax שלנו (וזה לא משנה האם השתמשנו ב - get, post, load וכו').

נוסיף פונקציה ל - beforeSend שתוסיף בתחילת העמוד div ריק שיקבל css כלשהו (שמיד נראה אותו) ובנוסף יקבל את הרוחב והגובה של החלון, וכמובן נגדיר שהמצביע יהיה "המתנה".

בזמן complete (בסיום קריאת ajax) נוריד את ה - div, ונחזיר את המצביע.

קוד ה - css

.loading_overlay
{
    position: absolute;
    float: left;
    z-index: 99999;
    opacity: 0.7;
    -moz-opacity: 0.7;
    filter:alpha(opacity=70);
    background-color: #ffffff;
    background-image: url('../img/icons/ajax_loading.gif');
    background-repeat: no-repeat;
    background-position: center center;
}