web-dev-qa-db-fra.com

Utilisation de JQuery et d'un prototype dans la même page

Plusieurs de mes pages utilisent à la fois JQuery et Protoype. Depuis que je suis passé à la version 1.3 de JQuery, cela semble poser problème, car les deux bibliothèques définissent une fonction nommée '$'.

JQuery fournit une fonction noConflict () qui abandonne le contrôle de $ à d'autres bibliothèques susceptibles de l'utiliser. Il semble donc que je doive parcourir toutes mes pages qui ressemblent à ceci:

<head>      
    <script type="text/javascript" src="/obp/js/prototype.js"></script>
    <script type="text/javascript" src="/obp/js/jquery.js"></script>
</head>

et les changer pour ressembler à ceci:

<head>      
    <script type="text/javascript" src="/obp/js/prototype.js"></script>
    <script type="text/javascript" src="/obp/js/jquery.js"></script>
    <script type="text/javascript">
        jQuery.noConflict();
        var $j = jQuery;
    </script>
</head>

Je devrais alors pouvoir utiliser '$' pour Prototype et '$ j' (ou 'jQuery') pour JQuery. Je ne suis pas entièrement satisfait de la duplication de ces 2 lignes de code dans chaque page pertinente et je m'attends à ce que quelqu'un oublie de les ajouter à une nouvelle page. Je préférerais pouvoir faire ce qui suit 

  • Créez un fichier jquery-noconflict.js qui "inclut" jquery.js et les 2 lignes de code ci-dessus
  • Importer jquery-noconflict.js (au lieu de jquery.js) dans toutes mes pages JSP/HTML

Cependant, je ne sais pas s'il est possible d'inclure un fichier JS dans un autre, de la manière que j'ai décrite? Bien sûr, une autre solution consiste simplement à ajouter directement les 2 lignes de code ci-dessus à jquery.js, mais si je le fais, je devrai me rappeler de le faire à chaque mise à niveau de JQuery.

javascriptjqueryprototypejs
32
Dónal

Actuellement, vous pouvez faire quelque chose comme ça:

<head>          
    <script type="text/javascript" src="/obp/js/prototype.js"></script>
    <script type="text/javascript" src="/obp/js/jquery.js"></script>
    <script type="text/javascript">
        var $j = jQuery.noConflict();
    </script>
</head>

Ensuite, utilisez jQuery en tant que $j() et $() de Prototype.

19
jmonteiro

Il semblerait que la réponse la plus simple serait de mordre la balle et d'inclure vos lignes noConflict. Bien sûr, si vos pages n'utilisent pas d'en-tête partagé, cette solution pourrait ne pas être la meilleure.

5
Sampson

Cette solution a bien fonctionné:

jQuery.noConflict();
var $j = jQuery;

Maintenant, utilisez $j à la place de $ pour votre code jQuery, comme ceci:

$j(document).ready(function() {
    $j('#div_id').innerfade({
         // some stuff
    });
});
4
AJCE

Je suis passé par là pendant un moment. C’est très énervant et au final, j’ai décidé de supprimer tous mes anciens fichiers Prototype et de les remplacer par jQuery. J'aime la façon dont Prototype gère certaines tâches Ajax mais cela ne valait pas la peine de conserver tous les éléments sans conflit.

3
Nick Van Brunt

Ne pourriez-vous pas simplement inclure le code jQuery = noConflict() dans le fichier source jquery.js? Pourquoi aurait-il besoin d'être défini de cette façon?

2
Chris

Juste comme une note aux autres qui tombent sur cela. Les solutions sont décrites ici (en mentionnant spécifiquement le prototype): http://docs.jquery.com/Using_jQuery_with_Other_Libraries

2
Nux
<script>
    document.write(unescape('%3Cscript type="text/javascript" src="/obp/js/jquery.js"%3E%3C/script%3E'));
</script>
<script>
    jQuery.noConflict();
    var $j = jQuery;
</script>

ou

var scripty = document.createElement('script');
scripty.href="/obp/js/jquery.js";
document.getElementsByTagName('head')[0].appendChild(scripty);
jQuery.noConflict();
var $j = jQuery;

MODIFIER:

J'ai essayé cette suggestion mais les deux dernières lignes produisent l'erreur

jQuery is not defined
1
jacobangel

Vous pouvez appeler jquery d’abord puis définir 

var $j = jQuery;

prototype prendra le contrôle de $ dans ce cas.

Ou, vous pouvez simplement faire référence à jQuery en utilisant le nom complet de la fonction jQuery (jQuery). 

1
RobKohr

Votre jquery-noconflict.js devrait ressembler à ceci (assurez-vous que tout est sur une seule ligne):

document.write("<script type=\"text/javascript\" src=\"/obp/js/jquery.js\"></script><script type=\"text/javascript\">jQuery.noConflict();var $j = jQuery;</script>");

... et que votre include (comme vous l'avez déjà souligné) devrait ressembler à ceci:

<head>      
    <script type="text/javascript" src="/obp/js/prototype.js"></script>    
    <script type="text/javascript" src="/obp/js/jquery-noconflict.js"></script>
</head>

Je pense que cette solution répond à toutes vos exigences.

1
PrimosK

Vous devez le charger dans votre public/javascript/application.js

jQuery.noConflict();

var $j = jQuery;

C'est aussi un bon article qui peut être utile.

JQuery & Prototype travaillent ensemble

0
kkampen

Si j'étais vous, je déposerais mon code de non-conflit dans un fichier d'inclusion JavaScript comme vous l'avez expliqué ci-dessus, puis vous découvririez un processus dans lequel je mettrais ces éléments à inclure dans toutes mes pages dans un emplacement central. . Si vous travaillez avec des fichiers HTML simples et que vous ne disposez d'aucune sorte de capacité de création de modèles/de script côté serveur pour ce qui est inclus dans un document, il est toujours possible de faire une inclusion côté serveur.

Quoi qu'il en soit, la douleur que vous aurez à mettre à jour chacune de vos pages reviendra cette fois-ci lorsque vous devrez mettre à jour votre code d'analyse ou le pied de page du site. 

0
Billy Gray

Utilisez Prototype ci-dessous jQuery comme ceci:

<script type="text/javascript" src="news/jquery-1.2.3.pack.js"></script>
<script type="text/javascript" src="news/jquery.easynews.js"></script>


<script type="text/javascript" src="lb/js/prototype.js"></script>
<script type="text/javascript" src="lb/js/scriptaculous.js?load=effects"></script>
<script type="text/javascript" src="lb/js/lightbox.js"></script>
<link href="lb/css/lightbox.css" rel="stylesheet" type="text/css" />

dans ce cas, la fonction jQuery créera un problème, vous pouvez donc l'utiliser pour résoudre le problème:

<script type="text/javascript">
     jQuery.noConflict();
     var JQ = jQuery;//rename $ function
</script>
0
Curzon Rahman