Foros del Web » Programando para Internet » Jquery »

No edita con AJAX en Jquery

Estas en el tema de No edita con AJAX en Jquery en el foro de Jquery en Foros del Web. Hola a todos... Resulta que tengo un listado de usuario, muestra el nombre de usuario y email... Cada registro tiene su respectivo "editar". El problema ...
  #1 (permalink)  
Antiguo 09/11/2009, 22:58
Avatar de Carxl
Colaborador
 
Fecha de Ingreso: agosto-2006
Ubicación: Bogotá
Mensajes: 2.993
Antigüedad: 18 años, 3 meses
Puntos: 70
No edita con AJAX en Jquery

Hola a todos...

Resulta que tengo un listado de usuario, muestra el nombre de usuario y email...

Cada registro tiene su respectivo "editar".

El problema sucede que cuando le doy "Enviar" ( en el sumit) a cualquier registro pues para editarlo envia el formulario pero sin AJAX!! Osea me recarga la página.

La confusión es que el adicionar lo hace perfectamente, uso el mismo código de Jquery para hacer la edición y no funciona, eso es lo que no me cuadra.

Les dejo los códigos:

Adicionar:

Código:
<script language="javascript">
$(document).ready(function(){
   $('#fo3').submit(function() {
   // Enviamos el formulario usando AJAX
        $.ajax({
            type: 'POST',
            url: $(this).attr('action'),
            data: $(this).serialize(),
            // Mostramos un mensaje con la respuesta de PHP
            success: function(data) {
                $('#result').html(data);
        $('#readUsuario').load('uno.php #readUsuario');
        $('#formularioUsuario').load('uno.php #formularioUsuario');
            }
        })        
        return false;
    });
})
</script>
Código HTML:
<form method="post" action="addUsuario.php" id="fo3" name="fo3" >
      <fieldset>
        <legend>Agregar Usuario</legend>
        <ol>
            <li><label>Nombres:</label><input type="text" size="30" name="fnombres" /></li>
            <li><label>Apellidos:</label><input type="text" size="30" name="fapellidos" /></li>
            <li><label>Correo:</label><input type="text" size="30" name="fcorreo" /></li>
        </ol>
        <input type="submit" name="mysubmit" value="Enviar" />
      </fieldset>
</form> 

El editar:

Código:
<script language="javascript">
$(document).ready(function(){
   $('#fo2').submit(function() {
   // Enviamos el formulario usando AJAX
        $.ajax({
            type: 'POST',
            url: $(this).attr('action'),
            data: $(this).serialize(),
            // Mostramos un mensaje con la respuesta de PHP
            success: function(data) {
                $('#result').html(data);
        $('#readUsuario').load('uno.php #readUsuario');
        $('#formularioUsuario').load('uno.php #formularioUsuario');
            }
        })        
        return false;
    });
})
</script>
Código HTML:
<form method="post" action="editUsuario.php" id="fo2" name="fo2" >
    <input type="hidden" name="idUsuario" value="<?php echo $rSqlB['id_usuario']?>" />
      <fieldset>
        <legend>Editar Usuario</legend>
        <ol>
            <li><label>Nombres:</label><input type="text" size="30" name="fnombres" value="<?php echo $rSqlB['usuario_nombres']?>" /></li>
            <li><label>Apellidos:</label><input type="text" size="30" name="fapellidos" value="<?php echo $rSqlB['usuario_apellidos']?>" /></li>
            <li><label>Correo:</label><input type="text" size="30" name="fcorreo" value="<?php echo $rSqlB['usuario_correo']?>" /></li>
        </ol>
        <input type="submit" name="mysubmit" value="Enviar" />
      </fieldset>
</form> 
Disculpen lo extenso...

Gracias de antemano
__________________
Hay 10 tipos de personas, los que entienden binario y los que no. (Anónimo)
www.programandoweb.com
  #2 (permalink)  
Antiguo 10/11/2009, 13:05
Avatar de mayid
Colaborador
 
Fecha de Ingreso: marzo-2009
Ubicación: BsAs
Mensajes: 4.014
Antigüedad: 15 años, 7 meses
Puntos: 101
Respuesta: No edita con AJAX en Jquery

Estas usando internet explorer? Da algun error abajo a la izq? O usas algun otro debugger para javascript? Fijate.
  #3 (permalink)  
Antiguo 10/11/2009, 15:52
Avatar de Carxl
Colaborador
 
Fecha de Ingreso: agosto-2006
Ubicación: Bogotá
Mensajes: 2.993
Antigüedad: 18 años, 3 meses
Puntos: 70
Respuesta: No edita con AJAX en Jquery

Hola mayd, gracias por responder...

Sí, uso firebug y no me arroja error, pero voy a checar de nuevo a ver si fue que no ví.
__________________
Hay 10 tipos de personas, los que entienden binario y los que no. (Anónimo)
www.programandoweb.com
  #4 (permalink)  
Antiguo 10/11/2009, 15:55
Avatar de Carxl
Colaborador
 
Fecha de Ingreso: agosto-2006
Ubicación: Bogotá
Mensajes: 2.993
Antigüedad: 18 años, 3 meses
Puntos: 70
Respuesta: No edita con AJAX en Jquery

No, efectivamente no arroja ningún error, simplemente recarga la página...

Es como sino reconociera el Ajax del edit...

Agrego que el edit lo hace ( osea que sí edita ) pero sin el Ajax.

Gracias!
__________________
Hay 10 tipos de personas, los que entienden binario y los que no. (Anónimo)
www.programandoweb.com
  #5 (permalink)  
Antiguo 10/11/2009, 16:53
Avatar de David
Moderador
 
Fecha de Ingreso: abril-2005
Ubicación: In this planet
Mensajes: 15.720
Antigüedad: 19 años, 7 meses
Puntos: 839
Respuesta: No edita con AJAX en Jquery

¿Tienes la página subida en algún lado? Ya que todo parece correcto. Habrá que revisar qué otra cosa puede estar dando problemas.
__________________
Por favor, antes de preguntar, revisa la Guía para realizar preguntas.
  #6 (permalink)  
Antiguo 10/11/2009, 17:23
Avatar de Carxl
Colaborador
 
Fecha de Ingreso: agosto-2006
Ubicación: Bogotá
Mensajes: 2.993
Antigüedad: 18 años, 3 meses
Puntos: 70
Respuesta: No edita con AJAX en Jquery

Vale David, déjame la subo a mi server vale?

Gracias!
__________________
Hay 10 tipos de personas, los que entienden binario y los que no. (Anónimo)
www.programandoweb.com
  #7 (permalink)  
Antiguo 10/11/2009, 17:40
Avatar de Carxl
Colaborador
 
Fecha de Ingreso: agosto-2006
Ubicación: Bogotá
Mensajes: 2.993
Antigüedad: 18 años, 3 meses
Puntos: 70
Respuesta: No edita con AJAX en Jquery

Listo!

http://www.programandoweb.com/estudio/conAjax/uno.php

Gracias de nuevo por el seguimiento...
__________________
Hay 10 tipos de personas, los que entienden binario y los que no. (Anónimo)
www.programandoweb.com
  #8 (permalink)  
Antiguo 10/11/2009, 17:47
Avatar de Carxl
Colaborador
 
Fecha de Ingreso: agosto-2006
Ubicación: Bogotá
Mensajes: 2.993
Antigüedad: 18 años, 3 meses
Puntos: 70
Respuesta: No edita con AJAX en Jquery

Noté algo...

Cuando carga la página, se puede hacer un insert con Ajax, pero si lo vuelves a intentar, el adicionar también empieza a recargar la página.

__________________
Hay 10 tipos de personas, los que entienden binario y los que no. (Anónimo)
www.programandoweb.com
  #9 (permalink)  
Antiguo 11/11/2009, 06:01
Avatar de David
Moderador
 
Fecha de Ingreso: abril-2005
Ubicación: In this planet
Mensajes: 15.720
Antigüedad: 19 años, 7 meses
Puntos: 839
Respuesta: No edita con AJAX en Jquery

El problema es sencillo.

Si te fijas, estás volviendo a cargar el formulario cuando haces click en "Editar". Por lo que el formulario anterior es eliminado y el listener que asignaste en el onsubmit se pierde.

Lo que no entiendo es para qué vuelves a cargar el formulario ya que sería más fácil tomar los datos de la tabla y colocarlos directamente en lugar de hacer una petición.
__________________
Por favor, antes de preguntar, revisa la Guía para realizar preguntas.
  #10 (permalink)  
Antiguo 11/11/2009, 10:35
Avatar de Carxl
Colaborador
 
Fecha de Ingreso: agosto-2006
Ubicación: Bogotá
Mensajes: 2.993
Antigüedad: 18 años, 3 meses
Puntos: 70
Respuesta: No edita con AJAX en Jquery

Cita:
Iniciado por David Ver Mensaje
Si te fijas, estás volviendo a cargar el formulario cuando haces click en "Editar". Por lo que el formulario anterior es eliminado y el listener que asignaste en el onsubmit se pierde.
Claro, para que ponga el contenido el registro en cada input. No?

Cita:
Iniciado por David Ver Mensaje
Lo que no entiendo es para qué vuelves a cargar el formulario ya que sería más fácil tomar los datos de la tabla y colocarlos directamente en lugar de hacer una petición.
No entiendo eso de tomar los datos de la tabla... Creo que eso es lo que estoy haciendo no?, con esta función:

Código javascript:
Ver original
  1. function cargarFormUsuario(u){
  2.     $('#formularioUsuario').load('uno.php?idU='+u+' #formularioUsuario');
  3. }
Eso de hacerlo directamente... a qué te refieres?

Si tienes un ejemplo

Saludos y gracias!
__________________
Hay 10 tipos de personas, los que entienden binario y los que no. (Anónimo)
www.programandoweb.com
  #11 (permalink)  
Antiguo 11/11/2009, 11:08
Avatar de David
Moderador
 
Fecha de Ingreso: abril-2005
Ubicación: In this planet
Mensajes: 15.720
Antigüedad: 19 años, 7 meses
Puntos: 839
Respuesta: No edita con AJAX en Jquery

A lo que me refiero es que en la tabla ya tienes los datos que quieres editar. No necesitas hacer una nueva petición al servidor sólo para solicitar esos mismos datos. ¿Se entiende lo que trato de decir?

A decir verdad, en el ejemplo que pones estás perdiendo gran parte de la potencia de Ajax. Ya que solicitas al servidor más datos de lo que en realidad usas.
__________________
Por favor, antes de preguntar, revisa la Guía para realizar preguntas.
  #12 (permalink)  
Antiguo 11/11/2009, 11:19
Avatar de Carxl
Colaborador
 
Fecha de Ingreso: agosto-2006
Ubicación: Bogotá
Mensajes: 2.993
Antigüedad: 18 años, 3 meses
Puntos: 70
Respuesta: No edita con AJAX en Jquery

Osea, lo que debo hacer es.. borrar la consulta que trae los datos, y buscar una manera para llevarme lo que tengo en la tabla ( html ) para el edit?

Sí es eso, bueno quizás lo pueda intentar, pero igual seguería presentándose el mismo problema no?. Si se va a insertar el id del form tiene un nombre diferente como cuando se va a editar.

Saludos
__________________
Hay 10 tipos de personas, los que entienden binario y los que no. (Anónimo)
www.programandoweb.com
  #13 (permalink)  
Antiguo 11/11/2009, 11:24
Avatar de David
Moderador
 
Fecha de Ingreso: abril-2005
Ubicación: In this planet
Mensajes: 15.720
Antigüedad: 19 años, 7 meses
Puntos: 839
Respuesta: No edita con AJAX en Jquery

Puedes tener ambos formularios cargados en la página y mostrar/ocultar de acuerdo a la acción que se desea realizar.
__________________
Por favor, antes de preguntar, revisa la Guía para realizar preguntas.
  #14 (permalink)  
Antiguo 11/11/2009, 11:30
Avatar de Carxl
Colaborador
 
Fecha de Ingreso: agosto-2006
Ubicación: Bogotá
Mensajes: 2.993
Antigüedad: 18 años, 3 meses
Puntos: 70
Respuesta: No edita con AJAX en Jquery

Entiendo...

Seguiré en lo mío

GRacias!
__________________
Hay 10 tipos de personas, los que entienden binario y los que no. (Anónimo)
www.programandoweb.com
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 00:15.