javascript - modales - ventana modal bootstrap
Usar JQuery y Prototype en la misma página (12)
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
- Cree un archivo j
query-noconflict.jsque "incluya"jquery.jsy las 2 líneas de código que se muestran arriba - Importar
jquery-noconflict.js(en lugar dejquery.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.
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.
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
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>
Luego, use jQuery como $j() y Prototype''s $() .
Su 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.
<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
¿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?
Esta solución funcionó bien:
jQuery.noConflict();
var $j = jQuery;
Ahora use $j en lugar de $ para su código jQuery, como:
$j(document).ready(function() {
$j(''#div_id'').innerfade({
// some stuff
});
});
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.
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).
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á al actualizar 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.
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>
Debe cargarlo en su public/javascript/application.js
jQuery.noConflict();
var $j = jQuery;
Este es también un buen artículo que puede ser útil.