Geek asks and answers

Insert global ajax counter in current div

This page documents a surprisingly simple way to implement global .ajaxStart and .ajaxStop . But, as one comment notes, the drawback is that it relies on a modal window supposedly placed on the absolute x / y on the page.

I want to extend the answer provided there by adding a div loader to the fact that the div is the source of my Ajax call. I don't want _processing the HTML of my current div - and I don't want to add HTML to it - I want to merge this loader div into my current div.

I took a couple of runs with '.append' and '.html', but it’s not clear to me how to do this to create this effect, especially considering the link to Update: As of jQuery 1.8,

thank

+3
source share
3

, ?

function addLoadingDiv(ctrl) {
    //uncomment for mask
    /*ctrl.append('<div class="exposeMask" style="width: ' + ctrl.width() + '; height: ' + ctrl.height() + '; opacity = .5;"></div>');*/

    var left = ((ctrl.width() / 2) - 50) + 'px';
    var top = ((ctrl.height() / 2) - 25) + 'px';
    loadingDiv = '<div class="ajaxLoading" style="top: ' + top + '; left: ' + left + ';">Loading...</div>';
    ctrl.addClass('loading');
    ctrl.append(loadingDiv);
}

- : http://jsfiddle.net/4Ety8/

, JF

0

:

css

.loader { background: url(/images/loader.gif) no-repeat 50% 50% !important;
          width: 32px;
          height: 32px;
          position: fixed;
          top: 50%;
          left: 50%;
          z-index: 300; }

jQuery Ajax-Status

// start ajax
$("yourdiv").addClass("loader");

// success callback
$("yourdiv").removeClass("loader");

, html... .

0

try it

$(document).ajaxStart(function(){
    $("#yourdiv").show();
})
0
source

More articles:


All Articles