Comment faire fonctionner jQuery avec Prototype

Ok, voici la situation. Je me suis arraché les cheveux sur celui-ci.Comment faire fonctionner jQuery avec Prototype

Je suis un noob à ce sujet. Seulement utilisé des rails pendant environ 6 semaines. J'utilise le package d'installation standard et mon code exploite fortement les prototypes. Comme je l'ai dit, noob;)

Donc j'essaie de mettre des effets jQuery, comme PrettyPhoto. Mais ce qui se passe est que lorsque la page est chargée, PrettyPhoto fonctionne très bien. Cependant, une fois que quelqu'un utilise une aide Prototype, comme un lien créé avec link_to_remote, Prettyphoto cesse de fonctionner.

J'ai essayé jRails, tous les correctifs proposés sur le site JQuery pour arrêter les conflits ...

http://docs.jquery.com/Using_jQuery_with_Other_Libraries

... même fait quelques choses folles aime renommer tous les $ en prototype .js à $$$ en vain. Soit les assistants prototypes se cassent, soit les pauses jQuery.

Il semble que je ne peux rien faire pour que cela fonctionne ensemble.

Des idées?

Voici une partie de mon application.html.erb

<%= javascript_include_tag 'application' %> 
<%= javascript_include_tag 'tooltip' %> 
<%= javascript_include_tag 'jquery' %> 
<%= javascript_include_tag 'jquery-ui' %> 
<%= javascript_include_tag "jquery.prettyPhoto" %> 
<%= javascript_include_tag 'prototype' %> 
<%= javascript_include_tag 'scriptalicious' %> 
</head> 
<body> 
<script type="text/javascript" charset="utf-8"> 
    jQuery(document).ready(
    function() { 
     jQuery("a[rel^='prettyPhoto']").prettyPhoto(); 
    }); 
</script>

Si je mets prototype avant jquery, les aides prototypes ne fonctionnent pas Si je mets la clause noconflict dans, ni travaux.

Merci d'avance!

Chris

BTW: lorsque je tente ce, à partir du site jQuery:

<script> 
jQuery.noConflict(); 

// Use jQuery via jQuery(...) 
jQuery(document).ready(function(){ 
    jQuery("div").hide(); 
}); 

// Use Prototype with $(...), etc. 
$('someid').hide(); 
</script>

ma page disparaît!

Source

2010-03-27 thinkfuture

vous devez utiliser jQuery.noConflict(); et après tous les appels à jquery doit être effectué uniquement en utilisant la place jQuery()of $()

Source

2010-03-27 09:55:18 Omu

J'ai essayé cela aussi, mais cela n'a pas fonctionné non plus. – thinkfuture

Il y a un certain nombre de choses que vous pouvez faire. L'un d'entre eux est de vérifier l'ordre dans lequel vous chargez vos tags javascript. En règle générale, l'application devrait venir à la fin.

Si vous utilisez des jrails, vous n'avez pas besoin de charger les bibliothèques prototype et scriptaculous du tout.

je suggère humblement vous essayez ce qui suit:

<%= javascript_include_tag 'jquery', 'jquery-ui', 'tooltip', 'jquery.prettyPhoto', 'application' %>

Puisque vous êtes au début de votre cycle de développement, vous pouvez utiliser les bibliothèques que jquery et prototype tout à fait éliminer. Il y a tellement plus de choix sur le côté jQuery. Je ne dis pas que c'est ce que tout le monde devrait faire, mais dans votre cas, cela semble raisonnable.

Source

2010-03-27 12:20:13 allesklar

Merci! Je prévois de passer à jQuery complètement à un moment donné, mais pour le moment mon application doit fonctionner. Allesklar, j'ai édité mes tags d'inclusion comme vous l'avez noté, mais mes liens prototypes ont cessé de fonctionner. – thinkfuture

Essayez d'ajouter un prototype et un scriptaculous avant le 'tooltip'. – allesklar

je l'ai fait et cela ne fait aucune différence. – thinkfuture

On dirait que vous y êtes presque.Je pense que vous voulez quelque chose comme ceci:

<%= javascript_include_tag 'prototype' %> 
<%= javascript_include_tag 'scriptalicious' %> 
<%= javascript_include_tag 'jquery' %> 
<%= javascript_include_tag 'jquery-ui' %> 
<%= javascript_include_tag "jquery.prettyPhoto" %> 
<%= javascript_include_tag 'application' %> 
<%= javascript_include_tag 'tooltip' %> 

<script type="text/javascript"> 
    jQuery.noConflict(); 

    // Use jQuery via jQuery(...) 
    jQuery(document).ready(
    function() { 
     jQuery("a[rel^='prettyPhoto']").prettyPhoto(); 
    }); 

    // Use Prototype with $(...), etc. 
    $('someid').hide(); 
</script>

Je ne suis pas sûr de ce que vous avez trouvé sur exemple le site jQuery, mais jQuery ("div") hide();. On dirait qu'il cache tous les divs sur votre page, ce qui explique pourquoi votre page disparaît. Le non-conflit est ce dont vous avez besoin. Réorganisation de la javascript inclut comme ci-dessus signifie que vous pouvez inclure votre JS inline dans application.js à la place, ce que certains considèrent comme plus propre.

Source

2010-03-29 18:27:53

Merci Tim! J'ai essayé ceci mais mes liens de prototype sont arrosés. :( – thinkfuture

Si vous déplacez application/tooltip.js après le dans le bloc noConflict, cela fait-il une différence? –

changement $ symbole pour jQuery dans ces fichiers suivants

<%= javascript_include_tag 'jquery-ui' %> 
<%= javascript_include_tag "jquery.prettyPhoto" %>

comprennent fichier jquery d'abord, puis inclure prototype.

J'espère qu'il va résoudre le problème

Source

2010-04-25 07:09:31 Fero

Comment faire fonctionner jQuery avec Prototype

Répondre

Questions connexes