Resolver conflictos en jQuery

Seguramente más de una vez has tenido problemas cuando quieres combinar un easyslider con un lightbox, o con un tooltip o cualquier otra librería jQuery.

Afortunadamente jQuery ha creado una función muy simple para solucionar este conflicto. Es tan fácil como agregar a tu código jQuery.noConflict();

Pero veamos como funciona, supongamos que quieres hacer funcionar un easyslider con un colorbox, tendrás estos códigos de forma normal:

Código :

<!--código del easyslider-->   
<script type="text/javascript" src="js/jquery.js"></script>

<script type="text/javascript" src="js/easySlider1.7.js"></script>
<script type="text/javascript">
   $(document).ready(function(){   
      $("#slider").easySlider({
         auto: true, 
         continuous: true,
         numeric: true
      });
   });   
</script>

<!--código del colorbox-->
<script src="colorbox/jquery.colorbox.js"></script>
<script type="text/javascript">
   $(document).ready(function(){
      $("a[rel='example1']").colorbox();
      $("a[rel='example2']").colorbox({transition:"fade"});
      $("a[rel='example3']").colorbox({transition:"none", width:"75%", height:"75%"});
      $("a[rel='example4']").colorbox({slideshow:true});
      $(".example5").colorbox();
      $(".example6").colorbox({iframe:true, width:345, height:300});
      $(".example7").colorbox({width:"80%", height:"80%", iframe:true});
      $(".example8").colorbox({width:"50%", inline:true, href:"#inline_example1"});
      $(".example9").colorbox({
         onOpen:function(){ alert('onOpen: colorbox is about to open'); },
         onLoad:function(){ alert('onLoad: colorbox has started to load the targeted content'); },
         onComplete:function(){ alert('onComplete: colorbox has displayed the loaded content'); },
         onCleanup:function(){ alert('onCleanup: colorbox has begun the close process'); },
         onClosed:function(){ alert('onClosed: colorbox has completely closed'); }
         });
         

         $("#click").click(function(){ 
         $('#click').css({"background-color":"#f00", "color":"#fff", "cursor":"inherit"}).text("Open this window again and this message will still be here.");
         return false;
      });
   });
</script>

Crea una variable especial de jQuery con noConflict

Esto te crea conflictos y una de las 2 librerías deja de funcionar, por lo general el easyslider. Para evitarlo, lo único que tienes que hacer es insertar el código que vez abajo en cualquiera de los scripts y sustituir todos los $ con la palabra jQuery.

Código :

<script src="colorbox/jquery.colorbox.js"></script>
<script type="text/javascript">
   jQuery.noConflict();
   jQuery(document).ready(function(){
   jQuery("a").colorbox();
   jQuery("a").colorbox({transition:"fade"});
   jQuery("a").colorbox({transition:"none", width:"75%", height:"75%"});
   jQuery("a").colorbox({slideshow:true});
   jQuery(".example5").colorbox();
   jQuery(".example6").colorbox({iframe:true, width:345, height:300});
   jQuery(".example7").colorbox({width:"80%", height:"80%", iframe:true});
   jQuery(".example8").colorbox({width:"50%", inline:true, href:"#inline_example1"});
   jQuery(".example9").colorbox({
         onOpen:function(){ alert('onOpen: colorbox is about to open'); },
         onLoad:function(){ alert('onLoad: colorbox has started to load the targeted content'); },
         onComplete:function(){ alert('onComplete: colorbox has displayed the loaded content'); },
         onCleanup:function(){ alert('onCleanup: colorbox has begun the close process'); },
         onClosed:function(){ alert('onClosed: colorbox has completely closed'); }
         });
         
   jQuery("#click").click(function(){ 
   jQuery('#click').css({"background-color":"#f00", "color":"#fff", "cursor":"inherit"}).text("Open this window again and this message will still be here.");
         return false;
      });
   });
</script>

Y listo, ¿bastante sencillo no? Pero ¿si tuvieras 3 librerías? Muy fácil, sólo asigna Jquery.noConflict() a una variable y utilízala de la misma forma:

Código :

<script type="text/javascript" src="js/easySlider1.7.js"></script>
<script type="text/javascript">
       var a = jQuery.noConflict();
   a(document).ready(function(){   
      a("#slider").easySlider({
         auto: true, 
         continuous: true,
         numeric: true
      });
   });   
</script>

Ahora puedes usar todas las librerías que quieras al mismo tiempo. Funciona también para conflictos con Scriptaculous y Prototype. Sólo recuerda, úsalos adecuadamente, no abuses de ellos, no conviertas tu página en un carnaval.

¿Sabes SQL? ¿No-SQL? Aprende MySQL, PostgreSQL, MongoDB, Redis y más con el Curso Profesional de Bases de Datos que empieza el martes, en vivo.