Animation not showing when ajax request in pace.js

Question

In my website http://www.eventiame.com/publicar/ there's a form with several fields. When the page loads it shows the pace animation (it does some ajax request when loading so that's ok) but when I submit the form (I do it via ajax too) the animation doesn't appear. I tested uploading an image (so it would take longer) and still no animation is shown. I also tried changing the "async" parameter to true or false in the akax request but still no good.

Here's the specific code for the ajax call which is not working:

$.post('Sample.php,$(this).serialize(),function(data){
    $(target).html(data);
},'html');

same here it does not accept post request but it accept get request :) — Kavin, Jan 19 '15 at 12:03

score 6 · Answer 1 · answered Sep 14 '16 at 18:18

6

You may try this:

$(document).ajaxStart(function() { 
       Pace.restart(); 
});

I had this same problem and I found a solution in Pace issues section. Source

answered Sep 14 '16 at 18:18

evangelina

61
1
2

This should be added in the official documentation. Thanks for this easy solution! – Chris Feb 16 '21 at 20:18

score 5 · Answer 2 · answered Aug 30 '16 at 10:53

I hope my answer is not too late, but in case of those that might still need it, i had thesame issue also and i solved it.

By default, Pace will show any ajax requests which begin as a part of a normal or ajax-y page load, or which last longer than 500ms. your ajax request didnt trigger the pace because it's too soon.

1, Modify the Pace.js :

Find restartOnRequestAfterunder the defaultOptionsand change it to desire time (in milliseconds) value 5 ms.

  restartOnRequestAfter: 5,

2, Tracking:

By default, Pace will only track GET HTTP method, so add all other method you might need such as POST request.

ajax: {
  trackMethods: ['GET', 'POST', 'PUT', 'DELETE', 'REMOVE'],
  ...
}

SOURCE: http://github.hubspot.com/pace/

score 0 · Answer 3 · answered Jul 20 '15 at 18:51

0

You have a missing closing single quote, should be:

$.post('Sample.php', $(this).serialize(), function(data){
    $(target).html(data);
}, 'html');

answered Jul 20 '15 at 18:51

Gyrocode.com

57,606
14
150
185

Animation not showing when ajax request in pace.js

3 Answers3