Comment exécuter différentes versions de jQuery sur la même page?

Question

Mon entreprise a acheté un produit qui rend une ASP.NET contrôle sur la page. Ce contrôle utilise jQuery 1.2.3 et ajoute une balise de script sur la page de référence. Les développeurs de contrôle ne sera pas en charge l'utilisation de la commande si elle modifié en aucune façon (y compris la modification à faire référence à une autre version de jQuery).

Je suis sur le point de commencer le développement de mon propre contrôle et que vous souhaitez utiliser les fonctionnalités et les améliorations de la vitesse de jQuery 1.3. Deux de ces contrôles doivent exister sur la même page.

Comment puis-je permettre le contrôle acheté pour utiliser jQuery 1.2.3 et personnalisé en développement à utiliser jQuery 1.3? Également de la curiosité, ce qui, si nous devions utiliser un contrôle supplémentaire qui devait référence encore une autre version de jQuery?

Answer 1

Vous pouvez y parvenir en cours d'exécution de votre version de jQuery dans d'absence de conflit mode. "Pas de conflit" le mode est la solution typique pour obtenir jQuery de travailler sur une page avec d'autres cadres comme prototype, et peut également être utilisé ici, comme c'essentiellement des espaces de noms de chaque version de jQuery qui vous charge.

<script src="jQuery1.3.js"></script>
<script>
    jq13 = jQuery.noConflict(true);
</script>

<!-- original author's jquery version -->
<script src="jQuery1.2.3.js"></script>

Ce changement implique que tout le jQuery choses que vous voulez utiliser doivent être appelées à l'aide d' jq13 plutôt que d' $, par exemple

jq13("#id").hide();

Ce n'est pas une situation idéale pour avoir les deux versions fonctionnant sur la même page, mais si vous n'avez pas d'alternative, alors la méthode ci-dessus devrait vous permettre d'utiliser deux versions différentes à la fois.

Également de la curiosité, ce qui, si nous devions utiliser un contrôle supplémentaire qui avait besoin de faire référence encore une autre version de jQuery?

Si vous avez besoin d'ajouter une autre version de jQuery, vous pouvez étendre la-dessus:

<script src="jQuery1.3.js"></script>
<script>
    jq13 = jQuery.noConflict(true);
</script>
<script src="jQuery1.3.1.js"></script>
<script>
    jq131 = jQuery.noConflict(true);
</script>

<!-- original author's jquery version -->
<script src="jQuery1.2.3.js"></script>

Les variables jq13 et jq131 chaque être utilisé pour la version spécifique de fonctions dont vous avez besoin.

Il est important que le jQuery utilisé par le développeur d'origine est chargé dernier - développeur à l'origine probable de la rédaction de leur code dans l'hypothèse d' $() seraient à l'aide de leur version jQuery. Si vous chargez une autre version après leurs, $ va être "saisi" par la dernière version que vous avez la charge, ce qui signifierait développeur à l'origine du code qui tourne sur la dernière version de bibliothèque, le rendu de l' noConflicts quelque peu redondant!

Answer 2

Comme dit ConroyP, vous pouvez le faire avec jQuery.noConflict mais n'oubliez pas var lors de la déclaration de variable. Comme ça.

 <script src="jQuery1.3.js"></script>
<script>
    var jq13 = jQuery.noConflict(true);
</script>

<!-- original author's jquery version -->
<script src="jQuery1.2.3.js"></script>
 

Vous pouvez connecter tous les $ à jq13 en ajoutant (jq13) après les fonctions }) . comme ça

 (function($) {
 ... 
})(jq13); 
 

Answer 3

Il semble que l'ordre n'a pas d'importance ... par exemple: http://gist.github.com/136686 . La sortie de la console est au sommet et toutes les versions semblent être aux bons endroits.

Answer 4

Dans la deuxième version, déclarez une variable sous la forme $ .noConflict (true). Et utilisez la variable déclarée à la place de $ utilisée dans le code jQuery. Veuillez vérifier le code ci-dessous: Ce code est utilisé après la déclaration de la deuxième version de jquery:

var jQuery_1_9_1 = $ .noConflict (true); fonction pageLoad (sender, args) {

     var $ddl = jQuery_1_9_1("select[name$=drpClassCode]");
    var $ddl1 = jQuery_1_9_1("select[name$=drpSubContractors]");
    $ddl.select2();
    $ddl1.select2();

    $ddl.bind("change keyup", function () {
        $ddl.fadeIn("slow");


    });

    $ddl.bind("change keyup", function () {
        $ddl1.fadeIn("slow");


    });
}