Pregunta curiosa links sin recargar

[Logotytype]

hola!! estoy leyendo mucho pero no he podido dar con esto: quiero evitar que un link o anchor <a> no recargue la pagina pero si que lo gre ejecutar una funcion javascript para traer algunos datos ( eso lo hago yo) , es posible evitar que un link a no recargue la pagina??

[JulioRFA]

Asi es, suponiendo que tu codigo Javascript lo adjuntas al evento "onclick" simplemente al final de tu función ponle

Código:

return false;

Devolviendo false se evita que el comportamiento predeterminado se cancele (normalmente que enlace a algo), simepre y cuando este activado javascript por supuesto.

[Logotytype]

lo que quiero tener es un boton con aspecto de link similar a los tabs que tiene facebook, muro informacion etc, asumo que son links, la pregunta es como hacen para evitar que recargue la pagina

[santris]

<script language="javascript">
function muestra(){
alert("hola mundo");
}
</script>
<a onclick="muestra()"><img src="tu_boton.jpg"/></a>

Saludos

[JulioRFA]

Ah ok... pues es una llamada AJAX. Lo que hacen los botones es pedir información al servidor de forma asincrona y luego la respuesta la inyecta en la página.

Busca algo de info sobre AJAX ;) y lo mejor será que uses un framework ya sea especializado en AJAX o algún otro más "completo" que te brinde la funcionalidad.

por ejemplo con jQuery, la forma más simple es:

Código:

$("div#container").load("url");

Eso simplemente hace una llamada AJAX a un recurso especificado en la URL y la respuesta la carga en un "div" con ID "container".

[Logotytype]

gracias por sus respuestas, pàra ser mas exacto las caracteristicas de mi boton deben ser estas:

1. solo texo (listo)
2. contiene un relleno padding de 4 x 3 (listo)
3 color de fondo (listo)


4to y mas complejo de explicar:: ustedes notan cuando se crea un link con href definido el link toma aspecto de "boton", osea al darle un click y arrastrar (en mozilla por ej) se nota como el texto el fondo y los colores hacen parte de un todo! es precisamente este efecto el que se pierde si no defino un href,

pero si lo defino, salta al href recargando la pagina...

[JulioRFA]

Jajaja, ya lo habia respondido, pero pues... va de nuevo, asi:

Código:

<a href="#" onclick="javascipt:return false;">Link</a>

[santris]

Iniciado por JulioRFA

Jajaja, ya lo habia respondido, pero pues... va de nuevo, asi:

Código:

<a href="#" onclick="javascipt:return false;">Link</a>

Y como llamas a la función??

[Logotytype]

gracias listo, me dieron ideas para conseguir el efecto, bueno en el href coloque href="javascript:funcion()" nunca se pierde el efecto y no se recarga,. gracias por la amabilidad.

[JulioRFA]

Iniciado por santris

Y como llamas a la función??

Ah pues... este es el modo "sucio", pero el "elegante" jaja... sería con eventos del DOM, así:

nuestro marcado va por ejemplo:

Código:

<a id="boton1" href="el_recurso_original.html"></a>

y el script:

Código:

function mi_funcion(){
.
.
.
}

document.getElementById('boton1').addEventListener('click',mi_funcion,false);

Acá hay mas info ;)

http://codexexempla.org/curso/curso_4_3_e.php

[santris]

Gracias por la info, de todas formas creo que @Logotytype lo ha resuelto bastante bien.

Saludos

[Logotytype]

lo habia solucionado pero decidi volver para ver q mas habian respondido , y si, esa ultima forma es la elegante, en ese el momento trataba de salir del paso de rapidez, en todos los navegadores funciona, pero ahora con mas calma lo cambiare hasta esa forma con el eventlistener en lo posible gracias!!