animation not showing when ajax request

[vnportnoy]

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: submitHandler: function(form) { var urlPost = "../data/shops/add.php"; var postData = new FormData(form); $.ajax( { type:"POST", async: false, contentType: false, processData: false, cache: false, url: urlPost, data: postData , dataType:"json", //crossDomain: true, success: function(result) { if (result.Status) { alert(result.Message); if (result.Status == "OK") { location.reload(); } } console.log(result); }, error: function(data) { if (result.Status) { alert(result.Message); } console.log(data); } });

        }

[HelloCui]

My $.get or $.post do not trigger the pace too, even I use track. I have set the

paceOptions = {
  ajax: {
    trackMethods: ['GET', 'POST']
  }
};

but nothing change. When I set a pushState after ajax response the pace will show. But I think that's the pushState trigger it, not ajax. Because if I set the restartOnPushState false the pace lost. My pace version is 0.5.1 and jQuery is 2.1.0 I hope someone can help us. thx!

[HelloCui]

I think I get the point. "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." It's from the doc: http://github.hubspot.com/pace/ The normal ajax do not trigger the pace because it's too soon. I setTimeout in my server and the pace show. Maybe you got the same problem. I hope it can help you.

[JBNavadiya]

Remove data type: json and try it again On 11-Apr-2014 10:36 PM, "vnportnoy" notifications@github.com wrote:

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: submitHandler: function(form) { var urlPost = "../data/shops/add.php"; var postData = new FormData(form); $.ajax( { type:"POST", async: false, contentType: false, processData: false, cache: false, url: urlPost, data: postData , dataType:"json", //crossDomain: true, success: function(result) { if (result.Status) { alert(result.Message); if (result.Status == "OK") { location.reload(); } } console.log(result); }, error: function(data) { if (result.Status) { alert(result.Message); } console.log(data); } });

    }

— Reply to this email directly or view it on GitHubhttps://github.com/HubSpot/pace/issues/114 .

[vnportnoy]

Thanks for both comments but none fixed my problem. I tried uploaded several files (so it would take long beyond the 500 ms) and still nothing. Also deleting the "dataType" didn't change anything.

I read some places saying that Pace works only until the page is loaded, not with ajax requests after that. Is that true? After reading the documentation I haven't seen that written anywhere.

Thanks!

[mafar]

yes same with me .. doesnot show on all ajax requests .. only shows once at page load, then nothing on all ajax requests

[dan2k3k4]

pace not working for $.ajax calls (GET and POST), but works for when I first load the page.

I've tried different pace settings but couldn't find any that worked for my "ajax page navigation" calls

[tector]

"JBNavadiya commented on Apr 24 Remove data type: json and try it again"

@JBNavadiya: what should that help? i want to use pace.js for ajax requests that return json...

[vnportnoy]

We know there's a 500 ms limit and that's reasonable, it is not the issue we are discussing here.

[vnportnoy]

As you already saw in previous comments people have suggested the 500 ms issue as the solution which of course didnt solve it because that is not the problem. The requests work with Pace ONLY on the page load. If you do an ajax request after that it wont work even if it is longer than 500 ms. This issue is also mentioned in the Pace documentation so I suggest you check that out.

[Nickproger]

@vnportnoy , actually it works with AJAX-requests and not just on page loading. You just need to set corresponding options before including script. Kind of this:

<script>
window.paceOptions = {
    ajax: {
        trackMethods: ['GET', 'POST', 'PUT', 'DELETE', 'REMOVE']
    }
};
</script>
<script src="bower_components/pace/pace.js"></script>

[ahmedali5530]

RanadeepPolavarapu thanks it worked for me.

[ahmedali5530]

@RanadeepPolavarapu Thanks I'll sure use it in my next project :+1:

[ghost]

@RanadeepPolavarapu it did not work for me.

I use $.post() method with Json. But it works with $.getJSON :)

I edited pace.min.js and added POST in it works :+1:

ajax:{trackMethods:["GET","POST"]

[ghost]

@Nickproger i tried your solution but it didn't work with jquery v2.2.x

I'm using $.Post for bookmark and jquery-ui autocomplete. $.getJSON works without any problem.

i'm using pace.min.js from http://github.hubspot.com/pace/docs/welcome/

I hope developer will add POST in ajax column :+1:

@RanadeepPolavarapu i replied to your suggestion why it didn't works.

[tienanuit]

I was change option of pace: Pace.options = { restartOnRequestAfter: true } Now it work with every ajax

[ahmed685]

i had a trouble with pace, after long time i realized that the request with 'async:false' are not triggering the progress bar, all others do ... and dont forget to put 'trackMethods: ['GET', 'POST', 'PUT', 'DELETE', 'REMOVE']' :)

[FrancoPhoenix]

In this way it works perfectly for me.

<script>
    window.paceOptions = {
        ajax: {
            trackMethods: ['GET', 'POST', 'PUT', 'DELETE', 'REMOVE']
        },
        restartOnRequestAfter: true
    };
</script>

<script src="bower_components/pace/pace.js"></script>

Thanks for above answers!

[aline-matos]

@FrancoPhoenix perfect! Thank you!

[laryhills]

I tried all the pace options didn't work for me, am using pacejs with svelte, did the initial npm install pace-js, it shows on page load axios calls but doesn't get triggered by subsequent axios calls