Problema con Jquery al cargar en el mismo div

envasados · #1 (**permalink**) 16/12/2009, 01:34

Buenos días!

Pues ese es mi problema con jquery, cuando el enlace es de un div diferente si que me lo carga en el otro div, pero si lo quiero cargar desde el mismo div se me carga en la pagina completa.

Este es el script donde productos es el id de la tabla y contenido el div donde quiero que se cargue, y todo ello se encuentro en el div contenido.

Un saludo y muchas gracias

Código:

<script type="text/javascript">
jQuery.noConflict()
jQuery(document).ready(function(){
   jQuery("#productos a").each(function(){
      var href = jQuery(this).attr("href");
      jQuery(this).attr({ href: "#"});
      jQuery(this).click(function(){
         jQuery("#contenido").load(href);
      });
   });
});

mayid · #2 (**permalink**) 16/12/2009, 07:35

Antes de revisar mas a fondo, te propongo que incluyas return false al final del script. De no hacerlo, es muy posible que tu pagina se recargue:

Cita:

jQuery(document).ready(function(){
jQuery("#productos a").each(function(){
var href = jQuery(this).attr("href");
jQuery(this).attr({ href: "#"});
jQuery(this).click(function(){
jQuery("#contenido").load(href);
return false
});
});
});

envasados · #3 (**permalink**) 16/12/2009, 08:43

Cita:

Iniciado por mayid

Antes de revisar mas a fondo, te propongo que incluyas return false al final del script. De no hacerlo, es muy posible que tu pagina se recargue:

gracias, pero tampoco funciona

envasados · #4 (**permalink**) 16/12/2009, 08:45

este es todo el codigo que tengo, los dos primeros scripts funcionan biien, pero yo pienso porque cargan desde otro div, en cambio el que carga desde el mismo div no funciona, no se por donde mirarlo ya

Código:

<script type="text/javascript">
jQuery.noConflict()
jQuery(document).ready(function(){
   jQuery("#nav a").each(function(){
      var href = jQuery(this).attr("href");
      jQuery(this).attr({ href: "#"});
      jQuery(this).click(function(){
         jQuery("#contenido").load(href);
		});
   });
});
</script>
<script type="text/javascript">
jQuery.noConflict()
jQuery(document).ready(function(){
   jQuery("#MenuBar1 a").each(function(){
      var href = jQuery(this).attr("href");
      jQuery(this).attr({ href: "#"});
      jQuery(this).click(function(){
         jQuery("#contenido").load(href);
		});
   });
});
</script>
<script type="text/javascript">
jQuery.noConflict()
jQuery(document).ready(function(){
   jQuery("#productos a").each(function(){
      var href = jQuery(this).attr("href");
      jQuery(this).attr({ href: "#"});
      jQuery(this).click(function(){
         jQuery("#contenido").load(href);
		});
   });
});

mayid · #5 (**permalink**) 16/12/2009, 11:48

Creo que hay un error de logica secuencial:

Cita:

jQuery(this).attr({ href: "#"});
jQuery(this).click(function(){
jQuery("#contenido").load(href);
});

Primero estas invalidando el atributo href:

Cita:

jQuery(this).attr({ href: "#"});

Y luego estas asignando ese href al ajax:

Cita:

jQuery("#contenido").load(href);

Lo que estas pidiendo es cargar la pagina # con load.

envasados · #6 (**permalink**) 16/12/2009, 15:48

Cita:

Iniciado por mayid

Creo que hay un error de logica secuencial:

Primero estas invalidando el atributo href:

Y luego estas asignando ese href al ajax:

Lo que estas pidiendo es cargar la pagina # con load.

entonces como lo solucionaria, no se por donde cojerlo

muchas gracias

mayid · #7 (**permalink**) 16/12/2009, 18:30

Cita:

jQuery("#productos a").each(function(){
var href = jQuery(this).attr("href");
jQuery(this).attr({ href: "#"});
jQuery(this).click(function(){
jQuery("#contenido").load(href);
return false
});

Perdon, dije mal. Estas almacenando el atributo href en una variable llamada href. Ok.

Voy a pensar en otra cosa. Tu script parece perfecto. Que dice el html?

envasados · #8 (**permalink**) 17/12/2009, 01:51

pongo este de ejemplo que me carga el enlace dentro del div contenido, y cuando le doy al enlace en vez de cargarme la pagina terra en el div contenido me lo carga en la pagina completa.

Código:

<div id="productos">
<a href="http://www.terra.es" >Productos</a>
</div>

Dany_s · #9 (**permalink**) 17/12/2009, 07:01

lo que quieres es que aparezca la pagina de terra dentro de contenido? no se puede cargar una pagina externa al dominio con ajax pero puedes usar un iframe

Código:

jQuery(document).ready(function(){
   jQuery("#productos a").each(function(){
      var href = jQuery(this).attr("href");
      jQuery(this).attr({ href: "#"});
      jQuery(this).click(function(){
         iframe = $('<iframe>').attr('src', href);
         $("#contenido").html(iframe);
		});
   });
});

envasados · #10 (**permalink**) 17/12/2009, 08:29

Cita:

Iniciado por Dany_s

lo que quieres es que aparezca la pagina de terra dentro de contenido? no se puede cargar una pagina externa al dominio con ajax pero puedes usar un iframe

Código:

jQuery(document).ready(function(){
   jQuery("#productos a").each(function(){
      var href = jQuery(this).attr("href");
      jQuery(this).attr({ href: "#"});
      jQuery(this).click(function(){
         iframe = $('<iframe>').attr('src', href);
         $("#contenido").html(iframe);
		});
   });
});

no, no quiero cargar una pagina externa, he puesto el enlace de ejemplo, pero en vez de si fuera www.terra.es el enlace, fuera productos.php, archivo que esta en la raiz de mi sitio tampoco funciona.

mayid · #11 (**permalink**) 17/12/2009, 12:08

Tu estructura es esta?

Cita:

<div id="contenidos">
<div id="productos">
<a href="terra.php" >Productos</a>
</div>
</div>

Yo no termino de entender que es adentro y afuera:

Cita:

cuando el enlace es de un div diferente si que me lo carga en el otro div, pero si lo quiero cargar desde el mismo div

Todo parece bien en tu script.

Otra cosa: probastes jugar con alert() a ver que obtenes?

envasados · #12 (**permalink**) 18/12/2009, 01:40

Cita:

Iniciado por mayid

Tu estructura es esta?

Yo no termino de entender que es adentro y afuera:

Todo parece bien en tu script.

Otra cosa: probastes jugar con alert() a ver que obtenes?

si que es esa, lo que el div

Código:

<div id="productos">
<a href="terra.php" >Productos</a>
</div>

se carga con la llamada desde otro div

mayid · #13 (**permalink**) 18/12/2009, 08:45

ok. Algo asi:

Cita:

<div id="contenidos">

<div id="productos">
<a href="terra.php" >Productos</a>
</div>

<div id="sesrvicios">
<a href="terraplen.php" >Servicios</a>
</div>

</div>

Si todo carga en "contenido", entonces siempre cargas desde adentro. O tambien hay enlaces con evento onclick por fuera de tu div contenedor?

Vamos despacito, pero ojala se resuelva esto pronto.

envasados · #14 (**permalink**) 18/12/2009, 12:43

Cita:

Iniciado por mayid

ok. Algo asi:

Si todo carga en "contenido", entonces siempre cargas desde adentro. O tambien hay enlaces con evento onclick por fuera de tu div contenedor?

Vamos despacito, pero ojala se resuelva esto pronto.

si así es, pero los div productos y servicios, los cargo en el div contenidos desde otro div externo a contenidos, llamado menuizqueirda

mayid · #15 (**permalink**) 18/12/2009, 13:58

Y esto se refiere al menu lateral o al div #contenido? O a los dos a la vez?

Cita:

jQuery("#productos a")

envasados · #16 (**permalink**) 21/12/2009, 00:52

Cita:

Iniciado por mayid

Y esto se refiere al menu lateral o al div #contenido? O a los dos a la vez?

el div productos se carga en el div contenido

Dany_s · #17 (**permalink**) 21/12/2009, 04:36

ah el link producto lo agregas con ajax?

proba con live

Código HTML:

$('#productos a').live('click', function(){
     $("#contenido").load(href);
});

mayid · #18 (**permalink**) 21/12/2009, 09:04

Cita:

Iniciado por envasados

este es todo el codigo que tengo, los dos primeros scripts funcionan biien, pero yo pienso porque cargan desde otro div, en cambio el que carga desde el mismo div no funciona, no se por donde mirarlo ya

Código:

<script type="text/javascript">
jQuery.noConflict()
jQuery(document).ready(function(){
   jQuery("#nav a").each(function(){
      var href = jQuery(this).attr("href");
      jQuery(this).attr({ href: "#"});
      jQuery(this).click(function(){
         jQuery("#contenido").load(href);
		});
   });
});
</script>
<script type="text/javascript">
jQuery.noConflict()
jQuery(document).ready(function(){
   jQuery("#MenuBar1 a").each(function(){
      var href = jQuery(this).attr("href");
      jQuery(this).attr({ href: "#"});
      jQuery(this).click(function(){
         jQuery("#contenido").load(href);
		});
   });
});
</script>
<script type="text/javascript">
jQuery.noConflict()
jQuery(document).ready(function(){
   jQuery("#productos a").each(function(){
      var href = jQuery(this).attr("href");
      jQuery(this).attr({ href: "#"});
      jQuery(this).click(function(){
         jQuery("#contenido").load(href);
		});
   });
});

Mira, creo que el GRAN problema es volver a repetir una y otra vez esta linea:

Cita:

jQuery(document).ready(function(){

No me habia dado cuenta antes. Pero es asi.

Ademas, por que tenes tres secciones de script en vez de una? Podemos chusmear en tu pagina web? Donde esta alojada?

envasados · #19 (**permalink**) 22/12/2009, 07:40

Cita:

Iniciado por mayid

Mira, creo que el GRAN problema es volver a repetir una y otra vez esta linea:

No me habia dado cuenta antes. Pero es asi.

Ademas, por que tenes tres secciones de script en vez de una? Podemos chusmear en tu pagina web? Donde esta alojada?

voy a probar, no tengo la pagina en la web, la tengo en local

envasados · #20 (**permalink**) 22/12/2009, 07:47

Cita:

Iniciado por envasados

voy a probar, no tengo la pagina en la web, la tengo en local

sigo con el problema, los enlaces que vienen de los div (nav y MenuBar1) que no estan dentro de el div contenido me cargan bien, pero el div (productos) que esta dentro del div contenido no lo carga dentro, aqui adjunto el codigo modificado

Código:

<script type="text/javascript">
jQuery.noConflict()
jQuery(document).ready(function(){
   jQuery("#nav a , #MenuBar1 a , #productos a").each(function(){
      var href = jQuery(this).attr("href");
      jQuery(this).attr({ href: "#"});
      jQuery(this).click(function(){
         jQuery("#contenido").load(href);
		});
   });
});
</script>

gracias por la ayuda

Dany_s · #21 (**permalink**) 22/12/2009, 08:14

colocar el html

no se si entiendo bien pero por lo que dices el div productos lo estas llamando con ajax, por eso te digo que pruebes con live.

coloca el html asi vemos

envasados · #22 (**permalink**) 23/12/2009, 00:50

este el index.php

Código:

<!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>Empresa</title>
<link href="estilo1.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
jQuery.noConflict()
jQuery(document).ready(function(){
   jQuery("#nav a , #MenuBar1 a , #productos a").each(function(){
      var href = jQuery(this).attr("href");
      jQuery(this).attr({ href: "#"});
      jQuery(this).click(function(){
         jQuery("#contenido").load(href);
		});
   });
});
</script>
<script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<script type="text/javascript" src="videobox/js/mootools.js"></script>
<script type="text/javascript" src="videobox/js/swfobject.js"></script>
<script type="text/javascript" src="videobox/js/videobox.js"></script>
<link rel="stylesheet" href="videobox/css/videobox.css" type="text/css" media="screen" />
<link href="SpryAssets/SpryMenuBarVertical_iz.css" rel="stylesheet" type="text/css" />
</head>
<body class="estilo1">
<div id="container">
	<div id="cabecera"></div>
      <div id="menuiz"><?php require_once('menuiz.inc.php'); ?></div>
      <div id="menudcha">
        <p id="curva_arriba">&nbsp;</p>
        <p><img src="imagenes/imagen.png"  width="157" height="65" longdesc="imagen" id="logo_menudcha" /></p>
	  <?php require_once('menudcha.inc.php'); ?>
        <p>&nbsp;</p>
        <p id="curva_abajo">&nbsp;</p>
        </div>
      <div id="contenido"><?php require_once('contenido.inc.php'); ?></div>	  
      <div id="menubajo">
      </div>   
</div>
</body>
</html>

Dany_s · #23 (**permalink**) 23/12/2009, 06:26

justo lo importante que va con el caso que son tu divs #nav, #MenuBar1 y #productos no aparece poque seguro lo tienes en tus archivos php, lo que tienes que hacer es poner solo código html y lo de jquery, ejecuta ese index y copia el código que se genera o sea navegador->ver codigo fuente sino es imposible ver que tienes

mayid · #24 (**permalink**) 23/12/2009, 08:27

CIerto. Habria que publicar esto, tomandolo desde el codigo fuente del navegador:

Cita:

<?php require_once('menuiz.inc.php'); ?>

Cita:

<?php require_once('menudcha.inc.php'); ?>

envasados · #25 (**permalink**) 29/12/2009, 05:58

este es el primer codigo de cuando abre la pagina

Código:

<!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>Empresa</title>
<link href="estilo1.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript"> 
jQuery.noConflict()
jQuery(document).ready(function(){
   jQuery("#nav a , #MenuBar1 a , #productos a").each(function(){
      var href = jQuery(this).attr("href");
      jQuery(this).attr({ href: "#"});
      jQuery(this).click(function(){
         jQuery("#contenido").load(href);
		});
   });
});
</script>
<script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<script type="text/javascript" src="videobox/js/mootools.js"></script>
<script type="text/javascript" src="videobox/js/swfobject.js"></script>
<script type="text/javascript" src="videobox/js/videobox.js"></script>
<link rel="stylesheet" href="videobox/css/videobox.css" type="text/css" media="screen" />
<link href="SpryAssets/SpryMenuBarVertical_iz.css" rel="stylesheet" type="text/css" />
</head>
<body class="estilo1">
<div id="container">
	<div id="cabecera"></div>
      <div id="menuiz">        
<ul id="MenuBar1" class="MenuBarVertical">
            <li><a href="">PRODUCTOS 1</a> </li>
                <li><a href="#">PRODUCTOS 2</a></li>
                <li><a href="piscinas.inc.php">PRODUCTOS 3</a></li>    
                <li><a href=>PRODUCTOS 4</a></li>
            <li><a href="#">PRODUCTOS 5</a></li>
</ul>
          
          <p><a href="imagenes/iso 9001" class="calidad" /></a> 
            <a href="imagenes/iso14001" target="_blank"><img src="FOTO.png" width="182" height="56" class="mmaa" /></a></p>
 
        
<script type="text/javascript"> 
<!--
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
//-->
</script></div>
      <div id="menudcha">
        <p id="curva_arriba">&nbsp;</p>
        <p><img src="imagenes/FOTO2.png"  width="157" height="65"  id="logo_menudcha" /></p>
	  		<table id="nav">         
          <tr>
            <td><span class="Estilo1">&nbsp;</span></td>
          </tr>
          <tr>
            <td><a href="contenido.inc.php">empresa</a></td>
          </tr>
          <tr>
            <td><a href="equipo.inc.php">equipo humano</a></td>
          </tr>
          <tr>
            <td><a href="canal_noticias.inc.php">noticias</a></td>
          </tr>
          <tr>
            <td><a href="productos.inc.php">productos</a></td>
          </tr>
          <tr>
            <td><a href="contacto.inc.php">contacto</a></td>
          </tr>
          </table>
		
 
<p><a href="/videos/video1.swf" rel="vidbox" title="2008"><img src="imagenes/IMAGEN3.png" alt="" width="28" height="35" /> </br>
Video Premio Empresa 2008</a></p>
<p><a href="h/videos/video2.swf" rel="vidbox" title="2009"><img src="imagenes/IMAGEN4.png" alt="" width="100" height="33" /><br />Video  2009</a></p>
 
 
        <p>&nbsp;</p>
        <p id="curva_abajo">&nbsp;</p>
        </div>
      <div id="contenido">        <p class="titulo">Empresa</p>
        <p class="parrafo"><img src="imagenes/imagen6.png"  width="310" height="235" class="fltlft" /> Dedicacion a .. </p>
        <p class="parrafo">Somos empresa ......</p>
        <p class="parrafo">Nuestra ...</p>
<p class="parrafo">&nbsp;</p>
        
        <p class="parrafo_tit"><img src="imagenes/imagen8.png" width="525" height="25"  /></p>
<p><img src="imagenes/imagen9.png" width="540" height="85"/></p>
</div>	  
      <div id="menubajo">
      </div>   
</div>
</body>
</html>

Dany_s · #26 (**permalink**) 29/12/2009, 06:10

el div #productos que contienen los enlaces? esta en algun archivo php y lo cargas mediante ajax cuando haces click en algun enlace?

creo que la respuesta es si, entonces hace lo que te dije mas arriba, en fijate el evento live

Código HTML:

$('#productos a').live('click', function(){
     $("#contenido").load(href);
});

en vez de

Código HTML:

jQuery(this).click(function(){
         jQuery("#contenido").load(href);
});

envasados · #27 (**permalink**) 11/01/2010, 01:00

Cita:

Iniciado por Dany_s

el div #productos que contienen los enlaces? esta en algun archivo php y lo cargas mediante ajax cuando haces click en algun enlace?

creo que la respuesta es si, entonces hace lo que te dije mas arriba, en fijate el evento live

Código HTML:

$('#productos a').live('click', function(){
     $("#contenido").load(href);
});

en vez de

Código HTML:

jQuery(this).click(function(){
         jQuery("#contenido").load(href);
});

buenos días!

He probado, pero sigue sin funcionar, ya no se por donde mirar

Dany_s · #28 (**permalink**) 11/01/2010, 04:50

es difífil la comunucación jeje no contestas las preguntas
hace una cosa, crearte archivos SOLO con código HTML similar y simple y postealo sino es díficil adivinar que es lo que tienes

si llamas a un archivo mediante ajax postea el código de ese archivo también asi podemos tener una copia exacta de lo que tu tienes