animation not showing when ajax request

[vnportnoy]

trafficstars

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" [email protected] 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...

[distributedlock]

Hello everyone,

You need to modify the pace.js file if you want Pace to show up for all AJAX requests. Typically most simple AJAX requests will end before 500 ms. I believe Pace will not take the 500 ms minimum limit into consideration when doing PJAX (any request involving pushState) like requests as per ajax-y page load in documentation but not certain about that as I didn't test it.

I had the same problem as you guys and wanted my Pace bar to show up even for small AJAX requests.

Find restartOnRequestAfter key (it's exclusive in the entire file) in pace.js and replace the time (in milliseconds) value with your desired number. I put 30 ms for mine and now it works on even the most simple and quick AJAX requests. Most of my very simple AJAX requests take around 85 ms and thus this solved my issue.

Hope this helps :) and hope this type of customization could be a native feature in upcoming versions.

gist.

Best Regards, Ranadeep

[vnportnoy]

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

[distributedlock]

Ok, I am a little confused here. If that's not the issue then what is? Reading the comments above people are saying that pace is not showing on GET and POST requests. This is not the issue with Pace but that your requests are being handled within the 500 ms limit. @HelloCui even says that he set delay on server side to test it and pace shows once the AJAX request is over the 500 ms limit. I believe its the same thing with your issue. There is nothing wrong with your code. I have test both GET and POST with default 500 ms pace and it doesn't show up on all requests. If you change the minimum time limit then it will show up.

If you really want to test if its an issue with your code then sleep the request server sided for about two seconds and then see if Pace shows up.

Once again the issue here isn't Pace but the time limit. I believe the owner of Pace set that 500 ms limit so it doesn't show up on even the most simple AJAX requests creating kind of a spam of the loading bar. It has to be modified specifically so fit your needs. Some websites do constant GET requests every 30 seconds for keeping data fresh on the page and if Pace didn't have that 500 ms limit then it would be spammed over and over and hurt user experience.

[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.

[distributedlock]

@ahmedali5530 No worries. Glad I could help. I tweaked my custom pace even further. Here is the updated gist of minified and unminified version.

[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"]

[distributedlock]

@rajlaksh Hmm that's odd. My custom build has the following HTTP methods already added in trackMethods: ['GET', 'POST', 'PUT', 'DELETE', 'REMOVE'],. I just tested $.post(...) with my gist and it works.

[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