Question
i'm working in a site using PHP+JQuery. For CRUD operations i'm using JTable with validationEngine for form validation. I'm creating a new JQuery Dialog for Password Change, but validationEngine returns me "True" when i close and open again the password dialog. this is my full javascript code:
https://stackoverflow.com/questions/18304215
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
Russian<script type="text/javascript">
$(document).ready(function() {
$("#catalogoAlumnos").jtable({
title : 'Alumnos',
sorting : true,
actions : {
listAction : '../php/alumnosActions/selectAlumnos.php',
createAction : '../php/alumnosActions/agregarAlumno.php',
updateAction : '../php/alumnosActions/updateAlumno.php',
deleteAction : '../php/alumnosActions/deleteAlumno.php'
},
fields : {
ficha : {
title : '',
width : '1%',
sorting : false,
edit : false,
create : false,
display : function(Data) {
var $img = $('<button class="jtable-command-button jtable-view-command-button" src="../style/jtable/metro/list.png" title="Ver Más..." />');
$img.click(function() {
var $div = $("<div id='dialog' title='Información'>" + "<strong><label class='jtable-input-label'>Nombre Completo: </label></strong>" + Data.record.apellidosalumno + " " + Data.record.nombresalumno + "<br>" + "<strong><label class='jtable-input-label'>Sexo: </label></strong>" + Data.record.sexoalumno + "<br>" + "<strong><label class='jtable-input-label'>Dirección Completa: </label></strong>" + Data.record.direccionalumno + ", " + Data.record.ciudadalumno + ", " + Data.record.estadoalumno + ", " + Data.record.paisalumno + "<br>" + "<strong><label class='jtable-input-label'>Periodo de Registro: </label></strong>" + Data.record.periodoregistroalumno + " Del " + Data.record.anoregistroalumno + "<br>" + "<strong><label class='jtable-input-label'>Periodo Actual: </label></strong>" + Data.record.periodoactualalumno + " Del " + Data.record.anoactualalumno + "<br>" + "<strong><label class='jtable-input-label'>Semestre: </label></strong>" + Data.record.semestrealumno + "</div>");
$div.dialog({
modal : true
});
});
return $img;
}
},
num_control : {
key : true,
title : 'No. Control',
create : true,
edit : false,
inputClass : 'validate[required]'
},
password : {
list : false,
title : 'Contraseña',
type : 'password',
create : true,
edit : false,
inputClass : 'validate[required]'
},
apellidosalumno : {
title : 'Apellidos',
inputClass : 'validate[required]'
},
nombresalumno : {
title : 'Nombre',
inputClass : 'validate[required]'
},
sexoalumno : {
list : false,
title : 'Sexo',
create : true,
edit : true,
options : {
'M' : 'Masculino',
'F' : 'Femenino'
}
},
direccionalumno : {
title : 'Dirección',
list : false,
create : true,
edit : true,
inputClass : 'validate[required]'
},
ciudadalumno : {
title : 'Ciudad',
list : false,
create : true,
edit : true,
inputClass : 'validate[required]'
},
estadoalumno : {
title : 'Estado',
list : false,
create : true,
edit : true,
inputClass : 'validate[required]'
},
paisalumno : {
title : 'Pais',
list : false,
create : true,
edit : true,
inputClass : 'validate[required]'
},
carreraalumno : {
title : 'Carrera',
options : '../php/carrerasActions/selectCarrerasDropDown.php'
},
periodoregistroalumno : {
title : 'Periodo de Registro',
options : {
'1' : 'Ene-Abril',
'2' : 'Mayo-Agosto',
'3' : 'Sep-Dic'
},
list : false,
create : true,
edit : true
},
anoregistroalumno : {
title : 'Año de Registro',
list : false,
create : true,
edit : true,
inputClass : 'validate[required,custom[integer],min[1980]]'
},
periodoactualalumno : {
title : 'Periodo Actual',
options : {
'1' : 'Ene-Abril',
'2' : 'Mayo-Agosto',
'3' : 'Sep-Dic'
},
list : false,
create : true,
edit : true
},
anoactualalumno : {
title : 'Año del Periodo Actual',
list : false,
create : true,
edit : true,
inputClass : 'validate[required,custom[integer],min[1980]]'
},
semestrealumno : {
title : 'Semestre',
inputClass : 'validate[required,custom[integer]]'
},
emailalumno : {
title : 'E-mail',
list : false,
create : true,
edit : true,
inputClass : 'validate[required,custom[email]]'
},
cambiar_password : {
title : '',
width : '1%',
sorting : false,
edit : false,
create : false,
display : function(Data) {
var $img = $('<button class="jtable-command-button jtable-password-command-button" title="Cambiar Contraseña" />');
$img.click(function() {
var $div = $("<div id='dialog2' title='Cambiar Contraseña'>" + "<form id='cambia_pass' class='jtable-dialog-form' style='-moz-column-count:auto;-webkit-column-count:auto;column-count:auto;-moz-column-gap:auto;-webkit-column-gap:auto;column-gap:auto;'>" + "<div class='jtable-input-field-container'>" + "<div class='jtable-input-label'>Antigua Contraseña</div>" + "<div class='jtable-input jtable-password-input'><input type='password' class='validate[required]' name='antiguo_pass' id='antiguo_pass'/></div>" + "</div>" + "<div class='jtable-input-field-container'>" + "<div class='jtable-input-label'>Escriba Contraseña</div>" + "<div class='jtable-input jtable-password-input'><input type='password' class='validate[required]' name='nuevo_pass1' id='nuevo_pass1'/></div>" + "</div>" + "<div class='jtable-input-field-container'>" + "<div class='jtable-input-label'>Repita Contraseña</div>" + "<div class='jtable-input jtable-password-input'><input type='password' class='validate[required],equals[nuevo_pass1]' name='nuevo_pass2 id='nuevo_pass2'/></div>" + "</div>" + "</form>" + "</div>");
$div.dialog({
modal : true,
close : function(event, ui) {
$("#cambia_pass").validationEngine('hide');
$("#cambia_pass").validationEngine('detach');
},
buttons : {
"Actualizar" : function() {
if ($("#cambia_pass").validationEngine('validate')) {
}
},
"Cancelar" : function() {
$("#cambia_pass").validationEngine('hide');
$("#cambia_pass").validationEngine('detach');
$(this).dialog("close");
}
}
});
});
return $img;
}
}
},
formSubmitting : function(event, data) {
return data.form.validationEngine('validate');
},
formClosed : function(event, data) {
data.form.validationEngine('hide');
data.form.validationEngine('detach');
}
});
$("#catalogoAlumnos").jtable('load');
$('#cmdBuscar').click(function(e) {
e.preventDefault();
$('#catalogoAlumnos').jtable('load', {
no_control : $('#search_nocontrol').val(),
apellidos : $('#search_apellidos').val(),
nombres : $('#search_nombres').val(),
carrera : $('#search_carrera').val(),
semestre : $('#search_semestre').val(),
});
});
});
</script>
Solution
Solved... insted of using 'detach' and 'hide' events, i removed directly the dialog from the DOM using .remove() from JQuery. so this code:
close : function(event, ui) {
$("#cambia_pass").validationEngine('hide');
$("#cambia_pass").validationEngine('detach');
}
became this:
close : function(event, ui) {
$(this).remove();
}
