CODEWITHSUNDEEP
javascriptjqueryhtmlcssajax
eoozesgg
eoozesgg

Reputation: 55

Overlay div block with the image while AJAX loading

I know this is easy task and very common, but I cannot figure out how to do this ! It seems five minute task, but I have spent more than an hour... I am stupid I know.
But nevertheless, please help me to implement this.
I have div container block 

<div class="wrapper_div">
//some other divs here
    </div>

And CSS style 

.wrapper_div{

    margin: auto;

    width: 1000px;

    height: 545px;

}

Looks very simple, but I cannot overlay this div when making AJAX request.
I need to simply show loader animation (gif) at the center of this div block and overlay this block with grey background for instance.
That's all what I want, please help. Thank you

EDIT

Sorry for such explanation, the problem is not in AJAX but in css and html layout, I cannot figure out how to create correct layout

Upvotes: 4

Views: 13570

Answers (2)

CDelaney
CDelaney

Reputation: 1248

You don't have enough detail about your ajax request to give a thorough solution, but maybe this will help. I'm just using a timeout to simulate the request, and setting the overlay display to '' before the timeout, and back to 'none' afterwards.

plnkr

<div>
  <span>My Content</span>
  <button onclick="submitForm()">Submit</button>
</div>
<div id="overlay" style="display: none;"></div>

#overlay {
  background: blue;
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0px;
  left: 0px;
  opacity: 0.2;
}

Upvotes: 1

Bryan Mudge
Bryan Mudge

Reputation: 432

When your ajax makes a request you have the 'beforeSend' option. You can either have it load your overlay div and hide it on the 'complete' option for the ajax.

    $.ajax({

    url: "/Home/SomeThing",
    data: {name: name},
    error: function () {

    },
    beforeSend: function () { ShowLoadingScreen(); }, // <Show OverLay

    success: function (data)        
        $('#UnitAjaxDump').html(data);
    },
    type: 'GET',
    complete: function () { HideLoadingScreen(); } //<Hide Overlay

In your css you need your overlay to either have an absoute position or fixed as well:

#overlay{
   position: fixed;
top:50%;
left:50%;
width:500px;
height:500px;
margin-left:-250px;
margin-top:-250px;
background: somebackground;
}

Upvotes: 3

Related Questions