0

En una tabla listo los usuarios traidos de una base de datos, y para validar que un usuario esta activo o inactivo uso un SWITCHE (on/off)...

  .done(function(rest) {
            let resp = $.parseJSON(rest);
            let output = '';
            resp.map((e, key) => {
                // Aqui valido si el usuario esta activo o inactivo
                resp[key]['estado'] != 0 ?  output = "<input type='checkbox' class='item' checked >" : output = "<input type='checkbox' class='item'>";

                    $('.tusers').append(`<tr>
                            <td>${resp[key]['codigocurso']}</td>
                            <td>${resp[key]['nombre']}</td>
                            <td>${resp[key]['email']}</td>
                            <td>${resp[key]['id']}</td>
                            <td>
                                <div class='switch' onclick='idUser(${resp[key]['id']})'>
                                    <label>
                                        Inactivo
                                        ${output}
                                        <span class='lever'></span>
                                        Activo
                                    </label>
                                </div>
                            </td>
                            <td><button class='btn waves-light red'>Eliminar</button></td>
                        </tr>`);
            })
        })

function idUser(id){
        let checked;
        $(".item").change(function() {

            if($(this).is(":checked")) {
                checked = true;
            }
            else {
                checked = false;
           }

         $.ajax({
            url: 'http://localhost/conexion/controllers/HomeClass.php/updatestate',
            type: 'POST',
            data: {'id': id, 'checked' : checked}
        })
        .done(function(resp) {          
            console.log(resp);
        })
        .fail(function() {
            console.log("error");
        });
        })

  }

PROBLEMA Cuando voy actualizar el estado de un usuario con el switch, me cambia el estado de todos los usuario de diferentes maneras.

introducir la descripción de la imagen aquí

Se puede observar que al momento de cambiar un switchecambia el estado de los demas en el script, ¿como validar el cambio de un solo switch si afectar a los demas?

2
  • Prueba ponerles un id diferente a cada uno de los switchs Commented el 10 jul. 2018 a las 14:41
  • un atributo id?
    – JDavid
    Commented el 10 jul. 2018 a las 14:47

1 respuesta 1

2

Acá te dejo un ejemplo de como puedes hacer lo que estas tratando pero en vez de usar el evento onclick, puedes añadirle un atributo a cada checkboxs con su id, luego bindear el evento "change" a estos checkbox y obtener en la ejecucion del evento el id del checkbox y el status del mismo.

Espero que te sea de ayuda!

Saludos!

$(document).ready(function() {

  //Supongamos que a traves de tu ajax te llegan los siguientes datos
  let resp=[
      {
          codigocurso: 1,
          nombre: "pepe",
          email: "[email protected]",
          id: 1
      },
      {
          codigocurso: 2,
          nombre: "pepe2",
          email: "[email protected]",
          id: 2
      }
  ];

  //cuando armas la tabla podes pasarle un "data-id" al checbox
  $.each(resp, function(index,value){
      $('.tusers').append(`<tr>
      <td>${value['codigocurso']}</td>
      <td>${value['nombre']}</td>
      <td>${value['email']}</td>
      <td>${value['id']}</td>
      <td>
          <div class="switch">
              <label>
                  <input type="checkbox" data-id="${value['id']}"> //<- aca el "data-id"
                  <span class="lever"></span>
              </label>
          </div>
      </td>
      <td><button class="btn waves-light red">Eliminar</button></td>
      </tr>`);
  });
  
  //luego bindeas el evento change a los checkbox, y obtenes el id del checkbox que se modifico en la ejecucion de cada evento
  $(".switch").find("input[type=checkbox]").on("change",function() {
      let checked = $(this).prop('checked');
      let id = $(this).data('id');
      console.log(id, checked);
      
      // de aca en adelante haces lo necesario con el codigo 
      /*
      $.ajax({
          url: 'http://localhost/conexion/controllers/HomeClass.php/updatestate',
          type: 'POST',
          data: {'id': id, 'checked' : checked}
      })
      .done(function(resp) {          
          console.log(resp);
      })
      .fail(function() {
          console.log("error");
      });
      */
      
  });

});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.0/js/materialize.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.0/css/materialize.min.css" rel="stylesheet"/>


<table class="tusers">
</table>

1
  • Men es excelente, muchas gracias por tu colaboración....
    – JDavid
    Commented el 10 jul. 2018 a las 21:53

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.