web-dev-qa-db-fra.com

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

Ma société a acheté un produit qui rend un contrôle ASP.NET sur la page. Ce contrôle utilise jQuery 1.2.3 et ajoute une balise de script à la page pour la référencer. Les développeurs du contrôle ne prendront en charge l'utilisation du contrôle que si celui-ci est modifié de quelque manière que ce soit (y compris la modification pour référencer une version différente de jQuery).

Je suis sur le point de commencer à développer mon propre contrôle et j'aimerais utiliser les fonctionnalités et les améliorations de vitesse de jQuery 1.3. Ces deux contrôles devront exister sur la même page.

Comment autoriser le contrôle acheté à utiliser jQuery 1.2.3 et un nouveau développement personnalisé à utiliser jQuery 1.3? Aussi par curiosité, si nous utilisions un contrôle supplémentaire qui devait faire référence à une autre version de jQuery?

asp.netjavascriptjquery
68
Alex Angas

Vous pouvez y parvenir en exécutant votre version de jQuery en mode sans conflit . Le mode "Aucun conflit" est la solution typique pour que jQuery fonctionne sur une page avec d'autres frameworks tels que prototype , et peut également être utilisé ici car il s'agit essentiellement d'espaces de nommage de chaque version de jQuery que vous chargez.

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

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

Cette modification signifie que tout élément jQuery que vous souhaitez utiliser devra être appelé avec jq13 plutôt que $, par exemple.

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

Ce n'est pas une situation idéale pour avoir les deux versions en cours d'exécution 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.

Aussi par curiosité, si nous utilisions un contrôle supplémentaire qui avait besoin de faire référence à une autre version de jQuery?

Si vous aviez besoin d'ajouter une autre version de jQuery, vous pouvez développer ce qui suit:

<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 seraient chacune utilisées pour les fonctionnalités spécifiques à la version dont vous avez besoin. 

Il est important que le jQuery utilisé par le développeur d'origine soit chargé en dernier - le développeur d'origine a probablement écrit son code en partant du principe que $() utiliserait sa version de jQuery. Si vous chargez une autre version après la leur, le $ sera "saisi" par la dernière version que vous avez chargée, ce qui signifierait que le code du développeur original s'exécutant sur la dernière version de la bibliothèque, ce qui rendrait la noConflicts quelque peu redondante!

99
ConroyP

Comme dit ConroyP, vous pouvez le faire avec jQuery.noConflict mais n'oubliez pas var lorsque vous déclarez la variable . Comme ceci.

<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 le }) de la fonction. comme ça

(function($) {
 ... 
})(jq13);
24
Tigran Tokmajyan

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.

2
Aaron Gibralter

rendre faux le travail

var jq16 = $.noConflict(false);
1
snicee

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:

<script type="text/javascript">
var jQuery_1_9_1 = $.noConflict(true); function 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");


        });
    }
0
Manish Ojha