Comment faire pour suivre la forme ajax rasoir avec pace.js

Question

J'essaie d'apprendre à utiliser pace.js avec ma forme ajax Razor. Le formulaire renvoie une vue partielle. Selon leur documentation, il n'y a pas besoin de configuration comme monitors all ajax requests (plus de 500ms). J'ai la forme ajax suivante:

@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" })) 
{ 
    //... 
} 

Sur myBeginFunction() I ajouté Pace.restart()

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

Unfortnately, barre de charge ne sont pas en phase avec la forme que la barre de chargement se termine bien avant la forme termine la présentation. J'ai 2 questions

1. Y at-il quelque chose de spécial que je dois faire pour le faire suivre une forme ajax Razor?
2. Si j'ai besoin de suivre le formulaire manuellement, comment le ferais-je? Selon le documentation, je peux suivre comme ceci, Pace.track(function(){ $.ajax(...)});, mais je ne suis pas sûr de savoir comment le faire avec rasoir.

Answer 1

Bien que je ne pouvais pas utiliser le rythme (ce qui aurait été super car il y a un minimum de configuration) j'ai pu résoudre le problème en utilisant un plugin appelé NProgress. Cela effectue essentiellement le même comportement mais n'effectue pas automatiquement le suivi DOM comme le fait Pace. Par conséquent, je dois démarrer et démarrer la fonction manuellement. Le JavaScript fait ci-dessous donc avec les éléments suivants:

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

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

En raison de la nature de la façon dont fonctionne NProgress, la barre incrémenter mais jamais complète jusqu'à ce que j'appeler NProgress.done();

Answer 2

supprimez pace.restart de votre fonction de début ajax. Ajoutez ceci à votre page.

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

Answer 3

J'ai eu le même problème et la following link did work for me

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