Открываться dialog jquery на основании списка пользователей

Я делаю модальное окно с jquery dialog, чтобы обновлять пользователи, но только открывается dialog первого пользователя, который у меня есть в списке.

То, что я хочу, состоит в том, чтобы открывать dialog, чтобы наполнять поля формуляра, который у меня есть внутри, с данными каждого индивидуального пользователя.

Код, который производит таблицу пользователей, - следующий:

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

и код, чтобы открывать dialog, - следующий:

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

Я думаю, что ошибка, - в котором у всех кнопок есть то же имя "#act_user", но не, как он мог бы решать это.

3
задан 02.04.2016, 00:33
2 ответа

Поскольку ты сами упоминаешь, проблема - повторенные id's. Чтобы это решать, способствуй тому, чтобы у каждой линии был различный, пойдите. Ты можешь получать это добавляя id пользователя к id этикетки HTML. Так, если id's пользователя будут единственными, id's HTML также это будут и уже у тебя не будет этой проблемы. Изменение в коде было бы нечто похожим:

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;

Но сейчас появляется другая проблема, модальный ты это открываешь используя драйвер события click для #act_user что уже не существует. Ты можешь решать это добавляя класс к ссылке (например act_user) и меняя драйвер события click для того, чтобы он ассоциировался с этим классом:

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');
});
2
ответ дан 24.11.2019, 14:39
  • 1
    Ok, большое спасибо, был справедливым то, в чем он нуждался. – Juan Pinzón 04.04.2016, 16:13

Если, эта ошибка. Ты должен распределять ему один пойдите различно к td твоей таблицы и после называть модального корреспондента каждого td.

1
ответ дан 24.11.2019, 14:39

Теги

Похожие вопросы