J'utilise head.js
(http://headjs.com) pour effectuer le chargement asynchrone de mes javascripts.
J'ai un problème avec jquery.validate.unobtrusive
et les validateurs personnalisés
Toutes les validations personnalisées doivent être chargées après jquery.validate
et jquery.validate.unobtrusive
, et je le fais comme suit:
<head>
<script src="@Url.Script("jquery")"></script>
<script src="@Url.Script("head.load")"></script>
</head>
<body>
<!-- entire markup -->
<script>
head.js("@Url.Script("jquery.validate")", function () {
head.js("@Url.Script("jquery.validate.unobtrusive")", function () {
head.js("@Url.Script("custom-validations")");
});
});
</script>
</body>
Le problème est que le script custom-validations
doit être chargé après jquery.validate.unobtrusive
mais avant l'événement document.onready
, car jquery.validate.unobtrusive
utilise document.onready
pour faire sa magie noire. Mais, lorsque j'utilise un head.js
document.onready
événement déclenché avant le début du chargement des scripts, et ma validation personnalisée ne fonctionne pas.
Existe-t-il des solutions / solutions de contournement communes pour résoudre ce type de problèmes avec le chargement des scripts asynchrones?
Un autre problème que mon client ne souhaite pas voir jquery.validate
/ jquery.validate.onubtrusive
dans la balise <head>
.
@Url.Script
- méthode d'aide pour localiser les fichiers js.
3 réponses
J'ai trouvé la solution par moi-même. Vous devez utiliser jQuery.holdReady () pour conserver 'document.ready' pendant que tous les scripts dépendent de jquery.validate.unobtrusive ne se charge pas.
<head>
<script src="@Url.Script("jquery")"></script>
<script src="@Url.Script("head.load")"></script>
</head>
<body>
<!-- entire markup -->
<script>
head.js("@Url.Script("jquery.validate")", function () {
$.holdReady(true); // set semaphore for dom ready.
head.js("@Url.Script("jquery.validate.unobtrusive")", function () {
head.js("@Url.Script("custom-validations")", function () { //fires when all provided scripts are loaded
$.holdReady(false); // release semaphore and fire event
});
});
});
</script>
</body>
Essayez $ .validator.unobtrusive.parse ('# the_form_in_question') après le chargement.
Cela devrait fonctionner:
head.ready("@Url.Script("jquery.validate")", function () {
head.ready("@Url.Script("jquery.validate.unobtrusive")", function () {
head.ready("@Url.Script("custom-validations")",function(){
// your code here
});
});
});
Si vous utilisez jquery, vous pouvez ajouter les scripts via la méthode getScript
qui déclenche un rappel lorsque le script est chargé, ce qui peut aider:
$(document).ready(function(){
$.getScript("@Url.Script("jquery.validate")",function(){
$.getScript("@Url.Script("jquery.validate.unobtrusive")",function(){
$.getScript("@Url.Script("custom-validations")",function(){
// do your stuff here
});
});
});
});
Questions connexes
De nouvelles questions
javascript
Pour des questions concernant la programmation dans ECMAScript (JavaScript / JS) et ses divers dialectes / implémentations (hors ActionScript). Veuillez inclure toutes les balises pertinentes dans votre question; par exemple, [node.js], [jquery], [json], etc.