Is it possible to create progress bar with percentage for loading JSON data?

946 views
Skip to first unread message

tech...@gmail.com

unread,
Nov 26, 2012, 10:32:27 AM11/26/12
to ang...@googlegroups.com
Web applications sometimes needs to process a lot of data. If web application is in js, the logical format for data is JSON. The problem is that users are losing temper while page with a lot of JSON is loading. Is it at all possible to create a widget that reports on JSON download progress? I suspect that browsers just don't allow that, but it will be nice to know your opinion.

Mariano Simone

unread,
Dec 1, 2012, 12:51:09 PM12/1/12
to ang...@googlegroups.com, tech...@gmail.com
Yeah you can..

One of the solutions from the back of my head will be using a websocket connection. Sending the JSON documents in chunks along events reporting how much was transfered.

So, in the client side you listen on the socket for two events: data, which is the message containing a chunk of the json and progress which is an event from the backend reporting you how much is left to download.

of course, you can obtain the same results using normal ajax.

anatoly techtonik

unread,
Dec 3, 2012, 12:06:53 AM12/3/12
to Mariano Simone, ang...@googlegroups.com
Is it possible to do this without server-side modifications? Sphinx documentation generation tool builds a bunch of HTML files and a big JSON index for search, and it takes time while it is loaded on a slow connection.

--
anatoly t.

jamun...@gmail.com

unread,
Dec 20, 2012, 7:25:58 AM12/20/12
to ang...@googlegroups.com, tech...@gmail.com


Hi,
i added progress bar in that how can add the percentage completion because while converting a file it is taking more time.so i have to know the how much percentage is remaining and how much is loaded.
my code is looks like this....
   function jobs(){
      $.ajax({
                url:
                success: function (data) {
                        data = eval(data);
                        var statusImg='';
                        var jsName='';
                        var pid = '';
                        $.each(data, function (item) {
                                 ....................
                                ......................
                                if (item.status == "Running"){
                                        statusImg = '<img src="images/running.gif" alt="Running" />'                                                                 
                                }else if(item.status == "Completed"){
                                        statusImg = '<img src="images/completed.gif"  alt="Completed" />';
                                }else{
                                        statusImg = '<img src="images/failed.png" alt="Failed" />';
                                }
                              

Reply all
Reply to author
Forward
0 new messages