Open dialog jquery based on a list of users

3

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.

    
asked by Juan Pinzón 01.04.2016 в 23:33
source

2 answers

2

As you mention, the problem is repeated ids. To solve it, make each row have a different id. You can do this by adding the user id to the id of the HTML tag. So if the user id's are unique, the HTML id's will also be and you will not have this problem anymore. The change in the code would be something like this:

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;

But now another problem arises, the modal you open using the click event handler for #act_user that no longer exists. You can solve this by adding a class to the link (for example act_user ) and changing the click event handler so that it is associated with that class:

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');
});
    
answered by 03.04.2016 / 04:49
source
1

Yes, that is the error. You have to assign a different id to the td of your table and then call the corresponding modal of each td.

    
answered by 02.04.2016 в 00:03