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

Is there anything special I need to do to make it track an Razor ajax form?
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.

score 1 · Answer 1 · answered Jun 06 '16 at 20:15

1

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

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

answered Jun 06 '16 at 20:15

MRebati

591
14
29

It doesn't work. The Ajax form returns a partial view. I'm not sure if this affects it? – usr4896260 Jun 07 '16 at 11:40
2

ir effects every DOM activity. doesn't matter ajax or document load. – MRebati Jun 11 '16 at 20:02
1

Ok thanks. Though I still wasn't able to get it to work, I found an alternative solution with the answer I posted above. – usr4896260 Jun 15 '16 at 12:19

score 0 · Accepted Answer · answered Jun 15 '16 at 12:17

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

score 0 · Answer 3 · answered Nov 03 '17 at 23:36

0

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

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

answered Nov 03 '17 at 23:36

Johann

67
1
1
7

How to track razor ajax form with pace.js

3 Answers3