Ajax requests with progress bar

Question

I have a page with a html button. As soon as a user clicks on this button, an ajax call is invoked and a counter is incremented server-side. For testing reasons the counter is incremented until the value of 170.

function StartCounter() {
//call back function
var intervalID = setInterval(updateProgress, 250);

$.ajax({
    url: "ProjectPreparation.aspx/MoveToPlannedClients",
    data: "",
    type: "POST",
    contentType: "application/json; charset=utf-8",
    dataType: "json",
    async: true,
    success: function (result) {
        clearInterval(intervalID);
    },
    error: function (xhr, status) {
        clearInterval(intervalID);
    }
});
return false;
}

What I want to achieve is to display the progression of the server side counter. Therefore I call a method called "updateProgress()" which also makes an ajax call every 250 ms to get the current value of the counter.

function updateProgress() {
$.ajax({
    type: "POST",
    url: "ProjectPreparation.aspx/ProgressState",
    data: "{}",
    contentType: "application/json; charset=utf-8",
    dataType: "json",
    async: true,
    success: function (msg) {
     alert("The current value of the counter is" + msg.d);
    }
});
}

Now the problem is that the multiple ajax calls of updateProgress() return after the ajax call of StartCounter() has finished. I.e. the alert window only shows the final result of the counter and not the intermediate values.

Here is the server-side asp.net method that should return the current progression:

    /// <summary>
    /// Callback function to get 
    /// current progress state
    [WebMethod]
    public static int ProgressState()
    {
        return CurrentValue;
    }

And here is the counter method:

  [WebMethod]
  public static void MoveToPlannedClients()
  {
     CurrentValue++;
     Thread.Sleep(500); //To slow things down a bit
  }

Any help is very appreciated.

Did you try to use http://github.hubspot.com/pace/docs/welcome/ ? — rad11, Jun 12 '17 at 10:30
Look here maybe it will help you: https://stackoverflow.com/questions/38769659/codeigniter-view-show-progress/38770090#38770090 — rad11, Jun 12 '17 at 11:22
That's nice, thanks rad11. For me the code of the other topic looks structurally the same, maybe it has something to do with the server-side technology... — enne87, Jun 12 '17 at 11:34

score 0 · Answer 1 · answered Jun 12 '17 at 13:26

The problem I've experienced here is called "Session State Blocking". This blocking enforces ajax calls to be called synchronously. This is a mechanism to prevent screwing up the session if multiple users with the same session id access it.

In ASP.NET I set EnableSessionState to "ReadOnly" which solved the problem.

Have a look at this article for further information.

Ajax requests with progress bar

1 Answers1