Updating v1.0.2 to v.1.2.3 - Some Ajax calls not completing

[euangordon]

Hi,

I have been using v1.0.2 for some time, but started noticing issues with Firefox keeping Pace.js running even after the page has loaded. I know this has been recorded and should be fixed in v1.2.3.

After upgrading to v1.2.3, I now see that some of my AJAX get calls are not working properly. The API gets hit and returns data, but I never get into the Ajax success or error. I can get it to fail consistently for some calls, but others to the same API work fine. So I wonder if it is larger datasets that are causing the issue?

Rolling back to v1.0.2 and my AJAX calls are back working but the FF issue persists.

My paceOptions:

paceOptions = { ajax: { trackMethods: ['GET', 'POST', 'DELETE', 'PUT', 'PATCH'], ignoreURLs: ['mouseflow', 'mainHub', '__browserLink', 'browserLinkSignalR', 'ServiceBusTopicHub', 'signalr'], trackWebSockets: false } }

In the below code, it sometimes never enters the success or error when using v1.2.3, but always works using v1.0.2

$.ajax({
        url: getAbsoluteUrl(' / ') + "api/AdminSections?vesselid=" + Vessel.ID,
        type: 'GET',
        dataType: 'json',
        success: function (folios) {
            console.log("Success");
            console.log(folios);
        },
        error: function (request, message, error) {
            console.error(message);
            handleException(request, message, error);
        }
    });

[mugnap]

Yes, this happens to me too.

[euangordon]

@mugnap Do you have any idea what causes it, any work around found? I will make a jsfiddle now

[mugnap]

No, I have no idea of the causes and unfortunately I did not have time to debug it, so I simply rolled back to previous version. -------- Messaggio originale --------Da: Euan Gordon notifications@github.comData: mer 16 dic 2020, 11:13A: CodeByZach/pace pace@noreply.github.comCc: mugnap paolo.mugnaini@gmail.com, Mention mention@noreply.github.comOggetto: Re: [CodeByZach/pace] Updating v1.0.2 to v.1.2.3 - Some Ajax calls not completing (#509) @mugnap Do you have any idea what causes it, any work around found? I will make a jsfiddle now

—You are receiving this because you were mentioned.Reply to this email directly, view it on GitHub, or unsubscribe.

[Arimov]

I confirm. I have the same problem. This code does not transfer control to saccess section:

 $.ajax({
                url: actionurl,
                type: 'post',
                dataType: 'json',
                data: $("#loginForm").serialize(),
                success: function (data) {
                    window.location.href = data.destinationUrl;
                },
                error: function (data) {
                    let errorMessage = "Error logging in";
                    try {
                        errorMessage = JSON.parse(data.responseJSON.error).error_description;
                    } catch{

                    }
                    errorToast(errorMessage, "Error logging in");
                }
            });

After returning to version 1.0.2 - everything works fine

[clementmoulin]

Having the same issue here. Really complicated to debug, since this does not happen each time (for the same event sometimes the success() callback is called, sometimes not...).

Revert to 1.0.2 : fine again !

[euangordon]

Having the same issue here. Really complicated to debug, since this does not happen each time (for the same event sometimes the success() callback is called, sometimes not...).

Revert to 1.0.2 : fine again !

I can get it to happen everytime, but I couldn't get a jsfiddle to connect to my API due to CORS :(

[hbtsmith]

I have the very same problem

[CodeByZach]

Having the same issue here. Really complicated to debug, since this does not happen each time (for the same event sometimes the success() callback is called, sometimes not...). Revert to 1.0.2 : fine again !

I can get it to happen everytime, but I couldn't get a jsfiddle to connect to my API due to CORS :(

Hi @euangordon,

Could you please elaborate on this? Would very much like to work on getting this resolved.

Thank you!

[PierreAronnax]

jQuery uses:

// Listen to events
xhr.onload = callback();

Which is completely overwritten by Pace:

    addEventListener = function(obj, event, callback) {
        return (typeof obj.addEventListener === "function" ? obj.addEventListener(event, callback, false) : void 0) || (obj["on" + event] = callback);
    };
...
    XHRRequestTracker = (function() {
...
                _ref2 = ['load', 'abort', 'timeout', 'error'];
                for (_j = 0, _len1 = _ref2.length; _j < _len1; _j++) {
                    event = _ref2[_j];
                    addEventListener(request, event, function() {
                        completeCallback(_this);
                        return _this.progress = 100;
                    }, false);
...
    })();

I have rewritten addEventListener to use Events when obj.addEventListener isn't available: The original event (when available) is first added to the list, and then one or more callbacks are added.

    addEventListener = function(obj, event, callback) {
        return (typeof obj.addEventListener === "function") ? obj.addEventListener(event, callback, false) : function() {
            if (typeof obj["on" + event] !== "function" || typeof obj["on" + event].eventListeners !== "object") {
                var eventListeners = new Events();
                if (typeof obj["on" + event] === "function") {
                    eventListeners.on(event, obj["on" + event]);
                }
                obj["on" + event] = function(evt) {
                    return eventListeners.trigger(event, evt);
                };
                obj["on" + event].eventListeners = eventListeners;
            } else {
                var eventListeners = obj["on" + event].eventListeners;
            }
            eventListeners.on(event, callback);
        }();
    };

I can create a pull-request if you want.

[CodeByZach]

Please do.

[PierreAronnax]

A few observations:

• obj.addEventListener returns undefined, therefore obj["on" + event] was overwritten also when obj.addEventListener is a function I'm not sure what the original intention was. It works just fine if I only call obj.addEventListener. I am not sure if my whole code is needed anymore.
• obj can be reused: obj.addEventListener is called multiple times on the same object and adding the same callback again This is not good and must be fixed. removeEventListener can't be used because callback is an anonymous function.
• obj can be reused, that's why I haven't created one obj.eventListeners to be shared between different events to avoid above problem

[PierreAronnax]

  I'm not sure what the original intention was. It works just fine if I only call obj.addEventListener. I am not sure if my whole code is needed anymore.

Found it: https://github.com/CodeByZach/pace/issues/230

[euangordon]

Hi All, Tried v1.2.4 and it seems to work just fine. Many thanks to @PierreAronnax

[fcorbeil]

Problem solved on my side too, thanks!

[Arimov]

Thanks for the good job. The new version (1.2.4) works fine for me!