1

I have looked at several similar questions before, and none of them match the situation I'm having. I have two div blocks that look like this:

#container {
  width: 800px;
  height: 600px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; 
  color: #fff;
}
.status {
  height: 100px;
  width: 100px;
  background: #efefef;
  margin-left: 2px;
  border: 1px solid #ccc;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  border-radius: 3px;
}
.online {
  background: #8BC34A; 
}
.offline {
  background: #e53935;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">'
  <div id="loading"><img src="http://i.stack.imgur.com/KZ3Hi.gif" style="display: none;" /></div>
  <div id="user1" class="status"><span>user1</span></div>
  <div id="user2" class="status"><span>user2</span></div>
</div>

result.php returns the status in the following format:

{ "user1": "online", "user2" : "offline" }

I want to display this gif on each div while the request completes. This is what I've tried:

$(document).ready(function(){
    setInterval(function(){ 
        $.get("result.php", function(data){
            $('#loading').delay(3000).fadeOut();
            var obj = jQuery.parseJSON(data);
            user1_status = 'status ' +  obj['user1'];
            user2_status = 'status ' + obj['user2'];
            $("#user1").attr("class", user1_status);
            $("#user2").attr("class", user2_status);
        }); 
    }, 1000);
});

But this just shows the loading.gif on the very first load ALONG SIDE the divs. I want the gif to be shown as an overlay (or instead of the div), one for each div, while the request is being processed. I need the gif displayed only if the status is different from what it was before. That is, if the status changes from offline to online or vice versa, display the loading gif, else just show the div as it is.

What do I need to change?

Joseph John
  • 510
  • 1
  • 4
  • 20
  • (I've also tried jQuery.load, but then result.php would have to return the HTML markup instead of JSON - I don't want that.) – Joseph John Jun 01 '15 at 09:20
  • have you tried `jQuery.ajax`? its more flexible than both `.load` and `.get` – roullie Jun 01 '15 at 09:21
  • @roullie: Nope, I was under the impression that `.load` is same as `.ajax` with some less important stuff removed. Could you explain how? – Joseph John Jun 01 '15 at 09:25
  • I believe the answer from [this][1] question might help [1]: http://stackoverflow.com/a/68503/4958977 – cmd430 Jun 01 '15 at 09:28
  • OVER the divs instead of ASIDE? Well, just set them to `position:absolute` – Jeremy Thille Jun 01 '15 at 09:33
  • I'd much prefer the gifs being replaced by the divs entirely, if that's possible. If that's not possible, then a gif overlay while the request is being processed would also be fine. – Joseph John Jun 01 '15 at 09:39

1 Answers1

0

you can use jquery ajax call

// start your loading gif $('#loading').start();

$.ajax({
    type: "GET",
    url: 'result.php',
    success: function(data)
    {   // loading ends
         $('#loading').fadeOut();
    },error: function (error)
    {   
        // loading ends 
        $('#loading').fadeOut();
    } 
});
MyTwoCents
  • 6,028
  • 3
  • 18
  • 41
  • I'm not sure you understand. The gif needs to be positioned correctly, covering the div. There needs to be two gifs, and it should only be displayed when there's change in the status (i.e. if it changes from online to offline or vice versa). – Joseph John Jun 01 '15 at 09:38