Parallel form submit and ajax call

Question

I have a web page that invokes long request on the server. The request generates an excel file and stream it back to the client when it is ready.

The request is invoked by creating form element using jQuery and invoking the submit method.

I would like during the request is being processed to display the user with progress of the task.

I thought to do it using jQuery ajax call to service I have on the server that returns status messages.

My problem is that when I am calling this service (using $.ajax) The callback is being called only when the request intiated by the form submit ended.

Any suggestions ?

The code:

 <script>
     function dummyFunction(){       
                var notificationContextId = "someid";

                var url = $fdbUI.config.baseUrl() + "/Promis/GenerateExcel.aspx";

                var $form = $('<form action="' + url + '" method="POST" target="_blank"></form>');
                var $hidden = $("<input type='hidden' name='viewModel'/>");
                $hidden.val(self.toJSON());
                $hidden.appendTo($form);

                var $contextId = new $("<input type='hidden' name='notifyContextId'/>").val(notificationContextId);
                $contextId.appendTo($form);

                $('body').append($form);

                self.progressMessages([]);

                $fdbUI.notificationHelper.getNotifications(notificationContextId, function (message) {
                    var messageText = '';
                    if (message.IsEnded) {
                        messageText = "Excel is ready to download";
                    } else if (message.IsError) {
                        messageText = "An error occured while preparing excel file. Please try again...";
                    } else {
                        messageText = message.NotifyData;
                    }

                    self.progressMessages.push(messageText);
                });
                $form.submit();
       }
<script>

The code is using utility library that invokes the $.ajax. Its code is:

(function () { if (!window.flowdbUI) { throw ("missing reference to flowdb.ui.core."); }

function NotificationHelper() {
    var self = this;

    this.intervalId = null;

    this.getNotifications = function (contextId, fnCallback) {
        if ($.isFunction(fnCallback) == false)
            return;

        self.intervalId = setInterval(function() {
            self._startNotificationPolling(contextId, fnCallback);
        }, 500);

    };

    this._startNotificationPolling = function (contextId, fnCallback) {
        if (self._processing)
            return;

        self._processing = true;
        self._notificationPolling(contextId, function (result) {                
            if (result.success) {                    
                var message = result.retVal;
                if (message == null)
                    return;
                if (message.IsEnded || message.IsError) {
                    clearInterval(self.intervalId);
                }

                fnCallback(message);
            } else {
                clearInterval(self.intervalId);
                fnCallback({NotifyData:null, IsEnded:false, IsError:true});
            }
            self._processing = false;
        });
    };

    this._notificationPolling = function (contextId, fnCallback) {
        $fdbUI.core.executeAjax("NotificationProvider", { id: contextId }, function(result) {
            fnCallback(result);
        });
    };
    return this;
}

window.flowdbUI.notificationHelper = new NotificationHelper();
})();

Answer 1

By default, ASP.NET will only allow a single concurrent request per session, to avoid race conditions. So the server is not responding to your status requests until after the long-polling request is complete.

One possible approach would be to make your form post return immediately, and when the status request shows completion, start up a new request to get the data that it knows is waiting for it on the server.

Or you could try changing the EnableSessionState settings to allow multiple concurrent requests, as described here .