More than One Ajax Call

Looking at implementing a progressbar for a process but code needs to find the line count of a file over the web (no problem) to set the bars max property but need update polling for the value all while processing the main request.

Question: can I have the main ajax process and two parallel ajax processes at the same time?

Hey.
In general I do not think Ajax aka javascript supports multi processing but there are some examples I have seen some time ago trying to "emulate" that. I haven't tried so I can't tell for sure.
However you can play with "async" . This will wait for script execution or not wait for script execution, continuing, accordingly.
But, again by some examples (on stack overflow if memory serves) you won't use the async command...Ahh ok found it https://stackoverflow.com/questions/...s-using-jquery

If something suits you over there....Looks complicated to me. If I wanted to have something update, I would use "async" and check the ajax call periodically with a timer. But this requires testing as async created some "peculiar" issues to me when I trying to create some html data templates.
I don't think I can be of more help as I haven't trying parallel emulation.

No ajax doesn't support multiple async calls but looks like they now have Async.js project. However I cant introduce a new dependency to the project so I will try a variation to the one you linked.

Yehuda's post looks most promising to try to implement.

One call to get the streams line count. then another call to invoke the process. A third call to poll the process with a progress counter. Still just two calls are the ones that need to be async as the first to find the progressbars max needs to be done first.

Code:

---

var done = 4; // number of total requests
var sum = 0;

/* Normal loops don't create a new scope */
$([1,2,3,4,5]).each(function() {
  var number = this;
  $.getJSON("/values/" + number, function(data) {
    sum += data.value;
    done -= 1;
    if(done == 0) $("#mynode").html(sum);
  });
});

---

I make dozens of AJAX calls all at the same time when my page first loads.

They all come back at different times. They are async after all!

When I start a report with an AJAX call - one that is going to take a long time - I have that "thread" fill some APP common memory with progress (page count).

The web page that made that report-AJAX-call then makes more AJAX calls for page-progress.

That sounds like exactly what you want to do...

Quote:

---

Originally Posted by sapator

Ahh ok found it https://stackoverflow.com/questions/...s-using-jquery

---

Yehuda Katz - jQuery hero to us all - actually posted in that link - and that's the code RobDog picked up.

And what a neat trick to run .Each on a silly little ARRAY!

Code:

---

var done = 4; // number of total requests
var sum = 0;

/* Normal loops don't create a new scope */
$([1,2,3,4,5]).each(function() {
  var number = this;
  $.getJSON("/values/" + number, function(data) {
    sum += data.value;
    done -= 1;
    if(done == 0) $("#mynode").html(sum);
  });
});

---

Quote:

---

Originally Posted by szlamany

I make dozens of AJAX calls all at the same time when my page first loads.

They all come back at different times. They are async after all!

When I start a report with an AJAX call - one that is going to take a long time - I have that "thread" fill some APP common memory with progress (page count).

The web page that made that report-AJAX-call then makes more AJAX calls for page-progress.

That sounds like exactly what you want to do...

---

Yea I remembered yesterday of doing something similar on GYF to show the upload progress of videos. PG and I had it using APC and making several calls to get the status.

If I cant get Yehuda's code to work for my situation I have another thought. Instead of kicking off the process as a whole I may be able to chunk it out. Send one call for the line count, another for 1-50 records and when that comes back another for 51-100 etc. Thoughts?

Chunking it out seems like a lot of work.

Your initial AJAX call - the long running one - what is capturing that request on the backend? A web method? Are you running standard VB.Net under IIS?

Sorry its MVC 5. The Controller method receives the ajax call and then sends it out to the Model and other classes

Those words mean nothing to me :)

Does MVC 5 take away the ability for you to work your own code into the back end?

No I can do whatever I want. Its the Controller procedure that I point the ajax call to call. After that its the "design" of MVC to process database and data calls to the Model.

As long as I can get the calls to call a "status" procedure on the Controller and have that procedure provide the current updated values I need it should work.

This is what I "was" using to poll the Controller for a status but it wasn't being called until after the primary ajax call was complete making this useless

Code:

---

        (function poll() {
            myTimeout = setTimeout(function () {
                console.log("poll");
                $.ajax({
                    url: "/Setting/Status/", success: function (data) {
                        if (prb2 != undefined) {
                            prb2.max = data.max;
                            prbValue = data.value;
                            prb2.value(prbValue);
                            console.log("data.value: " + prb2.value);
                            console.log("data.max: " + prb2.max);
                        }
                        //Setup the next poll recursively
                        if (isUpdating)
                        {
                            poll();
                        }
                        else
                        {
                            clearTimeout(myTimeout)
                        }
                    }, dataType: "json"
                });
            }, 750);
        })();

---

Ok - this CLASS manages APPLICATION wide message "storage" so that I can retain and share BACK END info from one AJAX call to another.

Code:

---

Public Class ApplicationMessage
    Private am_httpContext As System.Web.HttpContext
    Private am_sGuid As String
    Private am_appMsgType As String
    Private am_suppressMS As Integer = 0
    Private am_startTime As DateTime = Nothing
    Sub New(appMsgType As String, httpContext As System.Web.HttpContext, sGuid As String, initMessage As String)
        am_httpContext = httpContext
        am_sGuid = sGuid
        am_appMsgType = appMsgType
        am_startTime = Date.Now
        am_suppressMS = 0
        With am_httpContext.Application
            .Lock()
            .Add(am_appMsgType & ":" + am_sGuid, initMessage)
            .UnLock()
            Debug.Print(am_appMsgType & ": " & initMessage & " " & am_startTime.ToString())
        End With
    End Sub
    Public Function SendMessage(amMessage As String, Optional amOverride As Boolean = False) As Boolean
        Dim nowTime As DateTime = DateTime.Now
        Dim msDiff As TimeSpan = nowTime - am_startTime
        If Not amOverride AndAlso am_suppressMS > 0 AndAlso msDiff.TotalMilliseconds < am_suppressMS Then
            Debug.Print(am_appMsgType & ": " & amMessage & " " & Date.Now.ToString() & "** suppressed")
        Else
            With am_httpContext.Application
                .Lock()
                .Item(am_appMsgType & ":" + am_sGuid) = amMessage
                Debug.Print(am_appMsgType & ": " & amMessage & " " & Date.Now.ToString())
                .UnLock()
            End With
            am_startTime = nowTime
        End If
        Return True
    End Function
    Public Function SetSuppressMS(amSuppress As Integer) As Integer
        am_suppressMS = amSuppress
        Return am_suppressMS
    End Function
End Class

---

And it's used like this:

Code:

---

    Private _httpContext As System.Web.HttpContext
    Private _sGuid As String
    Private _rptMsg As ApplicationMessage

.
.
.
    Sub New(httpContext As System.Web.HttpContext, sGuid As String)
        _TIFFMode = False
        _httpContext = httpContext
        _sGuid = sGuid
        _rptMsg = New ApplicationMessage("acsReport", _httpContext, _sGuid, "Initiated")
    End Sub

---

The _sGuid string is important - this is what identifies the "web user" that is hitting the backend so that I can have MULTIPLE users running reports and each one getting messages about page count progress for just themselves. This SUB NEW is in the REPORT creation class.

This code is executed at the start of the report creation process

Code:

---

_rptMsg.SendMessage("PrintReport:Started")

---

This code as I spit out pages

Code:

---

page = document.AddPage
prtAddPage += 1
_rptMsg.SendMessage("PrintReport:Pages Completed: " + prtAddPage.ToString())
_rptMsg.SetSuppressMS(1000)

---

And this code when the report is done:

Code:

---

_rptMsg.SendMessage("PrintReport:Report Completed", True)

---

All the while that this report AJAX call is running I am making new AJAX calls to get this information.

The backend code looks like this:

Code:

---

            If ctrloption = "acscheck" Then
                Dim strMessageText As String = ""
                With Application
                    .Lock()
                    strMessageText = .Item("acsReport:" + sguid).ToString()
                    Debug.WriteLine(strMessageText & " " & Date.Now.ToString())
                    .UnLock()
                End With
                .NewObject("acscheck", True)
                .Seperate()
                .NewObject("messagetext", strMessageText)
                .Seperate()
                strMessage = "acsCheck Done"
            End If

---

And that piece of code is reach through AJAX calls that look like this in JavaScript. Note that this is where the INITIAL call to run the REPORT is also contained. I wait 1000 MS before making the initial "check" progress call.

Code:

---

        function printStart(rptSproc, ctrlval1, ctrlval2, ctrlval3, strCT, source) {
            ctrlWebService(rptSproc, ctrlval1, ctrlval2, ctrlval3, strCT, source);
            g_printCycle = 1000;
            setTimeout(function () {
                ctrlWebService("acscheck", "", "", "", strCT, []);
            }, g_printCycle);
        }

---

And when this first ACSCHECK returns it sets up a cascade of additional calls until the report is done

Code:

---

if (objReturn.acscheck) {
                    strData = objReturn.messagetext;
                    if (strData.substr(0, 12) == "PrintReport:") {
                        strData = strData.substr(12);
                    }
                    wesAWC = $(".acs-print-menu");
                    wesAWC.find('.acs-print-title').html('<br /><br />' + strData);
                    wesAWC.find('.acs-print-list').html('');
                    if (g_printOn) {
                        if (g_printCycle < 3000) {
                            g_printCycle += 500;
                        }
                        setTimeout(function () {
                            ctrlWebService("acscheck", "", "", "", "", []);
                        }, g_printCycle);
                    } else {
                        printMenuClear(sender);
                    }

---

So with the setTimeout call you are executing a webservice call and not an actual ajax call or it doesn't make a difference?

That JS function - ctrlWebService - is my function that does the AJAX call ehe web service. It is in a SETTIMEOUT so I can have it run AFTER the function that is starting the report.

Code:

---

        function ctrlWebService(strOpt, strVal1, strVal2, strVal3, strId, source, extra) {
            var newId = "";
            var objWebParam = {};
            var wesId = [];
            objWebParam.username = window.username || "";
            objWebParam.ctrloption = strOpt;
            objWebParam.ctrlval1 = strVal1;
            objWebParam.ctrlval2 = strVal2;
            objWebParam.ctrlval3 = strVal3;
            objWebParam.ctrlextra = extra || {};
            objWebParam.sguid = window.bootguid || "";
.
.
.
            objWebParam.source = source || [];
            var strWebParam = $.toJSON(objWebParam);
            $.ajax({
                type: "POST",
                url: "WebService.asmx/CtrlService",
                dataType: "json",
                data: strWebParam,
                contentType: "application/json; charset=utf-8",
                success: function(msg) {
                    ajaxCtrlFinished(msg, strId, "success", objWebParam);
                },
                failure: function(msg) {
                    ajaxCtrlFinished(msg, strId, "failure", objWebParam);
                },
                error: function(msg) {
                    ajaxCtrlFinished(msg, strId, "error", objWebParam);
                }
            });
        }

---

and in the webservice.vb file I have this method

Code:

---

    <WebMethod()> _
    <ScriptMethod(ResponseFormat:=ResponseFormat.Json, UseHttpGet:=False)> _
    Public Function CtrlService(ByVal ctrloption As String, ByVal ctrlval1 As String _
                                        , ByVal ctrlval2 As String _
                                        , ByVal ctrlval3 As String _
                                        , ByVal ctrlextra As Dictionary(Of String, String) _
                                        , ByVal username As String _
                                        , ByVal sguid As String _
                                        , ByVal source As IList(Of Dictionary(Of String, String))) As String

---

It's a GENERIC web method - I have specific ones for ADD, DELETE and all the other CRUD stuff I might do. This web method is a catch all - the CTRLOPTION string tells it what to process...

Hmm just realized I need the two ajax calls but the second one needs to be recursive. I don't think the poll function call will run more than once?
The Status function call will have the recursive call every 3/4 second. Doesn't look like that will happen in parallel correct?

Code:

---

        var done = 2; //number of total requests (methods?)
        var sum = 0;
        $(["Update", "Status"]).each(function () {
            var method = this;
            $.getJSON("/Setting/" + method, function (data) {
                sum += data.value;
                done -= 1;
                if (done == 0) $("#mynode").html(sum);
            });
        });

---

Quote:

---

Originally Posted by RobDog888

Hmm just realized I need the two ajax calls but the second one needs to be recursive. I don't think the poll function call will run more than once?
The Status function call will have the recursive call every 3/4 second. Doesn't look like that will happen in parallel correct?

---

Exactly what my code does - I copied the last two code snippets from the bigger post above

This JS function starts the report - it does TWO AJAX posts - one immediately and one setup in a 1000MS timer...

Code:

---

        function printStart(rptSproc, ctrlval1, ctrlval2, ctrlval3, strCT, source) {
            ctrlWebService(rptSproc, ctrlval1, ctrlval2, ctrlval3, strCT, source);
            g_printCycle = 1000;
            setTimeout(function () {
                ctrlWebService("acscheck", "", "", "", strCT, []);
            }, g_printCycle);
        }

---

The first AJAX call above might take many seconds to complete. The second call runs instantly and it's call back function in JS prints the returned message (number of pages completed) and does another SET TIMEOUT to run the same AJAX POST again. That cycle continues until the report is completed - see below.

Code:

---

if (objReturn.acscheck) {
                    strData = objReturn.messagetext;
                    if (strData.substr(0, 12) == "PrintReport:") {
                        strData = strData.substr(12);
                    }
                    wesAWC = $(".acs-print-menu");
                    wesAWC.find('.acs-print-title').html('<br /><br />' + strData);
                    wesAWC.find('.acs-print-list').html('');
                    if (g_printOn) {
                        if (g_printCycle < 3000) {
                            g_printCycle += 500;
                        }
                        setTimeout(function () {
                            ctrlWebService("acscheck", "", "", "", "", []);
                        }, g_printCycle);
                    } else {
                        printMenuClear(sender);
                    }

---