How to track razor ajax form with pace.js

Question

I'm trying to learn how to use pace.js with my Razor ajax form. The form returns a Partial View. According to their documentation, there is no need for configuration as it monitors all ajax requests (longer than 500ms). I have the following ajax form:

@using (Ajax.BeginForm("MyAction", null,
new AjaxOptions
{
    HttpMethod = "POST", // HttpPost
    InsertionMode = InsertionMode.Replace, 
    UpdateTargetId = "myDiv", 
    OnBegin = "myBeginFunction()",
    OnSuccess = "mySuccessFunction(data.msgType, data.msg)",
    OnFailure = "myFailFunction('Error', error)",
    OnComplete = "myCompleteFunction()"
}, new { @class = "form-inline" }))
{
   //...
}

On myBeginFunction() I added Pace.restart()

function myBeginFunction()
{
   //...
   Pace.restart();
   //...
}

Unfortnately, load bar is not in sync with the form as the load bar completes long before the form finishes submitting. I have 2 questions

1. Is there anything special I need to do to make it track an Razor ajax form?
2. If if I need to track the form manually, how would I do so? According to the documentation, I can track like this, Pace.track(function(){ $.ajax(...)});, but I'm not sure how to do this with razor.

Answer 1

While I wasn't able to use pace (which would have been great since there's minimal configuration) I was able to resolve the issue using a plugin called NProgress. This essentially performs the same behavior but doesn't automatically perform DOM tracking as Pace does. Therefore, I have to start and start the function manually. The JavaScript below does so with the following:

function myBeginFunction()
{
   //...
   NProgress.start();
   //...
}

function myCompleteFunction()
{
   //...
   NProgress.done();
   //...
}

Because of the nature of how NProgress works, the bar will increment but never complete until I call NProgress.done();

Answer 2

remove pace.restart from your ajax begin function. Add this to your Page.

<script>
    paceOptions = {
        restartOnPushState: true,
        ajax: true,
        document: true,
        restartOnRequestAfter: true
    }
</script>

Answer 3

I had the same issue and the following link did work for me

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