Dos versiones diferentes de JQuery en la misma página HTML

Question

Tengo un documento HTML donde he hecho referencia a la versión 1.2.2 de jQuery en el encabezado de thickbox y luego he hecho referencia a jQuery 1.7.1 justo antes de la etiqueta </body> que es para un presentación de diapositivas

El problema es que la caja gruesa no funcionará a menos que se elimine la referencia para jQuery 1.7.1 que detiene la presentación de diapositivas.

He buscado en Google para averiguar acerca de $ conflicto pero ninguna de las soluciones sugeridas funcionó.

El más común que he visto y he intentado es: var $j = jQuery.noConflict();

¿Cómo puedo resolver esto?

Answer 1

Si los plug-ins tienen un buen comportamiento, entonces esto debería funcionar:

<script src="jquery-1.2.2.js"></script> 
<script src="thickbox.js"></script> 
<script src="jquery-1.7.1.js"></script> 
<script src="slideshow.js"></script> 

(Obviamente esos nombres de script se componen.) Here's an example (source) (he usado jQuery 1.4. 2 y jQuery 1.7.1 porque Google no aloja 1.2.2).

Los trabajos anteriores con los plug-ins de buen comportamiento debido a un plug-in de buen comportamiento no se basa en lo global $ en absoluto, sino que usa el valor de la jQuery mundial partir del momento en que se cargó y agarra una referencia a él en un cierre, a continuación, utiliza esa referencia local en todo el código del plug-in, así:

// Example plug-in setup 
(function($) { 
    // ...Plug-in code using `$` here -- note it's a *local* `$`, 
    // not the global `$`, and not the global `jQuery`... 
})(jQuery); 

o

(function() { 
    var $ = jQuery; 

    // ...Plug-in code using `$` here -- note it's a *local* `$`, 
    // not the global `$`, and not the global `jQuery`... 
})(); 

Tanto de los que agarrar el mundial jQuery valor a partir del momento en que se carga el complemento y luego use su alias local en todo momento.

Si el plug-in quiere esperar a que el evento ready, también se puede hacer esto:

jQuery(function($) { 
    // ...Plug-in code using `$` here -- note it's a *local* `$`, 
    // not the global `$`, and not the global `jQuery`... 
}); 

... que utiliza la función jQuery pasado al manejador de listas.

Cualquiera de esos tres funcionaría correctamente (con thickbox viendo jQuery 1.2.2, y presentación de diapositivas viendo jQuery 1.7.1) con el orden de carga del script listado anteriormente.

Pero el "si" en mi oración de apertura es grande "si". Una gran cantidad de complementos no están escritos para ser a prueba de balas de esta manera.

---

No obstante lo anterior, me gustaría migrar lejos de cualquier plug-in que requiere jQuery 1.2.2 con el fin de trabajar, y siempre que sea posible (y es casi siempre es posible) evitar tener que cargar dos diferentes versiones de cualquier biblioteca, incluida jQuery, en la misma página.

Answer 2

No aconsejaría usar dos versiones diferentes de jQuery. Hay algunas otras alternativas a thickbox que funcionan perfectamente con la última jQuery.

Answer 3

<script src="http://code.jquery.com/jquery-1.2.2.min.js"></script> 
<script type="text/javascript"> 
    var jQ122 = jQuery.noConflict(); 
</script> 
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script> 
<script type="text/javascript"> 
    var jQ171 = jQuery.noConflict(); 


    (function($) { 
    $(function() { 
     // here $ is jQuery 1.2.2 
    }); 
    })(jQ122); 


    (function($) { 
    $(function() { 
     // here $ is jQuery 1.7.1 
    }); 
    })(jQ171); 
</script> 

Answer 4

Lo que se quiere hacer es una muy mala práctica (de hecho, usted debe migrar todo el código a la misma versión), pero en teoría se puede hacer ...

Usted tendría que realizar cambios en el respectivos plugins de todos modos aunque ... consideran este código:

<script src="jquery-1.4.js"></script> 
var jQuery14 = jQuery; 
<script src="jquery-1.7.js"></script> 
var jQuery17 = jQuery; 

a continuación, cambiar el código de los plugins en el punto donde jQuery es entregado al plugin, que se vería similar a esto:

(function($){ 
    // all your plugins code would be here 
})(jQuery);  // replace "jQuery" with one of your respective jQuery14/jQuery17 versions/variables 

Tenga en cuenta .. esto es muy muy complicado para decir lo menos! ¡escriba el código de limpieza o pague después! :)

Answer 5

Aunque podría usar jQuery.noConflict(); para declarar versiones separadas de jQuery al mismo tiempo.

A menudo he tenido algunos problemas con IE8 con ciertas bibliotecas cuando lo hago.

Entonces, una solución alternativa sería usar un iframe para cargar una página dentro de su página actual.

Tienen una versión dada de jQuery en una página, y otra en la segunda.

Por ejemplo:

<iframe frameborder="0" width="700" height ="400" scrolling="no" seamless="seamless" src="your.html"></iframe>