I'm doing a modal window with jquery dialog to update users, but only the dialog of the first user I have in the list opens.
What I want is to open the dialog to fill in the fields of the form that I have inside, with the data of each individual user.
The code generated by the user table is as follows:
public function generaTabla($arreglo_info, $arreglo_col,$name){
$aux = json_decode(json_encode($arreglo_info),TRUE);
$th = array_keys($aux[0]);
$cont = 0;
$tabla = "<table>";
$tabla.="<tr>";
foreach ($th as $key => $value) {
if ($value!="id_usuario") {
$tabla.="<th>".$value."</th>";
}
}
foreach ($arreglo_col as $col => $value) {
$tabla.="<th>".$value."</th>";
}
$tabla.="</tr>";
foreach ($aux as $fila) {
$tabla.="<tr>";
foreach ($fila as $col => $valor) {
if ($col!="id_usuario") {
$tabla.="<td>".$valor."</td>";
}
}
foreach ($arreglo_col as $col => $value) {
switch ($value) {
case 'Actualizar':
$tabla.="<td><a href='#' id='act_user' onClick='obtener$name($fila[id_usuario])'><i class='ui-icon ui-icon-refresh' style='color:black;'></i></button></td>";
break;
case 'Eliminar':
$tabla.="<td><a data-toggle='tooltip' data-original-title='Editar' href='#' onClick='eliminar$name($fila[id_usuario])'><i class='ui-icon ui-icon-trash' style='color:black;'></i></a></td>";
break;
default:
break;
}
}
$tabla.="</tr>";
}
$tabla.="</table>";
return $tabla;
}
and the code to open the dialog is as follows:
<script>
$(function() {
var dialog, form,
name = $( "#username_act" ),
password = $( "#password_act" ),
allFields = $( [] ).add( name ).add( password ),
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 + "." );
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;
}
}
function actUser() {
var valid = true;
allFields.removeClass( "ui-state-error" );
valid = valid && checkLength( name, "username_act", 3, 16 );
valid = valid && checkLength( password, "password_act", 5, 16 );
valid = valid && checkRegexp( name, /^[a-z]([0-9a-z_\s])+$/i, "Username may consist of a-z, 0-9, underscores, spaces and must begin with a letter." );
valid = valid && checkRegexp( password, /^([0-9a-zA-Z])+$/, "Password field only allow : a-z 0-9" );
if ( valid ) {
if(confirm("Actualizar Usuario")){
$.ajax({
type: "POST",
dataType: 'json',
data: { 'username': $("#username_act").val(),'password': $("#password_act").val(),'rol': $("#rol_act").val()},
url: "<?php echo site_url();?>"+"/principal/actualizarUsuario",
success : function(data) {
console.log(data);
if (data == 'ok') {
alert("Usuario actualizado correctamente");
window.location.href = "listarUsuarios";
}else{
alert("Ocurrio un error al actualizar el usuario, contacte al administrador");
window.location.href = "listarUsuarios";
}
}
});
}
dialog.dialog( "close" );
}
return valid;
}
dialog = $( "#dialog-form_act" ).dialog({
autoOpen: false,
height: 300,
width: 350,
modal: true,
buttons: {
"Actualizar cuenta": actUser,
Cancel: function() {
dialog.dialog( "close" );
}
},
close: function() {
form[ 0 ].reset();
allFields.removeClass( "ui-state-error" );
}
});
form = dialog.find( "form" ).on( "submit", function( event ) {
event.preventDefault();
actUser();
});
$('#act_user').click(function(e) {
e.preventDefault();
dialog.dialog('open');
});
/*$( "#act_user" ).button().on( "click", function() {
dialog.dialog( "open" );
});*/
});
</script>
I think the error is that all the buttons have the same name "# act_user" , but I do not know how to solve it.