Foros del Web » Programando para Internet » Jquery »

jQuery: Problemas para contenido cargado por post

Estas en el tema de jQuery: Problemas para contenido cargado por post en el foro de Jquery en Foros del Web. Buenos días: Estoy haciendo una parte de una web en el que el intercambio de páginas lo devuelvo por post para agregar efectos 'fade' al ...
  #1 (permalink)  
Antiguo 26/03/2011, 04:15
 
Fecha de Ingreso: noviembre-2007
Mensajes: 154
Antigüedad: 17 años
Puntos: 2
Pregunta jQuery: Problemas para contenido cargado por post

Buenos días:

Estoy haciendo una parte de una web en el que el intercambio de páginas lo devuelvo por post para agregar efectos 'fade' al pasar de una a otra.

Para esto, en el menú llamo a una función en javascript, que recoge unos parámetros para hacer el post a una página php que devuelve un include, que cargo como html en una capa:
Código Javascript:
Ver original
  1. function getInfo(liId) {
  2.     var capaInfo = $("#cp_detInfo");
  3.  
  4.     $.post('content/includes/php/getInfo.php', { pag: 'info', datos: liId },
  5.         function(data){
  6.             $(capaInfo).hide()
  7.                        .html(data)
  8.                        .fadeIn(2500);
  9.         }
  10.     );
  11. }

Código PHP:
Ver original
  1. if(isset($_POST['pag']) && $_POST['pag']=='info') {
  2.     if(isset($_POST['datos'])) {
  3.         $datos = $_POST['datos'];
  4.  
  5.         switch ($datos) {
  6.            case 'i_gral'    : include("modules/modInfo.inc.php");     break;
  7.            case 'i_gral'    : include("modules/modInfo.inc.php");     break;
  8.            case 'i_finca'   : include("modules/modFinca.inc.php");    break;
  9.            case 'i_contacto': include("modules/modContacto.inc.php"); break;
  10.            case 'i_otra'    : include("modules/modOtra.inc.php");     break;
  11.            default          : include("modules/modInfo.inc.php");     break;
  12.         }
  13.     }else{
  14.         echo "no se ha recibido el identificador";
  15.     }
  16. }else{
  17.     echo "error en la llamada asíncrona";
  18. }

El tema está que para este contenido cargado, no me funcionan después los eventos o comprobaciones jQuery.

Por ejemplo, para el formulario de contacto, en vez de un captcha, en teoría, debería cargar todos los campos input desahbilitados, para luego, tras pulsar en un botón, habilitar de nuevo los campos y agregar un campo hidden de control. Sin embargo, el formulario aparece ya con todos los campos activos y el click sobre el 'botón activador' no 'enlaza' con su funcionalidad jQuery. La primera parte, la de los campos deshabilitados me preocupa menos, porque en vez de bloquearlos mediante jQuery, lo haría directamente en el html, pero el resto de funcionalidad no sé cómo recuperarla.
Código Javascript:
Ver original
  1. $("#contacto :input").attr("disabled", true);
  2.  
  3.     var campoHidden = '<input type="hidden" id="f_contacto" name="f_contacto" value="ok" />';
  4.    
  5.     $("#padlock").click(function(){
  6.        $("#contacto :input").attr("disabled", "");
  7.          $("#contacto").append(campoHidden);
  8.          $("#f_unlock").fadeOut();
  9.     });

¿Qué podría hacer para que no pierda esta funcionalidad?

Muchas gracias.

Saludos
  #2 (permalink)  
Antiguo 26/03/2011, 05:41
Avatar de masterpuppet
Software Craftsman
 
Fecha de Ingreso: enero-2008
Ubicación: Montevideo, Uruguay
Mensajes: 3.550
Antigüedad: 16 años, 11 meses
Puntos: 845
Respuesta: jQuery: Problemas para contenido cargado por post

Que tal jesusjj,

El problema es que al momento de aplicar los eventos, los elementos no estan en el DOM, lo estaran mas adelante cuando los cargues con AJAX, deberias utilizar live y ajustar algo el código, en getInfo deshabilitar los inputs:

Código Javascript:
Ver original
  1. function getInfo(liId) {
  2.     var capaInfo = $("#cp_detInfo");
  3.  
  4.     $.post('content/includes/php/getInfo.php', { pag: 'info', datos: liId },
  5.         function(data){
  6.             $(capaInfo).hide()
  7.                        .html(data)
  8.                        .fadeIn(2500)
  9.                        .find(':input').attr('disabled', true);
  10.         }
  11.     );
  12. }

y a través de live, añadir los eventos:

Código Javascript:
Ver original
  1. var campoHidden = '<input type="hidden" id="f_contacto" name="f_contacto" value="ok" />';
  2.  
  3. $("#padlock").live('click', function(){
  4.     $("#contacto :input").attr("disabled", "");
  5.     $("#contacto").append(campoHidden);
  6.     $("#f_unlock").fadeOut();
  7. });

Saludos.
__________________
http://es.phptherightway.com/
thats us riders :)
  #3 (permalink)  
Antiguo 26/03/2011, 15:56
 
Fecha de Ingreso: noviembre-2007
Mensajes: 154
Antigüedad: 17 años
Puntos: 2
Respuesta: jQuery: Problemas para contenido cargado por post

Muchas gracias, esta parte ha funcionado perfectamente, ahora surge el problema en el submit, ya que no lo coge el plugin validate, pero creo que el submit, no se puede cargar con el método live().

De momento no he definido ningún action a ver si conseguía validarlo, en caso contrario, cambiaré y verificaré por php.

Saludos.
  #4 (permalink)  
Antiguo 31/03/2011, 06:56
 
Fecha de Ingreso: noviembre-2007
Mensajes: 154
Antigüedad: 17 años
Puntos: 2
Respuesta: jQuery: Problemas para contenido cargado por post

Buenas tardes:

No he tenido mucho tiempo de hacer pruebas con la validación, pero las que hice, no conseguí que pasará por ella, ni cambiando el submithandler, ni cambiando el botón submit, por uno normal para capturar el onclick, etc.

¿Alguien sabría cómo se podría validar el formulario cargado mediante ajax con algo equivalente a live()?

Muchas gracias.

Saludos.
  #5 (permalink)  
Antiguo 31/03/2011, 16:26
 
Fecha de Ingreso: noviembre-2007
Mensajes: 154
Antigüedad: 17 años
Puntos: 2
Respuesta: jQuery: Problemas para contenido cargado por post

Cita:
Iniciado por jesusjj Ver Mensaje
Buenas tardes:

No he tenido mucho tiempo de hacer pruebas con la validación, pero las que hice, no conseguí que pasará por ella, ni cambiando el submithandler, ni cambiando el botón submit, por uno normal para capturar el onclick, etc.

¿Alguien sabría cómo se podría validar el formulario cargado mediante ajax con algo equivalente a live()?

Muchas gracias.

Saludos.
RESUELTO

Al final no era muy complejo, lo copio por si le sirve a alguien.

Código HTML:
Ver original
  1. <form id="contacto" action="" method="">
  2.         <legend>D&eacute;janos tus datos de contacto</legend>
  3.         <table width="100%" border="0" cellspacing="0" cellpadding="0">
  4.         <tbody>
  5.           <tr>
  6.               <td><label for="nombre">Nombre:</label></td>
  7.               <td><input type="text" id="nombre" name="nombre" disabled="disabled" /></td>
  8.           </tr>
  9.           <tr>
  10.             <td><label for="tfno_mv">Tel&eacute;fono M&oacute;vil:</label></td>
  11.             <td><input type="text" id="tfno_mv" name="tfno_mv" disabled="disabled" /></td>
  12.           </tr>
  13.           <tr>
  14.             <td><label for="tfno_fj2">Tel&eacute;fono Fijo:</label></td>
  15.             <td><input type="text" id="tfno_fj" name="tfno_fj" disabled="disabled" /></td>
  16.           </tr>
  17.           <tr>
  18.             <td><label for="mail">E-mail:</label></td>
  19.             <td><input type="text" id="mail" name="mail" disabled="disabled" /></td>
  20.           </tr>
  21.           <tr>
  22.             <td valign="top"><label for="mensaje">Mensaje:</label></td>
  23.             <td valign="top"><textarea id="mensaje" name="mensaje" cols="5" rows="3" disabled="disabled"></textarea></td>
  24.           </tr>
  25.           <tr>
  26.             <td colspan="2" class="txt_center">
  27.                 <input type="submit" id="enviar" name="enviar" class="bt_submit" value="enviar" disabled="disabled" />
  28.                 <input type="reset" id="limpiar" name="limpiar" value="limpiar" disabled="disabled" />
  29.             </td>
  30.           </tr>
  31.         </tbody>
  32.         </table>
  33.  
  34.         <div class="clear"></div>
  35. </form>

Código Javascript:
Ver original
  1. $(".bt_submit").live('click', function(){
  2.         $("#contacto").validate({
  3.             rules: {
  4.                 nombre: {
  5.                     required: true,
  6.                     minlength: 3
  7.                 },
  8.                 tfno_mv: {
  9.                     required: true,
  10.                     minlength: 9
  11.                 },
  12.                 mail: {
  13.                     required: true,
  14.                     email: true
  15.                 },
  16.                 mensaje: {
  17.                     required:true
  18.                 }            
  19.             },
  20.             messages: {
  21.                 nombre: {
  22.                     required: "El campo nombre es obligatorio",
  23.                     minlength: "La longitud m\u00ednima es de 3 caracteres"
  24.                 },
  25.                 tfno_mv: {
  26.                     required: "El campo tel\u00e9fono es obligatorio",
  27.                     minlength: "La longitud m\u00ednima es de 9 caracteres"
  28.                 },
  29.                 mail: {
  30.                     required: "El campo eMail es obligatorio",
  31.                     email: "Por favor, introduzca una direcci\u00f3n de email v\u00e1lida"
  32.                 },
  33.                 mensaje: {
  34.                     required: "Por favor, introduzca un mensaje"
  35.                 }
  36.             }
  37.         });
  38.     });

Etiquetas: contenido, post
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 22:43.