javascript - stackoverflow - jquery.noconflict() example

jQuery: noConflict

Question

Simplemente no puedo resolver esto. Dios mío, hace que me duela el cerebro, así que me dirijo a ti, la buena gente de Internet.

He estado mirando la documentación de la función jQuery $.noConflict() sin suerte.

Mi problema es que el sitio en el que estoy trabajando ya incluye jQuery 1.1.3.1, pero quiero hacer un trabajo de interfaz de usuario impresionante y elegante en algunos lugares, así que quiero usar 1.4.2 por razones obvias.

He estado intentando ejecutar esto en paralelo, pero parece que no puedo ejecutar ningún código. También necesito implementar algunos complementos utilizando 1.4.2, por lo que no estoy seguro de si poner jQuery en algo como $j funcionaría, ya que obviamente los complementos recogerían $ y jQuery como 1.1.3.1 lugar de 1.4.2 .

¿Hay alguna manera de envolver mi código en un bloque noConflict() y también incluir los complementos que necesito para crear un bloque autocontenido de código 1.4.2 ?

Cualquier ayuda sería fantástica, ya que mi pobre mente llora en medio de un vasto páramo que es la documentación API.

Answer 1

jQuery no-conflict es una opción ofrecida por el equipo de jQuery para superar los conflictos entre los diferentes frameworks o bibliotecas de JS. Estamos reemplazando el $ a una nueva variable y asignando a jQuery cuando usamos el método noconflict.

 <button>Test jQuery noConflict</button>
<script>
var newjq = $.noConflict();
newjq(document).ready(function(){
newjq("button").click(function(){
newjq("p").text("Wahh..! Its working!");
});
});
</script>

Podemos usar el signo $ como abajo también, no crea ningún conflicto también

$.noConflict();
jQuery(document).ready(function($) {
// Code that uses jQuery''s $ can follow here.
});

Answer 2

Deberías publicar un ejemplo que no esté funcionando. Apuesto a que lo aclararíamos de inmediato.

No creo que noConflict sea un ''bloque'' exactamente. Utiliza noConflict para decirle a jQuery que desea que elimine todo lo que declare del espacio de nombres global de JavaScript (porque desea cargar jQuery nuevamente y reutilizar esos nombres).

En una página con más de 1 instancia de jQuery cargada, ambas instancias deben usar noConflict. No sé si es posible cargar una segunda instancia de jQuery si ya hay una instancia cargada y esa instancia no llamó a noConflict.

@SLaks y @galambalazs: a veces se escribe una pequeña cantidad de contenido que se mostrará dentro de una página más grande, como un portal. El portal ya utiliza una versión (n obsoleta) de jQuery, pero necesita una versión más reciente. Además, no controla la página del portal más grande, solo el contenido que está escribiendo que se mostrará en él.

Este escenario describe con precisión el trabajo real que hago comúnmente.

Answer 3

Estoy de acuerdo con otras publicaciones que sugieren intentar actualizar a 1.4.2 en todos los ámbitos ... Dicho esto, claramente tiene una buena razón para intentar lo que está intentando hacer. Que yo sepa, no hay una manera fácil de lidiar con su situación (ya que yo también he intentado algo similar).

"noConflict" simplemente libera la variable "$" global para que otras bibliotecas / scripts puedan usarla con seguridad. Dado que está intentando usar dos versiones de jQuery, "noConflict" no es realmente útil aquí ... llamarlo para ambas versiones de jQuery no cambia el hecho de que ambas versiones todavía necesitan hacer referencia al objeto global "jQuery" ( de los cuales solo puede haber uno ...).

El problema (como claramente se sabe) es que al cargar la segunda versión de jQuery se "pegará" el objeto jQuery original (y todas las "personalizaciones" hechas por los complementos).

La única solución confiable (aunque increíblemente ineficiente) que podría encontrar es:

• Cargue la versión jQuery (antigua) existente y los complementos (suponiendo que no pueda evitar esto)
• Carga la nueva versión de jQuery.
• Recarga y complementos existentes y cualquier complemento nuevo que quieras usar
• Prueba extensivamente

Answer 4

Muy tarde ... pero podría ayudar a alguien - tiró esto juntos.

/**
*********************************************************************************************************
* jQuery version check
* $.noConflict() is not enough to ensure jQuery as well as $
* has correct version (can cause troubles with jQuery plugins that use fn(){}(jQuery);
*
* useage: restoreJquery(''1.10.2'',true) //for unminimized dev version
* restoreJquery(''1.10.2'') //for minimized version
* restoreJquery(''1.10.2'',true,myFunction) //for minimized version, that executes a function once jQuery is in the page
*
*
**/
function restoreJquery(wantedVersion,devVersion,callback) {
if(!wantedVersion){
wantedVersion= ''1.10.2'';
}
//is current jQuery version ===wanted version? (double check to avoid undefined errors)
if($ && $.fn.jquery!==wantedVersion){
//if not invoke noConflict with true (true=gives up the jQuery name space aswell as $)
var $jQuery = jQuery.noConflict(true);
//Line Assign the new object to new instantiated versions of jQuery
var $=jQuery=$jQuery;
}
//if jQuery is still not the correct version inject it into page via plain vanilla js
//if $ does not exist or the version is wrong inject it into the page
if(!$ || $.fn.jquery!==wantedVersion){
var head=document.getElementsByTagName(''head'')[0], //get Head
jqPath=wantedVersion+''jquery.'', // ex ''1.10.2/jquery.
script=document.createElement(''script''); //create empty scripttag
if(devVersion){ //minimized or not?
jqPath+=''min.js'';
}else{
jqPath+=''js'';
}
script.src=''//http://ajax.googleapis.com/ajax/libs/jquery/''+jqPath; //create src path
script.type=''text/javascript''; //add type
script.async=true; //set async to true
//real browsers
script.onload=callback; //call callback on load
//Internet explorer doesnt support onload on script (typical ie)
script.onreadystatechange = function() {
if (this.readyState == ''complete'') {
callback();
}
}
head.appendChild(script);
}else{
//otherwise call the callback since noConflict solved our jQuery versioning issues
callback();
}
};

Answer 5

Recientemente tuve un problema similar cuando estaba usando jQuery v1.3.2 en una página, pero una ventana emergente de cuestionario de un tercero estaba usando una versión anterior en la misma página. Finalmente logré resolver el problema. Hice referencia a jQuery 1.3.2 de la siguiente manera:

 <script type="text/javascript" src"/Scripts/jquery-1.3.2.min.js"></script>
<script type="text/javascript">
jq132 = jQuery.noConflict(true);
</script> 

Luego modifiqué todo mi código de jQuery para usar jq132 en lugar de $. Luego hice una búsqueda y reemplazo en todos los complementos que estaba usando para reemplazar "$ (" con "jq132 (" y "$." Con "jq132." Puede haber un enfoque más elegante, pero esto funcionó para mí. Estoy lejos de ser un experto en jQuery, por lo que puede haber otra sintaxis de $ que deba manejar (es decir, no solo "." Y "(").).

Answer 6

Si tiene dos o tres jQuery en la misma página, simplemente coloque una variable diferente para cada jQuery diferente.

Ejemplo:

<script type="text/javascript">
var $s = jQuery.noConflict();
$s(document).ready(function() {
$s(''#news-container'').vTicker({
speed: 500,
pause: 3000,
animation: ''fade'',
mousePause: true,
showItems: 2
});
});
</script>
<script type="text/javascript">
var $j = jQuery.noConflict();
$j(document).ready(function() {
$j(''.sf-menu ul'').superfish({
delay: 1000,
animation: {
opacity: ''show'',
height: ''show''
},
speed: ''medium'',
autoArrows: false,
dropShadows: ''medium''
});
});
</script>

Answer 7

Simplemente debe actualizar todo el sitio a 1.4.2.
jQuery en general no tiene muchos cambios de última hora, por lo que no debería ser tan difícil.

Answer 8

Un consejo sólido: no enfatice su ancho de banda ni el de sus visitantes con dos versiones de jQuery. Cambia todo tu código base a la última versión. Tiene menos errores , más soporte y mejor comportamiento.