Ajax progress bar with a big list

Question

I have an ajax call that is grabbing a large json list. Is there any way I can make a progress bar that gets the real value of json load (for example a status bar that says 1 out of 200 loaded)?

Right now I have a pretty basic Ajax call

function SendAjax(urlMethod, jsonData, returnFunction) {
    $.ajax({
        type: "GET",
        contentType: "application/json; charset=utf-8",
        url: urlMethod,
        data: jsonData,
        dataType: "json",
        success: function (msg) {
            if (msg != null) {
                ReturnJson(msg);
            }
        },
        error: function (xhr, status, error) {
            // Boil the ASP.NET AJAX error down to JSON.

            var err = eval("(" + xhr.responseText + ")");

            // Display the specific error raised by the server
            alert(err.Message);
        }
    });
}

score 2 · Accepted Answer · edited May 23 '17 at 11:49

2

Try using AjaxStart on your application global scope. That means you can put the code in your layout file, and if the processing is long, it will show the progress indicator...

$(document).ajaxStart(function() {
   $( "#loading" ).show();
 });

You can see the example and answer at preload with percentage - javascript/jquery.

edited May 23 '17 at 11:49

Community

1
1

answered May 21 '13 at 05:01

thangchung

2,020
2
17
28

I may end up doing something like this. but was looking more for "77 items loaded" and count until they have all been loaded – datatest May 21 '13 at 12:01

score 1 · Answer 2 · answered May 21 '13 at 04:11

there are a few states in an ajax request, but they do not represent any percentage through the request.

The network traffic should really be your real problem, you do not want to send 200 separate requests (although this would allow for a progress bar, it would make the whole request take significantly longer, depending on your network connection to the server).

You are best off just showing an activity indicator and removing it when the request completes and try to optimise your code server side to return the 200 items as fast as possible.

If 200 items really is too big (larger than X seconds to return them), you could split it in half or quarters to show some progress however this will waste time with those extra requests on network, page headers, etc.

score 0 · Answer 3 · answered Oct 04 '13 at 00:01

If your server-side code has a way of sharing application state (such as the $_SESSION in PHP) you could make 2 separate requests, one that asks for the data, and one that checks on progress of the first request. Repeat the second request on a timer until the first completes, and update the $_SESSION (or whatever works in your server code) as each item is processed.

For example: The initial page must start a session, so that the subsequent AJAX calls have the cookie, and can access the shared data:

<?php
session_start();
session_write_close(); // close the session so other scripts can access the file (doesn't end the session)
// your page content here
?>

First AJAX Call to start the processing:

<?php
function updateSession($count){
    session_start(); // open the session file
    $_SESSION['progress'] = $count;
    session_write_close(); // let other requests access the session
}
// as you process each item, call the above function, ex:
for ($i = 1; $i <= 10; $i++) {
    updateSession($i);
}
?>

Second AJAX call (repeated every X seconds) looks like:

<?php
session_start(); // open the session file
echo @$_SESSION['progress'] or 0; // echo contents or 0 if not defined
session_write_close(); // let other requests access the session
?>

Sorry I don't know ASP.NET, but hopefully the above code is useful to you.

Ajax progress bar with a big list

3 Answers3