AJAX - Ajax y envío de variables mediante GET

Muy buenas a todos.

En primer lugar, no llevo mucho tiempo desarrollando con Ajax, por lo que intuyo que el problema que estoy teniendo es algo muy básico que se me escapa, o eso creo.
He estado buscando información en google y en los temas que ya estaban publicados pero no he encontrado la solución al problema.

Estoy utilizando ajax para enviar datos de un formulario que tengo ubicado en una ventana modal mediante POST, interactuando con las respuestas que resultan del código php sin ningún problema... hasta ahora :(
El problema viene cuando en una de esas respuestas, construyo dentro de la ventana modal un texto con un enlace que contiene una serie de variables que se enviarían mediante GET al servidor. Mi idea era que al pulsar dicho enlace, tampoco se recargase la página, sino que se enviase de nuevo al servidor dichas variables por GET, se procesara la acción y con el resultado se cambiara el texto de la ventana modal mostrando la respuesta.

Por tanto, para poner en situación, el proceso es el siguiente:

1. El usuario indica su nombre de usuario y su contraseña en el formulario de la ventana modal, enviándose los datos mediante Ajax (Metodo post) al servidor. Se produce una situación determinada (el usuario es bloqueado) generando una respuesta y con ella cambio el contenido de la ventana modal, mostrando un mensaje que contiene un enlace con la siguiente estructura:
<a id='reenviar' href='/carpeta/archivo.php?usuario=user'>enlace</a>

2. Al hacer click en el enlace, tengo el siguiente código en mi archivo js para gestionar la operación:
$('#reenviar').click(function(ev) {
ev.preventDefault();
var url = $(this).attr('href');
var indice = url.indexOf('=');
var us = url.substring(indice+1);

$.get('/carpeta/archivo.php', {usuario: us}, function(resp){
$('.fallo').remove();
$('#login_form').after("<div>"+resp.mens+"</div>");
}, 'json');
});

En el archivo.php, hago una consulta a la base de datos con el usuario recibido por GET, y tras hacer una serie de operaciones, construyo un mensaje que devuelvo así:
echo json_encode(array('mens' => $mensaje));

El problema es que el procesamiento en el archivo php se hace correctamente, pero la página se recarga, mostrándome en el navegador el archivo.php al que apunta el enlace, con el mensaje que he construido, en vez de insertarlo en la ventana modal sin recargar. Cuando he enviado anteriormente los datos del formulario mediante post y he construido mensajes, éstos se han insertado correctamente en la ventana modal sin recargar :(

Viendo las explicaciones en algunas de las búsquedas que hice, vi otras opciones como indicar en el atributo href una #, recogiendo el nombre de usuario en otro atributo, como por ejemplo el name, para poder recoger en el archivo php el usuario sobre el que haré la consulta. Lo que no entiendo es porqué va a la url que indica el enlace si he puesto preventDefault(). ¿Qué estoy haciendo mal?

Siento el tamaño del post, y si me he dejado algo en el tintero o he explicado algo mal, decídmelo.

Un saludo, y muchas gracias de antemano.

Hola annx10, por lo que nos comentas, entiendo que el problema esta en el formulario...puede ser que se envie el formuloario y por eso te refresque la pagina?

Si puedes, muéstranos el formulario...

Puedes probar a poner algo así:

Coméntanos, ok?

Al contrario, xve.

El envío de datos que hago con el formulario también lo realizo con ajax, pero mediante post, y la cuestión es que en ese codigo ajax también utilizo el metodo preventDefault() para evitar que el formulario sea enviado (en vez del return false que propones), y en ese caso si funciona, la pagina no se recarga, y segun la respuesta que obtengo del servidor, añado un div debajo del formulario, en la ventana modal.



El problema es que una de esas respuestas es un enlace que contiene variables para enviarlas por get (el cual como he dicho le aparecerá en el div que se añade debajo del formulario).


Para el caso de que el usuario hiciese clic en ese enlace decidí utilizar ajax de la misma forma que para el formulario (pero con el metodo get). Lo que ocurre en este caso es que no soy capaz de conseguir que no se recargue la pagina. El procesamiento de los datos es correcto (se hace la consulta con las variables recibidas por get), pero la pagina se recarga y ya no se puede añadir la respuesta a esa ventana modal (la respuesta aparece en la ventana recargada).



Mañana voy a subir pantallazos de lo que me ocurre por si me podeis ayudar asi mas fácilmente.
Muchas gracias y un saludo.

La verdad es que no entiendo muy bien lo que te pasa... haber si nos puedes mostrar las imágenes o adjuntar el código...

Ya no se cómo desmenuzarlo más jeje. Había subido las imágenes del post anterior a un servidor, pero la verdad es que al pinchar en ellas no se cargan, no se que ha pasado.

En el primer post he puesto el código que me está fallando, tanto el código del js como el de php.

El tema es que quiero que al pinchar en un enlace que he construido dentro de una ventana modal de esta forma:
<a id='reenviar' href='/carpeta/archivo.php?usuario=user'>enlace</a>
no se recargue la página, sino que a través de ajax se envíe el valor de la variable usuario mediante get a un archivo php, el cual toma ese valor, procesa una consulta y crea una respuesta que devuelve mediante json para añadirla a la ventana modal donde está el enlace en el que se ha pinchado y ha generado toda esta operación.

Para el envío por get mediante ajax al pulsar el enlace, mi código es el siguiente:


La cuestión es que la página se recarga, se envía la variable usuario al archivo php mediante get y se procesa la consulta correctamente, mostrando la respuesta en la ventana recargada. No quiero que se recargue, el método preventDefault() debería evitar esa recarga al hacer clic, no?

Ahora te entiendo... mil perdones...

La manera que yo lo haría seria el enlace algo así:
Esto suponiendo que tienes que ser un <a>...

En el javascript:

Coméntanos si te sirve, ok?

Hola, he colocado el código tal y como me has indicado.

Ahora se evita la recarga de la página, pero no se procesa la consulta, es como si no enviase nada a la página php de destino.

Cuando pincho en el enlace, por detrás de la ventana modal se ve como la página se desplaza hacia arriba (motivado porque el enlace está apuntando a la misma página con la #), pero no ocurre nada más, no se añade el div que debería añadirse con la respuesta que devolvería la página php, ni tampoco se envía un email que dicha página php procesa, por lo que intuyo que no se está realizando el envío por get de la variable usuario.

Con mi código anterior si funcionaba todo correctamente (envío de datos, consulta, generación de respuesta), a excepción de que la página se recargaba y la respuesta que generaba el servidor no podía colocarse en la ventana modal debido a ello.

Dioooos que frustración

Hola de nuevo ;)

He seguido realizando pruebas a ver si encuentro donde está el problema.
He creado un nuevo archivo únicamente con el código que no me estaba funcionando, el del enlace en la ventana modal en el que pincho y que debe enviar la variable usuario mediante ajax (get) al archivo php. Pues bien, me ha funcionado correctamente, por lo que el problema no está en la codificación de esta petición ajax y su gestión, sino que debe estar produciendose alguna incompatiblidad con otro proceso.

El enlace en cuestión aparece en la ventana modal tras haber enviado previamente mediante ajax (post) unos datos de un formulario al servidor, el cual devuelve la información para construir el enlace que no me está funcionando.

¿Podría ser que después de haber interactuado con el servidor mediante ajax a través de post, cuando ahora intento interactuar otra vez con ajax mediante get no pueda porque la anterior petición aún esté presente o algo así? Es la única posibilidad que se me ocurre, porque ya digo, he probado el código (petición ajax mediante get) del enlace en un archivo aparte y ahí sí consigo que funcione todo correctamente.

Saludos y perdonad el tostón.

La manera correcta, es ir siguiendo los pasos hasta dar con el problema.

Primero, revisa que cuando se hace la llamada al archivo.php se envié correctamente el valor de al variable.
Segundo, revisa que llegue correctamente al variable al archivo php
Y por ultimo, revisa que la respuesta llegue correctamente, que no haya un error en el archivo php

Buenas:

La verdad es que se puede ir en la direccion equivocada si no se saben mas cosas o se divide mas.

1. Tienes una app que se llama Advanced Rest Client en chrome con las que puedes comprobar que la llamada en php se esta haciendo bien. Usala y dinos si por ese lado no tienes problemas.

2. En las "Developer Tools de chrome Tienes una pestaña que se llama Network en la que puedes ver, haciendo click en tu enlace, si la llamada esta siendo enviada al servidor. (Si no la encuentras cuelgo una captura).

Con esto ultimo se me ha ocurrdio que la llamada puede estar siendo cacheada por jquery, mira esto http://api.jquery.com/jquery.ajax/ hay un parametro por alli que es cache para cachear las respuestas del servidor, puede que este cacheando alguna respuesta anterior.

3. Deberías usar event.preventDefault(); para que no se ejecutase la acción por defecto de la etiqueta "a". También deberías entender la diferencia entre este, return y event.stopPropagation(); no sea que pase algo mas que no vemos. Mira esto: http://qbit.com.mx/blog/2013/01/07/la-diferencia-entre-return-false-preventdefault-y-stoppropagation-en-jquery/

Dicho todo esto espero que sirva de algo.

Saludos.

Hola, respondo por partes:

- Las herramientas que comenta Vainas las conozco y las he utilizado. Cuando hago el envío del formulario, la petición post se procesa correctamente, y como ya he comentado todo está OK por esa parte, es más, se añade a la ventana modal el enlace.
- Cuando pincho en el enlace, revisando la pestaña Network de la herramienta para desarrolladores en Chrome, efectivamente la petición get no se procesa, ahí está el problema.
- Tras revisar concienzudamente el código para asegurarme de que estaba todo correcto, separé la parte que correspondía al html del enlace y el archivo js que contiene la petición ajax del mismo, para ejecutarlo y ver que pasaba. Pues bien, revisando de nuevo la pestaña Network, al pinchar ahora en el enlace, la petición get se procesa correctamente, y la respuesta que tenía prevista se ejecuta como yo quiero, añadiéndose nuevo contenido html con dicha respuesta, por tanto, quedan revisados los tres puntos que indicaba xve en su último post.
- Por tanto, si todo funciona OK al separar este código del resto de mi contenido web, el problema tiene que estar al funcionar todo junto, es decir, al intentar procesar por get una petición ajax al clicar en el enlace, cuando previamente he procesado una petición post con el formulario.
- Lo que comenta Vainas sobre el cacheado podría ser una explicación, investigaré mientras tanto por ese lado.

Pd. El método preventdefault() lo vengo utilizando desde el principio para evitar la ejecución tanto del submit del formulario como del enlace en cuestión, fue xve quién comentó la utilización de return false, aunque creo que fue porque no me entendió bien al principio de todos estos post.

Vaya chico yo no se que mas consejos darte....


Al hacer esta separacion la prueba fue hecha sobre la ventana modal?. Podria llegar a pensar que la ventana modal esta deteniendo la llamada de algun modo por ejemplo.

Me he quedado sin ideas, espero que puedas arreglar este tema y lo comentes.

Saludos.

Buenas:

Una cosa mas que he leido sobre usar .click() y .on('click',functcion(){....

Deberias usar .on ya que he leido por alli que on sirve para los elementos que son creados dinamicamente.

Espero que sirva de algo. Saludos.

Hola Vainas.

Efectivamente la separación está hecha sobre la ventana modal, ya que pretendía comprobar si realmente el código era el que estaba mal o el fallo en el funcionamiento es debido a otra cosa que esté afectando.

Revisaré lo que me comentas también acerca de .click y .on, quizás por ahí vayan los tiros.

También podría ser por la ventana modal, cuyo funcionamiento es a través del js y css de bootstrap, o incluso lo que comentaste más anteriormente, acerca de el cacheado.

En fin, hay varios hilos por los que tirar. Intentaré investigar todo lo que pueda sobre ellos y comentaré por aquí como va a ver si encuentro solución.

Muchas gracias

Muy buenas a todos.

¡¡¡Qué alegría más grande poder escribir que POR FIN he encontrado la solución!!!!

Y todo gracias al apunte de Vainas, que dio con el dedo en la llaga.
Busqué información como él me indicó sobre el uso de .on en vez de usar el .click, ya que el problema podía deberse a que lo estaba usando sobre un elemento (enlace) que se generaba dinámicamente según una acción anterior mediante ajax. Pues bien, he reescrito el código y voilà, HA FUNCIONADO!!!!

Pongo aquí el código por si alguien tiene este problema en el futuro:

Se genera este enlace tras una acción anterior:

<a id='reenviar' href='#' title="user">enlace</a>

Para que al hacer click en ese enlace se mantenga en la misma página enviando una petición get por ajax al servidor, lo he hecho así:


Ahora se produce la acción en el servidor, devuelve el mensaje y lo construye correctamente dentro de la ventana modal, que era lo que estaba buscando.
Muchísimas gracias por toda la ayuda prestada. Espero que esto sirva también por si a alguien en el futuro le pasa algo parecido.

Un saludo.

Gracias por compartirlo!!!