Foros del Web » Programando para Internet » Jquery »

Validación jQuery y Ajax para formularios generados dinámicamente con PHP

Estas en el tema de Validación jQuery y Ajax para formularios generados dinámicamente con PHP en el foro de Jquery en Foros del Web. Estimados; Mi problema es que no sé, y no encuentro info al respecto, para validar un formulario que lo tengo dentro de un ciclo do-while ...
  #1 (permalink)  
Antiguo 27/04/2014, 20:57
 
Fecha de Ingreso: enero-2013
Mensajes: 16
Antigüedad: 6 años, 7 meses
Puntos: 0
Validación jQuery y Ajax para formularios generados dinámicamente con PHP

Estimados;

Mi problema es que no sé, y no encuentro info al respecto, para validar un formulario que lo tengo dentro de un ciclo do-while (en realidad son dos ciclos anidados), por lo cual el formulario se replica para cada instancia de la consulta. El jQuery que lo valida y el Ajax que envia la info sirve para el caso cuando es un sólo formulario, no formularios generados dinámicamente (me refiero generandolos usando la instancia do-while).
Por lo poco que sé (se debe notar!!) el problema es que se necesita asignar un índice, tb dinámico a la función Js para poder distinguir cada formulario.

Agradecería enormemente cualquier orientación. Si no estoy muy perdido y el tema es lo del id único, no sé como agregarlo al Script que tengo.

Adjunto mi código, a ver se se logra entender mejor.

Este extracto del código es un archivo que está inserto dentro de un ciclo do-while anidado dentro de otro ciclo do-while, la razón de eso, creo que es harina de otro costal.
Código PHP:
Ver original
  1. <div class="new-com-bt">
  2.         <span>Write a comment ...</span>
  3.     </div>
  4.     <div class="new-com-cnt">
  5.         <input type="hidden" id="name-com" name="name-com" value="<?php echo ObtenerNombreFull_Usuario($_SESSION['MM_IdUser']); ?>" />
  6.         <input type="text" id="mail-com" name="mail-com" value="" placeholder="Your e-mail adress" />
  7.         <textarea class="the-new-com" placeholder="Ingresa tu comentario"></textarea>
  8.         <div class="bt-add-com">Post comment</div>
  9.         <div class="bt-cancel-com">Cancel</div>
  10.     </div>
  11.     <div class="clear"></div>
  12. </div><!-- end of comments container "cmt-container" -->

Código Javascript:
Ver original
  1. <script type="text/javascript">
  2.    $(function(){
  3.         //alert(event.timeStamp);
  4.         $('.new-com-bt').click(function(event){    
  5.             $(this).hide();
  6.             $('.new-com-cnt').show();
  7.             $('#name-com').focus();
  8.         });
  9.  
  10.         /* when start writing the comment activate the "add" button */
  11.         $('.the-new-com').bind('input propertychange', function() {
  12.            $(".bt-add-com").css({opacity:0.6});
  13.            var checklength = $(this).val().length;
  14.            if(checklength){ $(".bt-add-com").css({opacity:1}); }
  15.         });
  16.  
  17.         /* on clic  on the cancel button */
  18.         $('.bt-cancel-com').click(function(){
  19.             $('.the-new-com').val('');
  20.             $('.new-com-cnt').fadeOut('fast', function(){
  21.                 $('.new-com-bt').fadeIn('fast');
  22.             });
  23.         });
  24.  
  25.         // on post comment click
  26.         $('.bt-add-com').click(function(){
  27.             var theCom = $('.the-new-com');
  28.             var theName = $('#name-com');
  29.             var theMail = $('#mail-com');
  30.  
  31.             if( !theCom.val()){
  32.                 alert('You need to write a comment!');
  33.             }else{
  34.                 $.ajax({
  35.                     type: "POST",
  36.                     url: "ajax/add-comment.php",
  37.                     data: 'act=add-com&id_post='+<?php echo $id_post; ?>+'&name='+theName.val()+'&email='+theMail.val()+'&comment='+theCom.val(),
  38.                     success: function(html){
  39.                         theCom.val('');
  40.                         theMail.val('');
  41.                         theName.val('');
  42.                         $('.new-com-cnt').hide('fast', function(){
  43.                             $('.new-com-bt').show('fast');
  44.                             $('.new-com-bt').before(html);  
  45.                         })
  46.                     }  
  47.                 });
  48.             }
  49.         });
  50.  
  51.     });
  52. </script>
  #2 (permalink)  
Antiguo 27/04/2014, 23:58
Avatar de codeams  
Fecha de Ingreso: diciembre-2012
Ubicación: México
Mensajes: 103
Antigüedad: 6 años, 8 meses
Puntos: 16
Respuesta: Validación jQuery y Ajax para formularios generados dinámicamente con PHP

Hola, por lo que entendí lo que tu necesitas es un event handler. Con esto me refiero a utilizar on() en vez de click, esto es debido a que no puedes definir eventos para elementos que aun no han sido añadidos al DOM. Solucionemos el problema definiendo on() para un elemento padre que no haya sido creado dinámicamente,

tal como se muestra en el ejemplo siguiente:

Código Javascript:
Ver original
  1. $('body').on('click', '.bt-add-com', function(){
  2.     // realizar validación
  3. }).on('keypress', '.element', function(){
  4.   // otra validación
  5. })
__________________
¿Quién es codeams? codeams.ml
¿Qué hace en su tiempo libre? codepen.io/codeams
  #3 (permalink)  
Antiguo 28/04/2014, 12:59
 
Fecha de Ingreso: enero-2013
Mensajes: 16
Antigüedad: 6 años, 7 meses
Puntos: 0
Respuesta: Validación jQuery y Ajax para formularios generados dinámicamente con PHP

Muchas gracias Codeams por responder y realmente aprecio tu ayuda. Traté de implementar tu solución pero mi falta de expertise no me deja ver la solución.

Lo que entiendo, en la práctica, es que debo reemplazar mi script original, por ejemplo para la validación al enviar la información.

Código Javascript:
Ver original
  1. // on post comment click
  2. $('body').on('click', '.bt-add-com', function(){
  3.             var theCom = $('.the-new-com');
  4.             var theName = $('#name-com');
  5.             var theMail = $('#mail-com');
  6.  
  7.             if( !theCom.val()){
  8.                 alert('You need to write a comment!');
  9.             }else{
  10.                 $.ajax({
  11.                     type: "POST",
  12.                     url: "ajax/add-comment.php",
  13.                     data: 'act=add-com&id_post='+<?php echo $id_post; ?>+'&name='+theName.val()+'&email='+theMail.val()+'&comment='+theCom.val(),
  14.                     success: function(html){
  15.                         theCom.val('');
  16.                         theMail.val('');
  17.                         theName.val('');
  18.                         $('.new-com-cnt').hide('fast', function(){
  19.                             $('.new-com-bt').show('fast');
  20.                             $('.new-com-bt').before(html);  
  21.                         })
  22.                     }  
  23.                 });
  24.             }
  25.         });
  26.  
  27.  });

Bueno la verdad es que no se como seguir.

Agradecería nuevamente me pudieras guiar un poco más para poder implementar la solución.

Muchas gracias de antemano.
  #4 (permalink)  
Antiguo 30/04/2014, 08:18
Avatar de codeams  
Fecha de Ingreso: diciembre-2012
Ubicación: México
Mensajes: 103
Antigüedad: 6 años, 8 meses
Puntos: 16
Respuesta: Validación jQuery y Ajax para formularios generados dinámicamente con PHP

¿Cuántos .the-new-com pueden existir al mismo tiempo, sólo uno?
¿La consola de chrome o de firefox arrojan algún error?

Es que a primera vista el código luce bien pero necesito un poco más de contexto para encontrar el problema.
__________________
¿Quién es codeams? codeams.ml
¿Qué hace en su tiempo libre? codepen.io/codeams
  #5 (permalink)  
Antiguo 30/04/2014, 19:53
 
Fecha de Ingreso: enero-2013
Mensajes: 16
Antigüedad: 6 años, 7 meses
Puntos: 0
Respuesta: Validación jQuery y Ajax para formularios generados dinámicamente con PHP

Pueden existir varios, dependiendo de lo que arroje la consulta o set de registros que estoy mostrando a través de un DO-WHILE. El contexto es que son Opiniones que estoy mostrando (set de registros que mencioné antes), el ".the-new-com" es el equivalente al clásico formulario PHP para recoger comentarios asociados a estas Opiniones.
Por lo tanto, el ".the-new-com" pueden repetirse muchas veces al mismo tiempo y como se replica asociado a cada opinión que haya, la validación jQuery que tengo no reconoce, al parecer, cual ".the-new-com" debe validar. Me imagino que el Ajax asociado que envía la información, no necesita ajuste??.

Firefox no me arroja ningún error, lo que pasa es que cuando ingreso el comentario y lo trato de enviar no hace nada, el ".bt-add-com" no responde.

Investigando el evento on() entendí que sirve para cuando quieres ir generando nuevos ".the-new-com" dinámicamente a partir de uno inicial. En mi caso los ".the-new-com" ya están generados a través del set de registros con el que muestro las Opiniones.

Realmente agradezco tu tiempo e interés por ayudar. Quedo atento a cualquier consulta o novedad.

Gracias de antemano.

Etiquetas: ajax, formularios, generados, php
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 05:11.