CODEWITHSUNDEEP
javascriptjqueryhtmlcssajax
AKIWEB
AKIWEB

Reputation: 19612

How to show refresh indicator during an ajax refresh call?

I have some jQuery code working that reloads the div every 10 seconds without reloading the whole page. However, right at the moment, the user doesn't see anything happen on the browser when the refresh is happening.

I know there are thousands of examples on the internet, but I want for the script I already have to display a loading gif image while the data is retrieved when the refresh is happening every 10 seconds for me, user should see some refresh image like this -

enter image description here.

I'm sure this is probably easy, but I can't find any info on how to do it. Any help or pointers would be greatly appreciated.

Problem Statement:-

Below is my div in my JSP file (dataInfo.jsp) and I am reloading the div container every 10 seconds without reloading the full page.

<body>
    <div id='headerDivDash'>
        <h1 id='topHeaderDash'>
          <!-- some image here -->
        </h1>
    </div>
    <div id="vertical-list" style='display: block; list-style-type: none;'>
        <ul class="resp-tabs-list">
            <a href="_blank"><li>Test 1</li></a>
            <br />
            <a href="_blank"><li>Test 2</li></a>
        </ul>
    </div>

    <!-- just need to reload this div, other div should be intact without getting appended -->
    <div class="container">

    </div>
    <div class="footer">Some Value Here</div>
</body>

Now below is the jquery script I am using to load the div container every 30 seconds and it works fine.

<script type="text/javascript">
    $(document).ready(function(){
        var auto_refresh = setInterval(
        function ()
        {
        $('.container').html('');
        $('.container').load('dataInfo.jsp .container').fadeIn("slow");
        }, 10 * 1000);

    });
</script>

Now as I mentioned above, as soon as the refresh is going to happen, I would like to grey out the container div and show refresh image as shown above and as soon as the refresh is done, then show the normal result and then the refresh image will also be gone..

Is this possible to do in my current example?

Upvotes: 0

Views: 3760

Answers (3)

adearriba
adearriba

Reputation: 503

I see you are already using JQuery so this answer will suit you well. You can use this code to create the gray background and show the loading image.

// Create a refresh function:
function refresh(){
    // SHOW overlay
    $('#overlay').show();
    // Retrieve data:
    $.ajax({
        url: 'data.html',
        type: 'GET',
        success: function(data){
            // onSuccess take only the container content
            var content =  $($.parseHTML(data)).filter(".container"); 
            //Replace content inside the div
            $('.container').html(content);
            // HIDE the overlay:
            $('#overlay').hide();
        }
    });
}

$(document).ready(function(){
    // Create overlay and append to body:
    $('<div id="overlay"/>').css({
        position: 'fixed',
        top: 0,
        left: 0,
        width: '100%',
        height: $(window).height() + 'px',
        opacity:0.4, 
        background: 'lightgray url(http://bradsknutson.com/wp-content/uploads/2013/04/page-loader.gif) no-repeat center'
    }).hide().appendTo('body');

    // Execute refresh with interval:
    setInterval(refresh, 1 * 1000);
});

Hope this help you. Note: Replace "img/loading.gif" with the route to the gif you want to use.

Here you go with the code working: http://jsbin.com/zizudexo/1/edit

Upvotes: 4

Siva
Siva

Reputation: 386

Can you look at this: jsFiddle

I used <i class="fa fa-refresh fa-spin"></i> fontawesome icon to show refresh symbol... This is one of the ways to achieve what you want...

Upvotes: 1

L&#225;szl&#243;
L&#225;szl&#243;

Reputation: 872

When you start the ajax request, place the loading image on the results container.

$('<div id="ajaxLoad"></div>').appendTo('.container');

Add this CSS rule, to display it correctly:

#ajaxLoad {
    position: absoulte;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: 0.5;
    background: silver url(my_image.png) no-repeat center center;
    z-index: 1000;
}

Add a position: relative; to the .container.

Then you can start the ajax call:

$.ajax({
    type: "GET",
    url: "dataInfo.jsp",
    success: function(data) {
        $('.container').html(data).fadeIn("slow");
    },
    complete: function() {
        $('#ajaxLoad').remove();
    }
});

When the data arrives display it, thats what success does. The complete runs even when the server returns an error code or your query times out.

Upvotes: 2

Related Questions