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<script>
//--------Modal Insertar--------------------------------------------------------
$(function() {
//$( "#dialog:ui-dialog" ).dialog( "destroy" );
var name = $( "#name" ),
email = $( "#email" ),
telefono1 = $( "#telefono1" ),
telefono2 = $( "#telefono2" ),
fax = $( "#fax" ),
web = $( "#web" ),
comentario= $( "#comentario" ),
categoria = $( "#categoria" ),
allFields = $( [] ).add( name ).add( email ).add( telefono1 ).add( telefono2 ).add( fax ).add( web ).add( comentario ).add( categoria ),
tips = $( ".validateTips" );
function updateTips( t ) {
tips
.text( t )
.addClass( "ui-state-highlight" );
setTimeout(function() {
tips.removeClass( "ui-state-highlight", 1500 );
}, 500 );
}
function checkLength( o, n, min, max ) {
if ( o.val().length > max || o.val().length < min ) {
o.addClass( "ui-state-error" );
updateTips( "Length of " + n + " must be between " +
min + " and " + max + "." );
//updateTips( "Este Campo es Requerido" );
return false;
} else {
return true;
}
}
function checkRegexp( o, regexp, n ) {
if ( !( regexp.test( o.val() ) ) ) {
o.addClass( "ui-state-error" );
updateTips( n );
return false;
} else {
return true;
}
}
$( "#dialog-form" ).dialog({
autoOpen: false,
height: 600,
width: 800,
modal: true,
buttons: {
"Crear un Destinatario": function() {
var bValid = true;
allFields.removeClass( "ui-state-error" );
bValid = bValid && checkLength( name, "username", 3, 40 );
bValid = bValid && checkLength( email, "email", 6, 80 );
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]" );
bValid = bValid && checkLength( categoria, "categoria", 1, 10);
var namec = $("#name").val();
var emailc = $("#email").val();
var telefono1c = $("#telefono1").val();
var telefono2c = $("#telefono2").val();
var faxc = $("#fax").val();
var webc = $("#web").val();
var categoriac = $("#categoria").val();
var comentarioc = $("#comentario").val();
if ( bValid ) {
var dataString = $('#form_account').serialize();
alert('Datos serializados: '+dataString);
$.ajax({
url:'archivo.php',
type:'POST',
//data:{"name":namec,"email":emailc,"telefono1":telefono1c,"telefono2":telefono2c,"fax":faxc,"web":webc,"categoria":categoriac,"comentario":comentarioc}
data: dataString,
}).done(function() {
cargar_usuarios();
$(".ui-selectmenu-status").html("Seleccione...");
$('input:checkbox').removeAttr('checked');
$(".q").attr('value', 0);
})
$( this ).dialog( "close" );
}
},
Cancelar: function() {
$('input:checkbox').removeAttr('checked');
$(".q").attr('value', 0);
$( this ).dialog( "close" );
}
},
close: function() {
allFields.val( "" ).removeClass( "ui-state-error" );
$(".ui-selectmenu-status").html("Seleccione...");
$('input:checkbox').removeAttr('checked');
$(".q").attr('value', 0);
}
});
$( "#create-user" )
.button()
.click(function() {
$( "#dialog-form" ).dialog( "open" );
});
});
//------------Fin Modal Insertar--------------------------------------------------------
</script>
en el DOM tengo y com este button abro la ventana
y el html de la ventana modal donde esta el formulario con los input text
Código HTML:
Ver original<div id="dialog-form" title="Crear Nuevo Destinatario"> <p class="validateTips">All form fields are required.
</p> <form id="form_account"/> <input type="text" name="name" id="name" class="text ui-widget-content ui-corner-all" /> <input type="text" name="email" id="email" value="" class="text ui-widget-content ui-corner-all" /> <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<td><div class='fg-toolbar'> <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> <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> <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>
con este codigo atrapo el valor del boton y abro las modales
Código Javascript
:
Ver original$('button.fg-button').live('click',function() {
var titulo = $(this).attr('title');
var idc=$(this).attr('id');
switch(titulo) {
case 'Consultar':
$( "#dialog-consultar" ).dialog( "open" );
$.ajax({
url:'views/consultar2.php',
type:'post',
data:'id='+idc,
}).done(function(data) {
$("#consulta2").html(data);
});
break;
case 'Modificar':
//alert('boton modificar');
$( "#dialog-modificar" ).dialog( "open" );
$.ajax({
url:'views/modificar.php',
type:'post',
data:'id='+idc,
}).done(function(data) {
$("#consulta3").html(data);
});
break;
case 'Eliminar':
$( "#dialog-confirm" ).dialog( "open" );
//$( "#dialog-confirm" ).text(idc+" "+"Oscar");
$.ajax({
url:'views/consultar.php',
type:'post',
data:'id='+idc,
}).done(function(data) {
$("#consulta").html(data);
});
//
break;
}
});