Show a progress bar or block the UI till the file is generated server side

Question

I am working on producing a force directed layout (using d3.js http://bl.ocks.org/mbostock/raw/4062045/) on some data that I am pulling from a MS SQL server database. Currently I am generating the json file using a python script and then running it on the local server using python -m SimpleHTTPServer.

What I want to do is to create a link between my python script and the HTML such that when I type in the webaddress, the python script should run on the server side and generate the json file. During this I need to block the UI. When the file is generated, the graph should display itself on the screen. I can generate the graph and json files separately. Need to put them together with a blockui or progress bar(i think progress bar would be too much).

I am a noob to javascript and web development, kinda learning on the fly while creating my graph. Any guidance in this direction would be much appreciated.

Thanks,

Prateek

EDIT:

The snippet of the code as of now is as follows:

d3.json("json_data.json", function(error, graph) 
{

  var nodeMap = {};
  graph.nodes.forEach(function(x) { nodeMap[x.name] = x; });
  graph.links = graph.links.map(
  function(x) 
  {
    return {
        source: nodeMap[x.source],
        target: nodeMap[x.target],
        value: x.value
        };
  });

  force
       .nodes(graph.nodes)
      .links(graph.links)
      .start();

This code I will put in under the success section of the ajax request. I want the script to send the ajax request for a min to see for the existence of the json_data.json file on the server and to display the spinning wheel while the file is created if the time runs out there is the control transfer to the error section of the request.

The json file is simply as:

nodes: {}
links: {} //without any children level of depth.

You can't have a real progress bar (unless you do a bunch of extra work that isn't worth it). Would you be OK with just a spinning wheel or something like that? — GJK, Jul 09 '13 at 21:47
Yeah. That's why I said progress bar would be too much work..Spinning wheel would be good. Anything decent with which I can block the UI. — synaptikon, Jul 09 '13 at 22:52
You may want to reconsider your approach. Blocking the UI is ***not*** typically a good thing. — Dom, Jul 10 '13 at 00:10
http://www.malsup.com/jquery/block/#page. This is what I mean with blockUI. Since the data I am pulling from the MS SQL Server database is huge (over 50K rows), so I do not want the user to click anywhere else on the page while the code is rendering the graph. Could you elaborate why it wont be a good thing? — synaptikon, Jul 10 '13 at 00:30

score 1 · Accepted Answer · edited Dec 16 '13 at 11:33

1

If you are using jQuery, take a look at http://api.jquery.com/jQuery.ajax/ to see how to create your ajax request. You'll probably want to put the request at the beginning of the $(document).ready() function for your page. You can then use blockUI as you mentioned, blocking the page before you start the ajax call and then unblocking in the success and error (or complete) callbacks that you define in your ajax call. Something like the following:

$(document).ready(function() {
    $('body').blockUI();
    $.ajax({
        url: http://www.example.com/pathYouAreListeningOn,
        data: {
            "dataYouNeedToSend" : "Here"
        },
        success: function(result, status, xhr) {
            $('body').unblockUI();
            // Whatever you need to do to display your graph
        },
        error: function(xhr,status,error) {
            $('body').unblockUI();
        }
     });
});

Things to note are if your url the request is going to is the url of the page you are on, you don't need to include it, and if you don't have any data needed to be sent with the ajax request you can leave that off as well.

edited Dec 16 '13 at 11:33

BenMorel

34,448
50
182
322

answered Jul 09 '13 at 22:14

Jahorse

70
1
6

Thanks for your quick reply. In my case, success would be defined as the json file found on the server side (This would be the result of python script running successfully). But I do not know how to wrap this in the request though. I have th epython file doing just the processing, the html page and javascript that pulls the data from the json and displays it on the browser. so ideally http://www.example.com/index.html will exist always. Its the data.json file that I want to check for success or error. – synaptikon Jul 09 '13 at 23:15
I'm not sure what you mean by wrapping it in the request, do you mean the response? The success callback will always be called if your script returns something. The error callback will only be called if something goes wrong with the ajax call. You may want to look at how the json result is formed in the answer to this question: http://stackoverflow.com/questions/10721244/ajax-posting-to-python-cgi notice how the result from the python contains the success and a message, you probably want to do something similar. – Jahorse Jul 10 '13 at 16:20
Thank you Jahorse. That was exactly what I was looking for. – synaptikon Jul 12 '13 at 20:55

Show a progress bar or block the UI till the file is generated server side

1 Answers1