Pregunta Usar 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 '$'.

JQuery proporciona una función noConflict () que renuncia al control de $ a otras bibliotecas que puedan estar usándola. Entonces, parece que necesito revisar 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 cámbielos para que se vean así:

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

Entonces debería poder usar '$' para Prototype 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. Prefiero ser capaz de hacer lo siguiente

  • Crea un archivo jquery-noconflict.js que incluye" jquery.js y las 2 líneas de código mostradas arriba
  • Importar jquery-noconflict.js (en lugar de jquery.js) en todas mis páginas JSP / HTML

Sin embargo, no estoy seguro 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.


32
2018-01-16 17:56


origen


Respuestas:


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

Entonces, use jQuery como $j() y Prototipos $().


18
2017-10-30 14:01



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


5
2018-01-16 18:01



Esta solución funcionó bien:

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

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

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

4
2017-09-04 08:30



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.


3
2018-01-16 19:25



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


2
2017-09-05 10:52



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


2
2017-10-27 16:53



Tu jquery-noconflict.js debería verse así (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 que su inclusión (como ya lo señaló) debería verse así:

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


1
2018-01-16 18:08



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

o

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

EDITAR:

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

jQuery is not defined

1
2018-05-20 22:43



Puede llamar a jquery primero y luego establecer

var $j = jQuery;

prototipo tomará el control de $ en este caso.

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


1
2018-05-25 08:06



Usa Prototype debajo de 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>

0
2018-01-16 19:44



Si yo fuera tú, colocaría mi código de no conflicto en un archivo de inclusión de JavaScript como opinaste anteriormente, y luego averiguaré un proceso en el que establecería estas cosas que necesito 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á la actualización de cada una de sus páginas esta vez va a volver de nuevo cuando se necesita actualizar el código de análisis o el pie de página del sitio.


0
2018-02-17 10:17