2

Estoy haciendo una ventana modal con jquery dialog para actualizar usuarios, pero solo se abre el dialog del primer usuario que tengo en la lista.

Lo que quiero es abrir el dialog para rellenar los campos del formulario que tengo dentro, con los datos de cada usuario individual.

El código que genera la tabla de usuarios es el siguiente:

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;
}

y el codigo para abrir el dialog es el siguiente:

<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>

Creo que el error esta en que todos los botones tienen el mismo nombre "#act_user", pero no se como podria solucionarlo.

1
  • Por alguna razón particular estas creando a mano un dialog modal ?? te sugiero que si no tienen un motivo que justifique el esfuerzo utilices el de bootstrap
    – Santi92
    el 1 abr. 2016 a las 23:45

2 respuestas 2

1

Como tú mismo mencionas, el problema son los id's repetidos. Para solucionarlo, haz que cada fila tenga un diferente id. Esto lo puedes conseguir añadiendo el id de usuario al id de la etiqueta HTML. Así si los id's de usuario son únicos, los id's de HTML también lo serán y ya no tendrás este problema. El cambio en el código sería algo así:

case 'Actualizar':
  $tabla.="<td><a href='#' id='act_user$fila[id_usuario]' onClick='obtener$name($fila[id_usuario])'><i class='ui-icon ui-icon-refresh' style='color:black;'></i></button></td>";
  break;

Pero ahora se presenta otro problema, el modal lo abres usando el controlador del evento click para #act_user que ya no existe. Esto lo puedes solucionar añadiendo una clase al enlace (por ejemplo act_user) y cambiando el controlador del evento click para que se asocie a esa clase:

case 'Actualizar':
  $tabla.="<td><a href='#' class='act_user' id='act_user$fila[id_usuario]' onClick='obtener$name($fila[id_usuario])'><i class='ui-icon ui-icon-refresh' style='color:black;'></i></button></td>";
  break;

...

$('.act_user').click(function(e) {
  e.preventDefault();
  dialog.dialog('open');
});
1
  • Ok, muchas gracias, era justo lo que necesitaba. el 4 abr. 2016 a las 13:13
0

Si, es ese el error. Tienes que asignarle un id diferente al td de tu tabla y despues llamar al modal correspondiente de cada td .

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.