Implementar 2 jquery diferentes.

soru13 · 22 Mayo 2012, 23:46 PM

Hola, resulta que en la misma página necesito implementar un archivo "jquery-1.7.1.js" y a la vez otro "jquery.min.js".

El problema es que si incluyo este último, me dejan de funcionar los scripts que usan "jquery-1.7.1.js", y necesito los dos ya que cada uno sirve para distintos scripts.

¿Alguién sabe como puedo arreglarlo?

Un saludo y gracias.

Kase · 23 Mayo 2012, 06:51 AM

pekeña y rapida busqueda en google... http://www.sqleros.com.ar/2011/05/que-es-lo-que-hace-jquerynoconflict.html

soru13 · 23 Mayo 2012, 15:52 PM

Estuve mirando varios tutoriales y esto es lo más cercano que llegué a hacer, pero aun así no funciona.

slider.js

Código (javascript) [Seleccionar]

  $(function() {
  $( "#slider-range" ).slider({
   range: true,
   min: 18,
   max: 65,
   values: [ 18, 25 ],
   slide: function( event, ui ) {
    $( "#amount" ).val( "" + ui.values[ 0 ] + " - " + ui.values[ 1 ] );
   }
  });
  $( "#amount" ).val($( "#slider-range" ).slider( "values", 0 ) +
   " - " + $( "#slider-range" ).slider( "values", 1 ) );
  })(jQuery);
  jQuery.noConflict();
  $(function() {
  $( "#tarifa" ).slider({
   range: true,
   min: 20,
   max: 600,
   values: [ 20, 80 ],
   slide: function( event, ui ) {
    $( "#cantidad" ).val(ui.values[ 0 ] + " - " + ui.values[ 1 ] + " € " );
   }
  });
  $( "#cantidad" ).val($( "#tarifa" ).slider( "values", 0 ) +
   " - " + $( "#tarifa").slider("values", 1 ) + " € ");
 })(jQuery);
 jQuery.noConflict();

index.html

Código (javascript) [Seleccionar]

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
   

<link rel="stylesheet" href="inc/jquery.ui.all.css">
 <script src="./inc/jquery-1.7.1.js"></script>
    <script>jQuery.noConflict();</script>
 <script src="./inc/jquery.ui.core.js"></script>
 <script src="./inc/jquery.ui.widget.js"></script>
 <script src="./inc/jquery.ui.mouse.js"></script>
 <script src="./inc/jquery.ui.slider.js"></script>
    <script src="./inc/slider_form.js"></script>
<!-- lightbox -->
<script type="text/javascript" src="./inc/lightbox/javascript/jquery.min.js"></script>
<script>jQuery.noConflict();</script>
<link rel="stylesheet" type="text/css" href="./inc/lightbox/javascript/lightbox/themes/default/jquery.lightbox.css" />
<script type="text/javascript" src="./inc/lightbox/javascript/lightbox/jquery.lightbox.min.js"></script>
<!-- fin -->
</head>

<body><a href="contacto.php?lightbox[iframe]=true&lightbox[width]=700&lightbox[height]=700" class="lightbox">ABRIR</a>

<div class="demo"><!-- SLIDER EDAD -->
<p>
 <label for="amount">Edad:</label>
    <input type="text" name="edad" id="amount" style="border:0; color:#f6931f; font-weight:bold; " />
</p>

<div id="slider-range" style="width:150px;margin-left:10px;"></div>


<script type="text/javascript">
  jQuery(document).ready(function($){
    $('.lightbox').lightbox();
  });
</script>
</body>
</html>

¿Algún consejo?

Gracias

[u]nsigned · 23 Mayo 2012, 18:31 PM

El archivo jquery.min.js de que version es?

No veo la necesidad de usar versiones diferentes, solo deberias usar la mas nueva, y evitar usar plugins o widgets que usen versiones viejas.

soru13 · 23 Mayo 2012, 21:23 PM

el caso es que si quito el "jquery.min.js" y dejo el "jquery-1.7.1.js", me deja de funcionar el lightbox que es el que funciona cuando estan los 2 scripts en la misma página.

EFEX · 24 Mayo 2012, 06:34 AM

multiple-versions-of-jquery-on-the-same-page

how-to-two-different-jquery-on-the-same-page

Código (html4strict) [Seleccionar]


<html>
    <head>
        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
        <script type="text/javascript">
            jQuery.noConflict(  )
            jQuery144 = jQuery
            console.log(jQuery144, jQuery)
        </script>
        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
        <script type="text/javascript">
            jQuery144(function($) {
                console.log("hello", $.fn.jquery)
            })
            jQuery(function($) {
                console.log("world", $.fn.jquery)
            })
        </script>
    </head>
    <body>
    </body>
</html>

Es un dolor de cabeza hacer esta practica.

soru13 · 24 Mayo 2012, 22:05 PM

SOLUCIONADO, GRACIAS!