Tips for displaying a refresh indicator while making an ajax call for refreshing data:

Question

Tips for displaying a refresh indicator while making an ajax call for refreshing data:

I have successfully implemented jQuery code that refreshes a specific div every 10 seconds without reloading the entire page. However, during this refresh process, the user does not visually perceive any changes happening in the browser.

While there are numerous examples available online, I am specifically looking to enhance my existing script by displaying a loading gif image while the data is being fetched during the 10-second refresh interval. I want the user to see a refreshing image like the one below:

.

Though this may seem straightforward, I have been unable to find relevant information on how to achieve this. Any suggestions or guidance on this matter would be highly appreciated.

Problem Statement:-

The following code snippet represents the div in my JSP file (dataInfo.jsp), where I aim to reload the container div every 10 seconds without having to reload the entire 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>

Below is the jquery script currently in use for loading the container div every 30 seconds, which is functioning correctly:

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

    });
</script>

Considering my earlier request, I am seeking a way to gray out the container div and display a refresh image during the ongoing refresh process. Once the refresh is completed, the normal content should reappear without the refresh image present.

Is it feasible to incorporate this feature into my current setup?

javascript jquery html css ajax

Answer 1

Answer №1

If you are utilizing JQuery already, this solution is perfect for your needs. You can employ the following code to establish a gray background and display a loading image.

// Implement a refresh function:
function refresh(){
    // SHOW overlay
    $('#overlay').show();
    // Fetch data:
    $.ajax({
        url: 'data.html',
        type: 'GET',
        success: function(data){
            // Extract only the container content on success
            var content =  $($.parseHTML(data)).filter(".container"); 
            // Replace content within the div
            $('.container').html(content);
            // HIDE the overlay:
            $('#overlay').hide();
        }
    });
}

$(document).ready(function(){
    // Create an overlay and append it to the 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 at intervals:
    setInterval(refresh, 1 * 1000);
});

I hope this information proves to be beneficial. Please remember to replace "img/loading.gif" with the appropriate path to your preferred gif file.

Here is the functioning code snippet: http://jsbin.com/zizudexo/1/edit

Answer 2

If you are utilizing JQuery already, this solution is perfect for your needs. You can employ the following code to establish a gray background and display a loading image.

// Implement a refresh function:
function refresh(){
    // SHOW overlay
    $('#overlay').show();
    // Fetch data:
    $.ajax({
        url: 'data.html',
        type: 'GET',
        success: function(data){
            // Extract only the container content on success
            var content =  $($.parseHTML(data)).filter(".container"); 
            // Replace content within the div
            $('.container').html(content);
            // HIDE the overlay:
            $('#overlay').hide();
        }
    });
}

$(document).ready(function(){
    // Create an overlay and append it to the 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 at intervals:
    setInterval(refresh, 1 * 1000);
});

I hope this information proves to be beneficial. Please remember to replace "img/loading.gif" with the appropriate path to your preferred gif file.

Here is the functioning code snippet: http://jsbin.com/zizudexo/1/edit

Answer 3

Answer №2

As you initiate the ajax request, make sure to insert a loading image into the results container.

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

To ensure it's displayed properly, apply this CSS rule:

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

Include position: relative; in the .container CSS.

Next, proceed with the ajax call:

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

Upon receiving the data, display it using the success function. The complete function will execute regardless of server errors or timeouts.

Answer 4

As you initiate the ajax request, make sure to insert a loading image into the results container.

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

To ensure it's displayed properly, apply this CSS rule:

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

Include position: relative; in the .container CSS.

Next, proceed with the ajax call:

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

Upon receiving the data, display it using the success function. The complete function will execute regardless of server errors or timeouts.

Answer 5

Answer №3

Have you checked out this: CodePen

In order to display a spinning refresh symbol, I utilized the

<i class="fa fa-refresh fa-spin"></i>

fontawesome icon... This method is effective in accomplishing your desired outcome...

Answer 6

Have you checked out this: CodePen

In order to display a spinning refresh symbol, I utilized the

<i class="fa fa-refresh fa-spin"></i>

fontawesome icon... This method is effective in accomplishing your desired outcome...

Tips for displaying a refresh indicator while making an ajax call for refreshing data:

Answer №1

Answer №2

Answer №3

Similar questions

Passing PHP Variables Between Pages

Reduce the use of if statements

Getting POST data in Next.js is a common task that requires understanding of how the

How can I convert base64 data to a specific file type using React Cropper JS?

When sorting in AngularJS using the orderBy filter, remember that string values should come before numeric values: for example, sort as follows (n/a, 0,

scrapy css last-child selector unable to target text

Using Python to fetch information from a web application

reveal a hidden div by sliding it during an onclick action

Managing paths for JavaScript and CSS scripts using Jquery Ajax for both direct and remote access

Repeated firing of jQuery's Ajaxstop within a click event

How to trigger an Angular JS route without loading a view

Using the Match() function with an array of objects

Showing the json encoded array received from an ajax response

Bourbon encountering difficulty with font-face mixin in Rails version 3.2.2

Guide for creating a scroll-triggered rotation animation using only JavaScript

The CORS policy is preventing the AJAX request from functioning properly on localhost

The variable X has been defined, but it's never actually utilized. Despite declaring it, I have not accessed its

Capture and save video footage from Scriptcam's webcam recording feature

What is the best method for creating an HTML table using a JSON object?

What is the process for uploading images in the backend of a Next.js API?