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');

Answer 1

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 restartOnRequestAfter under the defaultOptions and 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/

Answer 2

You may try this:

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

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

Answer 3

You have a missing closing single quote, should be:

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