CODEWITHSUNDEEP
javascriptjqueryhtmlcssajax
Undefined Variable
Undefined Variable

Reputation: 4267

Overlay layer shown for ajax calls but not when called without ajax

I have a "loading" overlay that I show when I make ajax calls. This works fine. The overlay is defined in css as:

.loading{
    position:fixed;
    z-index:1010;
    top:0;
    left:0;
    height:100%;
    width:100%;
    background: rgba( 255, 255, 255, .9 )
                url('http://url to image') 
                50% 50% 
                no-repeat;              
}

And it is called in a js function as 

function showLoading()
{
    $("#layer").addClass("loading"); 
}

Once the ajax call returns I call a hideLoading() which hides the layer. All this works fine.

Now I have a button on the click on which I do a client side process intensive calculation, at the end of which I load additional content into the DOM. This function is say calcDataPoints(). I want it so that when someone clicks the calc button, I show the overlay, do the calculation and update the DOM and then hide the overlay.

So I do:

showLoading();
calcDataPoints();
hideLoading();

The problem is that the overlay never gets rendered. It shows for a microsecond when the calc has "completed" and not "before". So it does not have the desired effect.

What am I doing incorrectly here? How can I have the overlay shown before the calc begins and close it once the calc is over and I have written data into the DOM?

Any pointers are greatly appreciated!

Upvotes: 3

Views: 212

Answers (1)

Hassan Ali Shahzad
Hassan Ali Shahzad

Reputation: 2724

call like that:

setTimeout(showLoading, 10);
setTimeout(calcDataPoints, 2000);
setTimeout(hideLoading, 2000);

In this way we can call function like asynchronously .

Upvotes: 1

Related Questions