CODEWITHSUNDEEP
javascriptjqueryajaxhtmlcss
OpenStack
OpenStack

Reputation: 5596

Generic function that show loading icon over any given div

Is it possible to pass a div-id to a function (show) and then show loading image, which covers the entire div & then pass same div-idto another function (hide) and hide the loading image shown over the div. I am trying to create a generic solution here & not looking for something like this.

jQuery.ajaxSetup({
  beforeSend: function() {
     $('#loaderDiv').show();
  },
  complete: function(){
     $('#loaderDiv').hide();
  },
  success: function() {}
});

I want to show once loading icon per div. I don't want to show just one big div which covers the entire page. Please help.

Upvotes: 1

Views: 1061

Answers (1)

Steve0
Steve0

Reputation: 2253

Using a setting provided to $.ajax(url, [settings]) you can change the location of a loading div.

$.ajaxSetup({
    beforeSend: function(xhr, settings) {
        var $target = $(settings.targetSelector);
        var $loading = $('#loaderDiv');
        $loading.css($target.position());
        $loading.width($target.width());
        $loading.show();
    },
    complete: function() {
        $('#loaderDiv').hide();
    }
});

//then later in a button click or whatever
$.ajax('URL', {
    targetSelector: "#DIV_TO_OVERLAY"
});

https://jsfiddle.net/x3f8ntdv/

Upvotes: 3

Related Questions