0

Tengo un boton para crear un usuario, al apretarlo se abre una ventana modal, con todos los campos en blanco, y una imagen tipo anonymus, que se cambia por medio de js al subir una foto (antes de darle al boton para guardar los datos)

Luego tengo una tabla con todos los usuarios listados, y cada fila tiene un boton para editar a cada usuario. Si apreto el boton de editar, se abre un modal que me trae los datos actuales del usuario, incluyendo la previsualizacion de su foto.

El problema es el siguiente: Cuando abro la pagina, y le doy click en crear usuario, me muestra la imagen anónima, como debe ser.

Luego doy click en el boton editar de cualquier usuario, se abre su ventana modal que muestra informacion, la cierro sin hacer cambio alguno.

Cuando vuelvo a apretar el boton para agregar usuario, me trae en lugar de la imagen anonima, la imagen del ultimo usuario al que dí click en editar.

Boton de agregar usuario:

<button class="btn btn-primary btnAgregarUsuario" data-toggle="modal" 
data-target="#modalAgregarUsuario">Agregar Usuario</button>

Modal de Agregar Usuario

<div class="modal fade" id="modalAgregarUsuario" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">

  <div class="modal-dialog modal-dialog-centered" role="document">

    <div class="modal-content">

    <form role="form" method="post" enctype="multipart/form-data" action="">

            <div class="modal-header bg-dark">

              <h5 class="modal-title">Agregar Usuario</h5>

              <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true" class="text-white">&times;</span>
              </button>

            </div>

            <div class="modal-body">

              <div class="card-body">

               ...

                <!-- Entrada para la foto -->
                <div class="form-group">
                      <div class="input-group">
                        <div class="input-group-prepend">
                          <span class="input-group-text" width="20%"><i class="fa fa-camera"></i></span>
                        </div>
                        <div class="custom-file">
                          <input type="file" class="custom-file-input nuevaFoto" name="nuevaFoto">
                          <label class="custom-file-label" for="nuevaFoto">Seleccionar foto</label>
                        </div>

                      </div>
                </div>

                <div class="form-group">
                      <img class="img-thumbnail rounded mx-auto d-block previsualizar" src="vistas\img\usuarios\anonymous.png" alt="Foto de perfil actual"  width="200px ">
                      <p class="text-center text-muted">Foto de perfil actual</p>
                </div>

              </div>

            </div>

            <div class="modal-footer">
              <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancelar</button>
              <button type="submit" class="btn btn-primary">Guardar</button>
            </div>

  <?php

    $crearUsuario = new ControladorUsuarios();
    $crearUsuario -> ctrCrearUsuario();

  ?>
  </form>
</div>

Boton de Editar Usuario

  <button class="btn btn-warning btnEditarUsuario" 
  idUsuario="'.$value['id'].'" data-toggle="modal" data- 
  target="#modalEditarUsuario"><i class="fa fa-pencil-alt"></i></button>

Modal de Editar Usuario

<div class="modal fade" id="modalEditarUsuario" tabindex="-1" role="dialog" 
aria-labelledby="exampleModalCenterTitle" aria-hidden="true">

  <div class="modal-dialog modal-dialog-centered" role="document">

    <div class="modal-content">

     <form role="form" method="post" enctype="multipart/form-data" action="">

            <div class="modal-header bg-dark">

              <h5 class="modal-title">Editar Usuario</h5>

              <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true" class="text-white">&times;</span>
              </button>

            </div>

            <div class="modal-body">

              <div class="card-body">

               ...

                <!-- Entrada para la foto -->
                <div class="form-group">
                      <div class="input-group">
                        <div class="input-group-prepend">
                          <span class="input-group-text" width="20%"><i class="fa fa-camera"></i></span>
                        </div>
                        <div class="custom-file">
                          <input type="file" class="custom-file-input nuevaFoto" name="editarFoto">
                          <label class="custom-file-label" for="editarFoto">Seleccionar foto</label>
                        </div>

                      </div>
                </div>

                <div class="form-group">
                      <img class="img-thumbnail rounded mx-auto d-block previsualizar" src="" alt="Foto de perfil actual"  width="200px ">
                      <p class="text-center text-muted">Foto de perfil actual</p>
                      <input type="hidden" id="fotoActual" name="fotoActual">
                </div>

              </div>

            </div>

            <div class="modal-footer">
              <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancelar</button>
              <button type="submit" class="btn btn-primary">Guardar</button>
            </div>

        <?php
                $editarUsuario = new ControladorUsuarios();
                $editarUsuario -> ctrEditarUsuario();

        ?>

  </form>
</div>

Método JS para previsualizar datos al darle click al boton editar

$(".btnEditarUsuario").click(function(){

    var idUsuario = $(this).attr("idUsuario");


    var datos = new FormData();
    datos.append("idUsuario", idUsuario);

    $.ajax({

        url: "ajax/usuarios.ajax.php",
        method: "POST",
        data: datos,
        cache: false,
        contentType: false,
        processData: false,
        dataType: "json",
        success: function(respuesta){
            $("#editarNombre").val(respuesta["nombre"]);
            $("#editarUsuario").val(respuesta["usuario"]);
            $("#editarPerfil").html(respuesta["perfil"]);
            $("#editarPerfil").val(respuesta["perfil"]);
            $("#fotoActual").val(respuesta["foto"]);


            $("#passwordActual").val(respuesta["password"]);

            if(respuesta["foto"] != ""){
                $(".previsualizar").attr("src", respuesta["foto"])
            }
        }

    });

})

Y por ultimo este metodo que se habia pasado subirlo, el que sube la imagen para usuarios nuevos

/*=================================================
SUBIENDO FOTO DE USUARIO
=================================================*/

$(".nuevaFoto").change(function(){

var imagen = this.files[0];

/*=================================================
VALIDAR FORMATO
=================================================*/

if(imagen['type'] != "image/jpg" && imagen['type'] != "image/png" && imagen['type'] != "image/jpeg"){
    $(".nuevaFoto").val("");

    swal.fire({
        title: "Error al subir la imagen",
        text: "La imagen debe estar en formato JPG o PNG",
        type: "error",
        confirmButtonText: "Cerrar"
    });
} else if(imagen['size'] > 2000000){

    $(".nuevaFoto").val("");

    swal.fire({
        title: "Error al subir la imagen",
        text: "La imagen debe pesar menos de 2mb",
        type: "error",
        confirmButtonText: "Cerrar"
    });
} else {
    var datosImagen = new FileReader;
    datosImagen.readAsDataURL(imagen);

    $(datosImagen).on("load", function(event){

        var rutaImagen = event.target.result;
        $(".previsualizar").attr("src", rutaImagen);
    })
}

})

2 respuestas 2

0

Debes correr un script que "restaure" el modal cada que se cree un nuevo usuario, de esta forma

$('.btnAgregarUsuario').on('click', () = {
$(".previsualizar").attr("src", "vistas\img\usuarios\anonymous.png");
});
0

La solucion la consegui cambiando el nombre de las clases previsualizar, en lugar de usar la misma para los dos modales, llame previsualizarNueva a la clase de Crear usuario y llame previsualizarActual a la de Editar, y modifique sus llamadas en el archivo JS

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.