Problema recarga de pagina

[juanjexus]

Hola, quisiera a ver si me pueden ayudar.
Estoy haciendo un apartado en una web este tiene un menu: Prefencias, Mi cuenta.... vale para no tener que recargar la pagina cada vez que pulso un link, utilice el siguiente codigo:

Funcion

function Enviar(_pagina,capa) {
var ajax;
ajax = ajaxFunction();
ajax.open("POST", _pagina, true);
ajax.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");

ajax.onreadystatechange = function() {
if (ajax.readyState==1){
document.getElementById(capa).innerHTML = " Espere por favor...";
}
if (ajax.readyState == 4) {

document.getElementById(capa).innerHTML=ajax.respo nseText;
}}

ajax.send(null);
}

html donde utilizo la funcion

<a class="li_menu_a" title="Preferencias" href="javascript:Enviar('usuario_perfil/miperfil/modificar_perfil.php','contenido')">Preferencias</a>

<a class="li_menu_a" title="miperfil" href="javascript:Enviar('usuario_perfil/miperfil/modificar_perfil.php','contenido')">miperfil</a>

Con esto hago cargar una pagina en la DIV al darle al link.
Vale, ¿cual es el problema? Tengo un apartado que es mi perfil es un formulario para poder modificar el perfil del usuario realizado con php. Cuando termino de modificar el perfil le doy al botón enviar y me recarga la pagina entera, lo que me provoca que cargue la pagina por defecto al principio( se sale del la sección seleccionada mi perfil) y los datos del usuario no se cambian o no muestre mensajes de error por ejemplo de contraseña demasiada corta". Paso datos por post por si os aclara algo.
Espero haberme explicado bien, para cualquier duda preguntad.
Gracias de antemano

[fjrueda]

juanjexus ...

Si el enviar lo hace desde un input tipo submit es muy logico que se reenvie completa, es asi o estoy mal ?? ....

[juanjexus]

Iniciado por fjrueda

juanjexus ...

Si el enviar lo hace desde un input tipo submit es muy logico que se reenvie completa, es asi o estoy mal ?? ....

Si es así, ¿pero de que otra forma lo puedo hacer entonces?

[dontexplain]

Iniciado por juanjexus

Si es así, ¿pero de que otra forma lo puedo hacer entonces?

para eso usas

event.preventDefault()

o

return false;

al final de la función, después de la respuesta AJAX, al final de la invocación del onclick del botón, en el onsubmit del form, depende de cómo lo tengas planteado.

Código HTML:

<input type="submit" onclick="Enviar(pagina,capa,event); return false;">
 

Código Javascript:

function Enviar(_pagina,capa,e) {
var ajax;
ajax = ajaxFunction();
ajax.open("POST", _pagina, true);
ajax.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
 
ajax.onreadystatechange = function() {
if (ajax.readyState==1){
document.getElementById(capa).innerHTML = " Espere por favor...";
}
if (ajax.readyState == 4) {
 
document.getElementById(capa).innerHTML=ajax.respo nseText; 
 
 
}}
 
ajax.send(null);
 
e.preventDefault();
}
 

Un saludo.

[juanjexus]

Hola dontexplain,

He estado mirando lo que me dices, la verdad que no lo entiendo bien del todo es la primera vez que me pongo a trabajar con esto y he estado mirando en google pero sin éxito.
Bueno el resultado de momento es que le doy al botón de input con el evento onclick que me indicas pero se me redirige a la pagina por defecto del los apartados.
No se en que fallo.

Gracias por la paciencia

[dontexplain]

Trataré de explicarlo para que lo entiendas:

Existen eventos predeterminados, uno de ellos es el onsubmit y se produce cuando se clica sobre un botón de tipo submit. La acción por defecto de ese evento es redirigir a la página determinada en el formulario mediante action (si no hay ninguna especificada se recarga la misma).

La cuestión es que cualquier evento javascript (el alias es event) tiene propiedades y métodos. Las propiedades son todos los datos del evento (por ejemplo si pulsas sobre un botón una propiedad podría ser el momento exacto en que pulsaste tal botón), los métodos manejan el evento, y manejar puede incluir parar su ejecución.

Si haces

<input type="submit" onclick="cualquiera()">

primero se ejecuta la función cualquiera() y más tarde el evento predeterminado, y como el evento predeterminado, como dije antes, es el envío del formulario, sólo tienes que parar tal evento, y para eso existe un método

event.preventDefault()

Para poder manejar el objeto event es necesario que lo pases como parámetro de la función

cualquiera(parametro1,parametro2,event)

de modo que

function cualquiera(p1,p2,e){

}

ahora, dentro de la función puedes manejar el objeto event (que es e) y por tanto invocar

e.preventDefault()

Un saludo

[juanjexus]

Muchas gracias por la explicación !!! eres un maestro. aAhora le doy al botón y no me recarga la pagina, pero ahora me surge otra cosa.

Al darle al botón con el evento onclick y llamar al a funcion anterior, lo que estoy haciendo es parar la recarga, por lo que no estoy enviando los datos por post del formulario y no puedo comprobar el formulario, por lo menos ahora es lo que me ocurre.

Mil gracias!!!

[fjrueda]

Seguramente esta colocando el e.preventDefault() dentro de alguna validacion o antes de que efectue el http del ajax.

Muestre algo de lo que acertadamente le explico dontexplain y que usted ya corrigio, para revisar y estar seguros.