Pace doesn't fire while posting formData with an image?

[nickforddev]

I have pace set up normally, it definitely works for initial page load and ajax 'GET' requests.

However, when posting a form with ajax that has an image in it, pace does not fire. While the data is being sent to the server, the status of the POST is pending... When it finishes it becomes a 200. This whole time pace just sits with the .pace-inactive class. The images and form data are successfully saved.

Here's the jquery I'm posting the form with:

var formData = new FormData(form);
$.ajax({
    type: 'POST',
    contentType: false,
    processData: false,
    url: url,
    data: formData
});

I am able to successfully catch the start and end events I want using this jquery:

$(document).ajaxStart(function() {
    $('body').addClass('loading');
});
$(document).ajaxStop(function() {
    $('body').removeClass('loading');
});

Is pace.js meant to track data that is being uploaded during a POST?

[thomasbratt]

@nickforddesign I have the same problem with POST requests. I'm assuming that pace does not show a progress bar for POST.

I'm using the following workaround with jQuery:

    $(id).on('click', function(e){
        Pace.track(function(){
            $.post(pathToPost);
        });
    });

[ghost]

Pace works with POST request. I edited pace.js and added track method ["POST"] it works.

Open Pace.js and find ["GET"] replace it with ["GET","POST"] after it will accept all post request 👍

[Friss]

You can choose what pace tracks by setting the options. By default pace only tracks GET requests.

paceOptions = {
   ajax: {
         trackMethods: ['GET', 'POST', 'DELETE', 'PUT', 'PATCH']
   }
}

[ghost]

@Friss it did not work. :(

i don't know why but after edit Pace.js file it works.

[Friss]

@rajlaksh did you declare that variable before including the pace.js file? Because that would explain it not working.

[ghost]

@Friss i tried that method before editing. It not work.

I placed my pace.js before declare. so it won't give any error. if i added it before pace.js it will return error.

That method didn't work so i edit pace.js and Happy 👍

[lvarayut]

@Friss Thanks. It worked like a charm.

[clayzermk1]

@Friss just what I was looking for! Thank you!
source documentation for ajax.trackMethods

[Siisi]

How do i set up pace for a normal form not ajax - this form accepts an address and process information about the address on another page. after the form is clicked it takes a significant amount of time for the results to come but the pace comes only for 1 second after the results page shows