Insert the global ajax spinner in the current div

Question

This page documents a wonderfully simple way to implement a global .ajaxStart and .ajaxStop. But as one of the comments points out, the downside is that it relies on a modal window presumably placed at an absolute x/y on the page.

I'm looking to extend the answer provided there by appending the loader div to whichever div is the origin of my Ajax call. I don't want to be _replacing the HTML of my current div - and I don't want to append HTML to it - I want to merge that loader div into my current div.

I've taken a couple runs with '.append' and '.html' but it's not clear to me exactly how to go about producing the given effect - especially given the reference to Update: As of jQuery 1.8,

thanks

Answer 1

Is this what you are looking for?

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);
}

Too much code for here - try this link: http://jsfiddle.net/4Ety8/

Thanks, JF

Answer 2

I handle this problem like this:

Add a css-class

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

and then use jQuery to add and remove you class depends on Ajax-Status

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

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

So there is no need to apend additional html ... Good luck

Answer 3

try this

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