Utilisation simultanée de différentes versions de jQuery et de jQueryUI

Question

Je travaille sur un projet où leur framework utilise jQuery 1.3.2 et jQueryUI 1.7.2.

La mise à niveau des versions dans le framework n'est pas une possibilité donc j'ai voulu exécuter jQuery 1.4.4 et jQueryUI 1.8.5 en parallèle.

J'ai vu que les différentes versions de jQuery peuvent être utilisés en parallèle comme ceci:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> 
    <script type="text/javascript"> 
     var j$132 = $.noConflict(true); 
    </script> 

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script> 
    <script type="text/javascript"> 
     var j$144 = $.noConflict(true); 
    </script> 

Mais serait-ce tenir aussi vrai pour les éléments suivants:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> 
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script> 
    <script type="text/javascript"> 
     var j$132 = $.noConflict(true); 
    </script> 

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script> 
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.5/jquery-ui.min.js"></script> 
    <script type="text/javascript"> 
     var j$144 = $.noConflict(true); 
    </script> 

Answer 1

AFAIK, il n'y a pas $.noConflict() équivalent pour l'interface utilisateur jQuery. Vous pouvez toutefois utiliser une copie locale de jQuery UI et envelopper l'ensemble JS utilisant une astuce similaire à ce que vous utilisez pour aliasing les différentes bibliothèques:

(function(jQuery) { 
    // ... the jQuery UI lib code for jQuery 1.3.2 
})(j$132); 

Cela pourrait être élégamment mis en œuvre à l'aide d'un script de compilation côté serveur ou un gestionnaire qui sert les fichiers JS mais enveloppe le contenu avec le code ci-dessus. N'ayant pas testé cette approche, vous devrez peut-être jouer avec le paramètre function (bien que je pense qu'il est prudent de supposer qu'il utilise jQuery pour référencer jQuery dans le code du plugin).

La façon dont vous souhaitez utiliser est déclarer les deux versions de jQuery:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> 
<script type="text/javascript"> 
    var j$132 = $.noConflict(true); 
</script> 

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script> 
<script type="text/javascript"> 
    var j$144 = $.noConflict(true); 
</script> 

... puis d'inclure votre code d'interface utilisateur, comme je l'ai indiqué plus haut.

Et non, vous ne pouvez pas le faire en référençant les fichiers JI de l'interface utilisateur de Google CDN. Le deuxième bloc de code dans la question est en fait une meilleure solution que cette réponse, car il ne nécessite pas l'encapsulation du code d'interface utilisateur d'origine dans une fonction auto-exécutable et en passant la version spécifique. Les deux approches donnent exactement le même état sur la page.

Answer 2

Je suis arrivé à cette page parce que j'ai le même problème que décrit dans la question originale mais la réponse donnée ne la résout pas complètement (plus). J'ai eu besoin d'ajouter une suggestion automatique à une page qui a beaucoup de code existant en utilisant jquery, il n'y avait pas de moyen facile de mettre à jour la nouvelle jquery et jquery ui donc essayé d'utiliser la nouvelle version à côté de l'ancien un.

Outre l'édition de la jQueryUI dernière ligne ui jquery a beaucoup de références jQuery que vous avez besoin de changer, si bien que j'ai utilisé un éditeur qui peut remplacer en utilisant l'expression régulière et remplacé: \ bjQuery \ b avec j 182 $

Une dans la page I ajouté:

<script src="http://code.jquery.com/jquery-1.8.2.js"></script> 
    <script type="text/javascript"> 
     var j$182 = $.noConflict(true); 
     </script> 
<script type="text/javascript" src="jqueryui1.9.0.js"></script> 

maintenant, les deux script existant sur la page et la nouvelle auto suggèrent travaillent.

Answer 3

Je viens de trouver une solution et cela fonctionne pour moi.

Dans la bibliothèque Jquery, après le dernier type de ligne

var mySelector = $; 

Inclure l'autre version après que vous incluez dans votre page.

maintenant, dans tous les scripts que vous voulez utiliser avec cette version de jquery (même jquery ui et d'autres bibliothèques aussi), remplacez $ par mySelector. Utilisez replaceall, il y aura quelques endroits, comme dans les fonctions de correspondance regex où vous voudriez remplacer mySelector à $. Ce problème m'embêtait depuis assez longtemps. Et ça vient de se résoudre.

ÉDITÉ: assurez-vous de ne remplacer aucun $ dans le script original de jQuery.