Call javascript function asynchronously to display overlay

Question

0.00/5 (No votes)

See more:

I have the following html layout

HTML

<div class='cm-body'>
<div class='cm-content'>
<div class='cm-item-list'>
<div class='cm-item'><span>somedata</span></div>
<div class='cm-item'><span>somedata</span></div>
<div class='cm-item'><span>somedata</span></div>
<div class='cm-item'><span>somedata</span></div>
</div>
</div>
<div class='cm-overlay'>
<div class='cm-overlay-content-wrapper'>
<div class='cm-overlay-image'><img src='path-to-preloader' class='cm-overlay-preloader-image'></div>
<div class='cm-overlay-text'><span class='cm-overlay-preloader-text'>Please wait Loading data....</span></div>
</div>
</div>
</div>

CSS

.cm-overlay{
display:none;
position:fixed;
width:0px;
height:0px;
}

.cm-overlay-hide {
display:none;
}

.cm-overlay-show{
display: block;
position: fixed;
top:0px;
left:0px;
bottom:0px;
right:0px;
opacity:0.8;
background-color: #c5c5c5;
z-index: 100;
width: 100%;
height: 100%;
}

.cm-overlay-content-wrapper{
background-color: #ffffff;
display: block;
position: relative;
min-width: 300px;
min-height: 300px;
margin: 0 auto;
width: 50%;
height: 50%;
top: 10%;
opacity:1;
}

.cm-overlay-image{
display: block;
position: relative;
margin: 0 auto;
height: 65%;
}

.cm-overlay-preloader-image{
display: block;
position: relative;
width: 125px;
top: 50px;
margin: 0 auto;
border:0px;
}

.cm-overlay-text{
display: block;
position: relative;
height: 35%;
}

.cm-overlay-preloader-text{
display: block;
position: relative;
text-align: center;
font-family: Oswald;
font-size: 30px;
}

I call this function to either hide or show the overlay on click. But since it is not getting displayed at all. I think it is because it is getting called on the same thread.

JavaScript

function toogle_overlay(isShown) 
{
   try 
   {
        var overlay = $(document).find('.cm-overlay');
        if (isShown != undefined && overlay != undefined) 
        {
           if (isShown === true) {
               $(overlay).addClass('cm-overlay-show').removeClass('cm-overlay-hide');
              }
              else
              {
               $(overlay).addClass('cm-overlay-hide').removeClass('cm-overlay-show');
              }
          }
        }
   catch (err) 
   {

   }
}

When i click on a button i want to show the overlay until the web service request succeeds. On success remove the overlay.
How do i achieve this?
Please advise.

What I have tried:

I have tried XMLHTTPRequest to call the js function asynchronously

Posted 18-Jan-17 0:52am

Christopher Fernandes

Updated 18-Jan-17 2:43am

Add a Solution

Comments

Christopher Fernandes 18-Jan-17 10:33am

The issue is that between overlay show and hide the function that gets called has a execution time of 0.015 milliseconds.
So the show and hide overlay toggle happens very fast.

Singh Deepika 18-Jan-17 23:47pm

For that, you could delay the calling of the function in your javascript or delay the hide and show of the overlay. Using the $().delay() method :-

Below is just a suggestion that you could try :-

if (isShown != undefined && overlay != undefined)
{
if (isShown === true) {
$(overlay).delay(5000).queue(function (next) {
$(overlay).addClass('cm-overlay-show').removeClass('cm-overlay-hide');
next();
});
}
else
{
$(overlay).delay(5000).queue(function (next) {
$(overlay).addClass('cm-overlay-hide').removeClass('cm-overlay-show');
next();
});
}
}

Christopher Fernandes 19-Jan-17 10:20am

I experimented with 200 items. It does not show at all

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Singh Deepika · Answer 1 · 2017-01-18T01:31:00

You could use "data-url" attribute of a div (HTML5). Provide the Url of your method which is retrieving data/page to be load in your div. Until the request is processed it will display the text - "loading..."

See below code for example :-
<pre><div id="Tab4" style="display: none;">
<div class="your_class" data-url="@Url.Action("Action_Name", "Controller_Name")">
Loading ...
</div>
</div></pre>

And on button click you can show and hide the div accordingly.

Note :- <pre>@Url.Action("Action_Name", "Controller_Name")</pre> is MVC related. I don't know the technology you are using for your method. You could simlply provide a url of your page instead of the above code.