Uso de JQuery y Prototype en la misma página

Varias de mis páginas usan JQuery y Protoype. Desde que actualicé a la versión 1.3 de JQuery, esto parece estar causando problemas, porque ambas bibliotecas definen una función llamada '$'.Uso de JQuery y Prototype en la misma página

JQuery proporciona una función noConflict() que cede el control de $ a otras bibliotecas que puedan estar usándolo. Así que parece que tengo que ir a través de todas mis páginas que se ven así:

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

y cambiarlos a tener este aspecto:

<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>

debería entonces ser capaz de utilizar '$' para Prototipo y '$ j' (o 'jQuery') para JQuery. No estoy del todo contento con la duplicación de estas 2 líneas de código en cada página relevante, y espero que en algún momento alguien se olvide de agregarlas a una página nueva. Yo prefiero ser capaz de hacer lo siguiente

Crear un archivo j query-noconflict.js la que "incluye" jquery.js y las 2 líneas de código que se muestran arriba
importación jquery-noconflict.js (en lugar de jquery.js) en toda mi JSP/Páginas HTML

Sin embargo, no estoy seguro de si es posible incluir un archivo JS en otro, de la manera que he descrito? Por supuesto, una solución alternativa es simplemente agregar las 2 líneas de código anteriores a jquery.js directamente, pero si lo hago, tendré que acordarme de hacerlo cada vez que actualice JQuery.

Fuente

2009-01-16 Dónal

¿Respondo que proporcioné trabajos para usted? – PrimosK

Dunno, han pasado 3 años desde que hice esta pregunta ... –

Ok ... :) Me lo perdí ... :) Pero creo que el principio es correcto, ya que lo probé ... – PrimosK

Parecería que la respuesta más simple sería morder la bala e incluir sus líneas noConflict. Por supuesto, si sus páginas no usan un encabezado compartido, esa solución podría no ser la mejor.

Fuente

2009-01-16 18:01:13 Sampson

<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>

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

EDIT:

probé esta sugerencia, pero las 2 últimas líneas producen el error

jQuery is not defined

Fuente

2009-01-16 18:08:08 jacobangel

Buen pensamiento;) – Sampson

Debe especificar una devolución de llamada cuando se carga el script para ejecutar el código noconflict ... simplemente haga un .appendChild (scripty) scripty.onload = setNoconflict; función setNoconflict() {jQuery.noConflict(); $ j = jQuery; } – CodeJoust

@jacobangel el primer ejemplo funciona, pero elimina un error tipográfico (ver diff) e hizo una corrección: es importante para cerrar la etiqueta de script después de 'document.write (..)' y abrir uno nuevo donde 'jQuery. noConflict() 'está dentro. De lo contrario, jQuery no está definido porque' document.write' se agrega a jQuery-script * después de * el bloque de script actual. – acme

pasé por esto por un tiempo . Es muy molesto y al final decidí descartar todas las cosas de mis viejos Prototipos y reemplazarlas con jQuery. Me gusta la forma en que Prototype maneja algunas tareas de Ajax, pero no valía la pena el compromiso de mantener todas las cosas sin conflicto.

Fuente

2009-01-16 19:25:44

+1 Siempre es una buena idea reducir los marcos usados. No solo en términos de conflictos sino también en términos de un evento de aplicación liviano si requiere alguna refactorización para eliminar el prototipo. – acme

Si yo fuera usted, soltaría mi código de no conflicto en un archivo de inclusión de JavaScript como opinó anteriormente, y luego averiguaré algún proceso en el que establecería estas cosas que debo incluir en todas mis páginas en un lugar central Si está trabajando con archivos HTML directos y no tiene ningún tipo de capacidad de creación de plantillas/secuencias de comandos para lo que se incluye en un documento, siempre existe la posibilidad de hacer una inclusión en el servidor.

De cualquier manera, el dolor que experimentará actualizando cada una de sus páginas esta vez volverá cuando necesite actualizar su código analítico o el pie de página del sitio.

Fuente

2009-01-16 19:44:42

Se podría llamar jQuery primero y luego establecer

var $j = jQuery;

prototipo tomará el control de $ en este caso.

O bien, puede consultar simplemente jQuery utilizando el nombre completo de la función jQuery (jQuery).

Fuente

2009-05-20 22:43:18 RobKohr

¿No podría simplemente incluir el código jQuery = noConflict() en el archivo fuente jquery.js? ¿Por qué debería ser definido de esa manera?

Fuente

2009-10-27 16:53:23 Chris

Esto sería malo para las actualizaciones ... – Nux

Uso Prototipo continuación jQuery así:

<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" />

en este caso la función jQuery creará un problema, por lo que puede usar esto para resolver el problema:

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

Fuente

2010-05-25 08:06:59

Esta solución funcionó bien :

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

Ahora usa $j en lugar de $ para el código de jQuery, como:

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

Fuente

2010-09-04 08:30:23 AJCE

tiene que cargar en su public/javascript/application.js

jQuery.noConflict(); 

var $j = jQuery;

Este es también un buen artículo que pueda ser útil.

JQuery & Prototype working together

Fuente

2011-02-17 10:17:04 kkampen

Así como una nota a otros que tropiezan con esto. Las soluciones se describen aquí (mencionando específicamente prototipo): http://docs.jquery.com/Using_jQuery_with_Other_Libraries

Fuente

2011-09-05 10:52:36 Nux

Actualmente se puede hacer algo como esto:

<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>

A continuación, utilice jQuery como $j() y Prototipo de $().

Fuente

2011-10-30 14:01:28 jmonteiro

Esto fue muy útil para mí en un problema similar. Gracias jmonteiro :) – michaelmcgurk

Su jquery-noconflict.js debería tener este aspecto (Asegúrese de que todo está en una línea):

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

... y de las necesidades de inclusión (como ya se ha dicho) debería tener este aspecto:

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

Esta solución resuelve todos sus requisitos, creo.

Fuente

2012-01-10 13:34:58 PrimosK

Uso de JQuery y Prototype en la misma página

Respuesta

Cuestiones relacionadas