Foros del Web » Programando para Internet » Jquery »

validar mas de una ventana modal - jquery Dialog

 Estas en el tema de validar mas de una ventana modal - jquery Dialog en el foro de Jquery en Foros del Web. Amigos espero me puedan ayudar Les voy a describir mi problema: estoy trabajando jquery modal dialog http://jqueryui.com/demos/dialog/#modal-form En la página inicial tengo un botón que ...
  #1 (permalink)  
Antiguo 23/09/2012, 13:07
 
Fecha de Ingreso: septiembre-2010
Mensajes: 1.853
Antigüedad: 13 años, 7 meses
Puntos: 6
validar mas de una ventana modal - jquery Dialog
Amigos espero me puedan ayudar

Les voy a describir mi problema: estoy trabajando jquery modal dialog http://jqueryui.com/demos/dialog/#modal-form

En la página inicial tengo un botón que abre una ventana modal la cual valida los datos y los inserto a una base de datos.
Tengo una tabla la cual la genero de acuerdo a una consulta a una base de datos en la última columna tengo 3 iconos que abren 3 ventanas modal cada uno (Consultar, Modificar, Eliminar) el problema es el modificar ya que necesito validar los campos de esta ventana, los quiero validar como lo hago en el botón que está afuera de la tabla (el Modificar utiliza ajax).

Como les mencione trabajo con jquery modal dialog para implementarlo y que funcionaria solo cámbie los campos de mi formulario.

Les muestro mi ventana para insertar

Código Javascript: 
Ver original
  1. <script>
  2.     //--------Modal Insertar--------------------------------------------------------
  3.     $(function() {
  4.         
  5.         //$( "#dialog:ui-dialog" ).dialog( "destroy" );
  6.         
  7.             var name = $( "#name" ),
  8.             email = $( "#email" ),
  9.             telefono1 = $( "#telefono1" ),
  10.             telefono2 = $( "#telefono2" ),
  11.             fax = $( "#fax" ),
  12.             web = $( "#web" ),
  13.             comentario= $( "#comentario" ),
  14.             categoria = $( "#categoria" ),
  15.             
  16.             allFields = $( [] ).add( name ).add( email ).add( telefono1 ).add( telefono2 ).add( fax ).add( web ).add( comentario ).add( categoria ),
  17.             tips = $( ".validateTips" );
  18.             
  19.             
  20.         function updateTips( t ) {
  21.             tips
  22.                 .text( t )
  23.                 .addClass( "ui-state-highlight" );
  24.             setTimeout(function() {
  25.                 tips.removeClass( "ui-state-highlight", 1500 );
  26.             }, 500 );
  27.         }
  28.         
  29.  
  30.  
  31.  
  32.         function checkLength( o, n, min, max ) {
  33.             if ( o.val().length > max || o.val().length < min ) {
  34.                 o.addClass( "ui-state-error" );
  35.                 updateTips( "Length of " + n + " must be between " +
  36.                     min + " and " + max + "." );
  37.                 
  38.                 //updateTips( "Este Campo es Requerido" );
  39.                 return false;
  40.             } else {
  41.                 return true;
  42.             }
  43.         }
  44.         
  45.         function checkRegexp( o, regexp, n ) {
  46.             if ( !( regexp.test( o.val() ) ) ) {
  47.                 o.addClass( "ui-state-error" );
  48.                 updateTips( n );
  49.                 return false;
  50.             } else {
  51.                 return true;
  52.             }
  53.         }
  54.         
  55.         
  56.         
  57.         $( "#dialog-form" ).dialog({
  58.             autoOpen: false,
  59.             height: 600,
  60.             width: 800,
  61.             modal: true,
  62.             buttons: {
  63.                 "Crear un Destinatario": function() {
  64.                     var bValid = true;
  65.                     allFields.removeClass( "ui-state-error" );
  66.  
  67.                     bValid = bValid && checkLength( name, "username", 3, 40 );
  68.                     bValid = bValid && checkLength( email, "email", 6, 80 );
  69.                   
  70.                     bValid = bValid && checkRegexp( email, /^((([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+(\.([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+)*)|((\x22)((((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(([\x01-\x08\x0b\x0c\x0e-\x1f\x7f]|\x21|[\x23-\x5b]|[\x5d-\x7e]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(\\([\x01-\x09\x0b\x0c\x0d-\x7f]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]))))*(((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(\x22)))@((([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.?$/i, "El correo electronico debe de tene el siguiente formato. ejemplo: [email protected]" );
  71.  
  72.                     bValid = bValid && checkLength( categoria, "categoria", 1, 10);
  73.  
  74.                                     
  75.                 var namec = $("#name").val();
  76.                 var emailc = $("#email").val();
  77.                 var telefono1c = $("#telefono1").val();
  78.                 var telefono2c = $("#telefono2").val();
  79.                 var faxc = $("#fax").val();
  80.                 var webc = $("#web").val();
  81.                 var categoriac = $("#categoria").val();
  82.                 var comentarioc = $("#comentario").val();    
  83.                  
  84.                     if ( bValid ) {
  85.                                     
  86.             
  87.             var dataString = $('#form_account').serialize();
  88.              alert('Datos serializados: '+dataString);
  89.             
  90.             
  91.                 $.ajax({ 
  92.               url:'archivo.php',
  93.                   type:'POST',
  94. //data:{"name":namec,"email":emailc,"telefono1":telefono1c,"telefono2":telefono2c,"fax":faxc,"web":webc,"categoria":categoriac,"comentario":comentarioc} 
  95. data: dataString,
  96.  
  97.                   }).done(function() {
  98.                    cargar_usuarios();
  99.  
  100.         $(".ui-selectmenu-status").html("Seleccione...");
  101.         $('input:checkbox').removeAttr('checked');
  102.         $(".q").attr('value', 0);
  103.                  })
  104.     
  105.                         $( this ).dialog( "close" );
  106.                         
  107.                     
  108.                     }
  109.                 },
  110.                 Cancelar: function() {
  111.                     $('input:checkbox').removeAttr('checked');
  112.                     $(".q").attr('value', 0);
  113.                     $( this ).dialog( "close" );
  114.                     
  115.                 }
  116.             },
  117.             close: function() {
  118.                 allFields.val( "" ).removeClass( "ui-state-error" );
  119.                 $(".ui-selectmenu-status").html("Seleccione...");
  120.                 $('input:checkbox').removeAttr('checked');
  121.                 $(".q").attr('value', 0);
  122.                 
  123.             }
  124.         });
  125.  
  126.         $( "#create-user" )
  127.             .button()
  128.             .click(function() {
  129.                 $( "#dialog-form" ).dialog( "open" );
  130.             });
  131.     });
  132.     
  133.     //------------Fin Modal Insertar--------------------------------------------------------
  134. </script>


en el DOM tengo y com este button abro la ventana
Código HTML: 
Ver original
  1. <button id="create-user">Nuevo Destinatario</button>

y el html de la ventana modal donde esta el formulario con los input text

Código HTML: 
Ver original
  1. <div id="dialog-form" title="Crear Nuevo Destinatario">
  2. <p class="validateTips">All form fields are required.</p>
  3. <form id="form_account"/>
  4. <label for="name">Nombre</label>
  5.   <input type="text" name="name" id="name" class="text ui-widget-content ui-corner-all" />
  6.   <label for="email">Email</label>
  7.   <input type="text" name="email" id="email" value="" class="text ui-widget-content ui-corner-all" />
  8.   <label for="telefono1">Telefono 1</label>......................

esta venta funciona sin problemas.


otra cosa que les comente era que yo generaba la tabla con los botones para generar los Modales de consultar,modificar,eliminar

Código HTML: 
Ver original
  1. <td><div class='fg-toolbar'>
  2.     <button class='fg-button ui-state-default ui-corner-all' title='Consultar' id='<? echo $field['id_destinatario'] ?>'><span class='ui-icon ui-icon-search'></span></button>
  3.     <button class='fg-button ui-state-default ui-corner-all' title='Modificar' id='<? echo $field['id_destinatario'] ?>'><span class='ui-icon ui-icon-pencil'></span></button>
  4.     <button class='fg-button ui-state-default ui-corner-all' title='Eliminar'  id='<? echo $field['id_destinatario'] ?>'><span class='ui-icon ui-icon-trash'></span></button>
  5.     </div></td>


con este codigo atrapo el valor del boton y abro las modales

Código Javascript: 
Ver original
  1. $('button.fg-button').live('click',function() {
  2.     var titulo = $(this).attr('title');
  3.     var idc=$(this).attr('id');
  4.     switch(titulo) {
  5.         case 'Consultar':
  6.             $( "#dialog-consultar" ).dialog( "open" );
  7.                  $.ajax({ 
  8.                   url:'views/consultar2.php',
  9.                   type:'post',
  10.                   data:'id='+idc,
  11.                   }).done(function(data) {
  12.                   $("#consulta2").html(data);
  13.                 
  14. });
  15.  
  16.             break;
  17.         case 'Modificar':
  18.             //alert('boton modificar');
  19.             $( "#dialog-modificar" ).dialog( "open" );
  20.              $.ajax({ 
  21.                   url:'views/modificar.php',
  22.                   type:'post',
  23.                   data:'id='+idc,
  24.                   }).done(function(data) {
  25.                   $("#consulta3").html(data);
  26.                 
  27. });
  28.             
  29.             break;
  30.         case 'Eliminar':
  31.            $( "#dialog-confirm" ).dialog( "open" );
  32.            //$( "#dialog-confirm" ).text(idc+" "+"Oscar");
  33.             $.ajax({ 
  34.                   url:'views/consultar.php',
  35.                   type:'post',
  36.                   data:'id='+idc,
  37.                   }).done(function(data) {
  38.                   $("#consulta").html(data);
  39. });
  40.            //
  41.            
  42.           
  43.            
  44.             break;
  45.     }
  46. });
Última edición por Montes28; 23/09/2012 a las 13:32
  #2 (permalink)  
Antiguo 23/09/2012, 13:33
 
Fecha de Ingreso: septiembre-2010
Mensajes: 1.853
Antigüedad: 13 años, 7 meses
Puntos: 6
Respuesta: validar mas de una ventana modal - jquery Dialog
http://imageshack.us/photo/my-images/818/54872351.jpg/este es la imagen del proyecto

http://imageshack.us/photo/my-images/209/69327012.jpg/la validacion que hago al insertar

http://imageshack.us/photo/my-images...20.jpg/http:// y esta es la ventana que necesito validar

http://imageshack.us/photo/my-images/829/37050967.jpg/ modal de consultar
  #3 (permalink)  
Antiguo 23/09/2012, 18:18
 
Fecha de Ingreso: septiembre-2010
Mensajes: 1.853
Antigüedad: 13 años, 7 meses
Puntos: 6
Respuesta: validar mas de una ventana modal - jquery Dialog
amigos he intentado y he hasta el momento llevo lo siguiente

Código Javascript: 
Ver original
  1. var namec = $( "#namec" ),
  2. allFieldsc =$( [] ) .add( namec )
  3.  
  4. function updateTipsc( t ) {
  5.             tipsc
  6.                 .text( t )
  7.                 .addClass( "ui-state-highlight" );
  8.             setTimeout(function() {
  9.                 tips.removeClass( "ui-state-highlight", 1500 );
  10.             }, 500 );
  11.         }
  12.  
  13.  
  14. function checkLengthc( o, n, min, max ) {
  15.             if ( o.val().length > max || o.val().length < min ) {
  16.                 o.addClass( "ui-state-error" );
  17.                 updateTipsc( "Length of " + n + " must be between " +
  18.                     min + " and " + max + "." );
  19.                 return false;
  20.             } else {
  21.                 return true;
  22.             }
  23.         }
  24.  
  25.  
  26. function checkRegexpc( o, regexp, n ) {
  27.             if ( !( regexp.test( o.val() ) ) ) {
  28.                 o.addClass( "ui-state-error" );
  29.                 updateTipsc( n );
  30.                 return false;
  31.             } else {
  32.                 return true;
  33.             }
  34.         }
  35. $( "#dialog-modificar" ).dialog({
  36.             autoOpen: false,
  37.             height: 600,
  38.             width: 800,
  39.             modal: true,
  40.             buttons: {
  41.                 "Modificar Destinatario": function() {
  42.                     var bValidc = true;
  43.                     allFielldsc.removeClass( "ui-state-error" );
  44.                     bValidc = bValidc && checkLengthc( namec, "usernamec", 3, 16 );

y por medio de firebug me marca el siguiente error ReferenceError: allFielldsc is not defined

y me marca la siguiente linea de codigo allFielldsc.removeClass( "ui-state-error" );

leyendo un poco creo que tengo este mismo problema http://stackoverflow.com/questions/6...-generated-ids
pero no se como solucionarlo por eso acudo a ustedes


en la misma pagina tengo

<div id="dialog-modificar" title="Modificar Destinatario">
<p class="validateTipsc">All form fields are required.</p>
<div id="insert">
<div class="columnas" id="col_1"><div id="consulta3"></div>
<label for="name">Nombre</label>
<input type="text" name="namec" id="namec" value="" class="text ui-widget-content ui-corner-all" />


</div>
Última edición por Montes28; 23/09/2012 a las 18:30
  #4 (permalink)  
Antiguo 24/09/2012, 19:38
 
Fecha de Ingreso: septiembre-2010
Mensajes: 1.853
Antigüedad: 13 años, 7 meses
Puntos: 6
Respuesta: validar mas de una ventana modal - jquery Dialog
amigos como puedo hacer para que las nuevas ventanas hereden (delegate o live )el metodo de validacion utilizado en la primera ventana modal?
  #5 (permalink)  
Antiguo 25/09/2012, 21:10
 
Fecha de Ingreso: septiembre-2010
Mensajes: 1.853
Antigüedad: 13 años, 7 meses
Puntos: 6
Respuesta: validar mas de una ventana modal - jquery Dialog
en el sitema que estoy desarrollando utilizo un codigo con el cual hereda pero utilizo live , pero como hago para que una nueva venta herede la validacion.

Código Javascript: 
Ver original
  1. $('button.fg-button').live('click',function() {
  2.     var titulo = $(this).attr('title');
  3.     var idc=$(this).attr('id');
  4.     switch(titulo) {
  5.         case 'Consultar':
  6.             $( "#dialog-consultar" ).dialog( "open" );
  7.             //$( "#dialog-consultar" ).text(idc+" "+"Oscar");
  8.             
  9.                  $.ajax({ 
  10.                   url:'views/consultar2.php',
  11.                   type:'post',
  12.                   data:'id='+idc,
  13.                   }).done(function(data) {
  14.                   $("#consulta2").html(data);
  15.                 
  16. });
  17.  
  18.             break;
  19.         case 'Modificar':
  20.             //alert('boton modificar');
  21.             $( "#dialog-modificar" ).dialog( "open" );
  22.              $.ajax({ 
  23.                   url:'views/modificar.php',
  24.                   type:'post',
  25.                   data:'id='+idc,
  26.                   }).done(function(data) {
  27.                   $("#consulta3").html(data);
  28.                 
  29. });
  30.             
  31.             break;
  32.         case 'Eliminar':
  33.            $( "#dialog-confirm" ).dialog( "open" );
  34.            //$( "#dialog-confirm" ).text(idc+" "+"Oscar");
  35.             $.ajax({ 
  36.                   url:'views/consultar.php',
  37.                   type:'post',
  38.                   data:'id='+idc,
  39.                   }).done(function(data) {
  40.                   $("#consulta").html(data);
  41. });
  42.            //
  43.            
  44.           
  45.            
  46.             break;
  47.     }
  48. });
  #6 (permalink)  
Antiguo 26/09/2012, 07:51
Avatar de fjrueda  
Fecha de Ingreso: marzo-2008
Ubicación: Bucaramanga
Mensajes: 313
Antigüedad: 16 años, 1 mes
Puntos: 35
Respuesta: validar mas de una ventana modal - jquery Dialog
Si su problema es que no puede comunicar las ventanas entres si, le recomiendo que se lea este documento ... http://www.ecosysw.com/CPUZ/document...Javascript.doc
  #7 (permalink)  
Antiguo 26/09/2012, 14:48
 
Fecha de Ingreso: septiembre-2010
Mensajes: 1.853
Antigüedad: 13 años, 7 meses
Puntos: 6
Respuesta: validar mas de una ventana modal - jquery Dialog
fjrueda gracias por responder, tengo una grave problema estoy iniciando con jquery y javascript entonces se me dificulta un poco pero estoy trabajando duro para lograr solucionar este problema.

El problema es que los vínculos a las nuevas ventanas los genero dinámicamente pero la nueva ventana modal que abro no tiene la validación de la primera. No logro identificar el problema.

Etiquetas: ajax, formulario, funcion, html, input, modal, select, botones, ventanas
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


« Tema Anterior | Próximo Tema »


La zona horaria es GMT -6. Ahora son las 22:21.