[SOLUCIONADO] Ajax Load; Que estoy haciendo mal?

[waltersele]

Hola señores, estoy intentando cargar mediante el método load un contenido en un article de manera asincronica(AJAX). El contenido lo pido por url's en php, pero algo estoy haciendo mal que no me funciona... os dejo el código, agradecería mucho que me ayudarais, pues ya he buscado mucho acerca del tema pero no lo consigo sacar! yo juraría que el jquery está bien, pero por lo que veo no! asi que no se cual puede ser mi error...

Este es el HTML:

Código:

<section id="containerExp">
	<article>
		<nav>
			<ul>
				<li><p><a id"muestrame" href="presentacion-casa.php?zona=fachada">Fachada</a></p></li>
				<li><p><a id"muestrame" href="presentacion-casa.php?zona=hall">Hall</a></p></li>
				<li><p><a id"muestrame" href="presentacion-casa.php?zona=salon">Salón</a></p></li>
				<li><p><a id"muestrame" href="presentacion-casa.php?zona=cocina">Cocina</a></p></li>
				<li><p><a id"muestrame" href="presentacion-casa.php?zona=habitaciones">Habitaciones</a></p></li>
			</ul>
		</nav>
	</article>
		
	<article id="contentHome">
		
	</article>

Este es el php:

Código:

<?php
 if($_GET['zona'] == "fachada"){
 	echo "Esto es fachada";
 }
  if($_GET['zona'] == "hall"){
 	echo "Esto es hall";
 }
  if($_GET['zona'] == "salon"){
 	echo "Esto es salon";
 }
  if($_GET['zona'] == "cocina"){
 	echo "Esto es fachada";
 }
  if($_GET['zona'] == "habitaciones"){
 	echo "Esto es habitaciones";
 }
?>

Y este el dichoso Jquery..

Código:

$(document).ready(inicio);
function inicio(){
	$("#muestrame").click(mostrar);
};
function mostrar(){
	var page = $(this).attr("href");
	$("#contentHome").load(page);
	return false;
};

Cuando pulso en el link, lo que hace es llevarme a la url, pero no me lo muestra en el #contentHome, que es como pretendo..=(
gracias de antemano señores. Un saludo

[Alexis88]

Estás asignando mal el id del enlace: id"muestrame". Debe ser así: id = "muestrame", sin embargo, intentas darle el mismo Id a todos los enlaces, lo cual está mal porque el Id debe ser único, en tal caso, asigna la misma clase para todos los enlaces e identifica el enlace al que se le dio clic por dicho nombre.

Código HTML:

<li>
    <p>
        <a href="presentacion-casa.php?zona=fachada" class = "ejemplo">Fachada</a>
    </p>
</li>
 
<li>
    <p>
        <a href="presentacion-casa.php?zona=hall" class = "ejemplo">Hall</a>
    </p>
</li>
 
<li>
    <p>
        <a href="presentacion-casa.php?zona=salon" class = "ejemplo">Salón</a>
    </p>
</li>
 
<li>
    <p>
        <a href="presentacion-casa.php?zona=cocina" class = "ejemplo">Cocina</a>
    </p>
</li>
 
<li>
    <p>
        <a href="presentacion-casa.php?zona=habitaciones" class = "ejemplo">Habitaciones</a>
    </p>
</li>
 

Código Javascript:

$(".ejemplo").click(function(e){
    e.preventDefault();
    mostrar();
});
 

También se te olvidó evitar que se ejecute el comportamiento por defecto del enlace al darle clic, el cual se evita con el método preventDefault, tal y como puedes ver en el código.

Saludos

[waltersele]

Madremia!!! Y yo venga a mirar el jquery y el php... muchisimas gracias alexis, por abrirme los ojos!