load() jquery, cargar en un div

gbjuanlu · 12/03/2012, 05:52

Hola a todos, antes de nada quiero dar las gracias de antemano por el simple hecho de leer el post.
Estoy tratando de cargar una página en una capa con la funcion load de jquery, hasta ahí todo perfecto.
El problema viene cuando una vez cargada la página en la capa, quiero hacer un enlace de la pagina cargada y que se vuelva a visualizar en la misma capa.

Ejemplo:
Al pulsar Enlace 1 me carga una pagina en una capa llamada #mostrar.
Y dentro de la página contiene un enlace que al pulsarlo quiero que me lo cargue tambien en la capa #mostrar

Codigo index.php

Código Javascript:

Ver original<html >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sin título</title>
<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
<script type="text/javascript">
    var x;
    x=$(document);
    x.ready(inicio);
    
    function inicio(){
            var x;
            x=$("a");
            x.click(muestrame);
    }
     function muestrame(){
         var pagina=$(this).attr("href");
         var x=$("#mostrar");
         x.load(pagina);
         return false;
     }
 
 
</script>
</head>
 
<body>
<a href="pagina2.php?color=verde">Verde</a>
<div id="mostrar"> </div>
</body>
</html>

En la página q carga hay un enlace y quiero q lo muestre tambien en la misma capa #mostrar

Código PHP:

Ver original<?php
if($_GET['color']=='verde')
    echo "El color que has pulsado es el verde";
 
?>
 
 
<a href="nuevo.php">Enlace que quiero que me cargue en la capa mostrar</a>

MUCHISIMAS GRACIAS DE ANTEMANO.

maycolalvarez · 12/03/2012, 07:28

POST REPETIDO: http://www.forosdelweb.com/f127/func...a-capa-981105/ favor no duplicar temas

para ello tendrías que asignar por jQuery live que todos los enlaces de la capa #mostrar ejecuten el enlace a #mostrar, para eso reasignando el evento onclick.

PD: según que la versión más nueva de jQuery tiene live implícito, pero no estoy seguro, consulte su API

gbjuanlu · 12/03/2012, 08:00

Perdona las molestias de duplicar el tema, me confundí de tema y vi que habia otro tema que le correspondía mas que este.
MUCHAS GRACIAS POR LA SOLUCIÓN
Queda así:

Código Javascript:

Ver originalfunction inicio(){
            var x;
            x=$("a").live("click",muestrame);
            x.click(muestrame);
    }

FUNCIONA CORRECTAMENTE

maycolalvarez · 12/03/2012, 08:05

recuerda usar preventDefault para desactivar el comportamiento por defecto de los links

gbjuanlu · 12/03/2012, 08:16

De antemano muchas gracias maycolalvarez.
La verdad esq soy nuevo en jquery , he buscado la opción prevenDefault pero no consigo entender su utilidad.
¿Para que me serviria a mí? y ¿Donde la tendría que poner?
MUCHAS GRACIAS

maycolalvarez · 12/03/2012, 12:34

para evitar el comportamiento por defecto del link, si no lo usas en algunos navegadores redireccionará como un link normal y tu objeto es evitarlo

gbjuanlu · 12/03/2012, 12:52

Donde pondría la función preventDefault(); ?

function inicio(){
var x;
x=$("a").live("click",muestrame);
x.click(muestrame);
x.prevenDefault();

}

Eso funciona, estaría bien?
muchas gracias

maycolalvarez · 12/03/2012, 13:19

debería ir en el manejador del evento, en la función muestrame

gbjuanlu · 12/03/2012, 13:24

Así quedaría no?

Código Javascript:

Ver originalfunction muestrame(){
         var pagina=$(this).attr("href");
         var x=$("#mostrar");
         x.load(pagina);
         return false;
         [COLOR="Red"]x.prevenDefault();[/COLOR]
     }

GRACIAS

maycolalvarez · 12/03/2012, 13:32

sí allí, pero es $(this).preventDefault()

y preferiblemente debe ser la primera instrucción de esa función, recuerda que todo lo que está debajo de return no se ejecuta, aunque como devuelves false; allí previenes el comportamiento por defecto, aunque no está de más usar el preventDefault