-1

introducir la descripción de la imagen aquí

Hola saludos intento realizar todas las funciones de los botones de acciones para terminar mi crud ,lo que pasa es que los quiero realizar en ventanas modales alguien me puede ayudar no se como realizarlo.

Modal Show para  visualizar los datos

Modal Edit  para hacer los cambios y actualizar

1
  • Agrega tu codigo donde recorres la tabla para rellenarla y te ayudo a obtener la mejor forma de que hagas sin sobrecargarlo tanto.
    – DoubleM
    el 20 nov. 2018 a las 4:44

2 respuestas 2

0

Te dare un par de opciones, en mi opinion unas mejores que otras.

Podrías utilizar el elemento this de cuando llamas al modal para hacer referencia al botón que lo abrió y de esta forma hacer referencia a su posición en la tabla, y luego moverte entre los hermano para sacar la información...

Yo por mi parte lo que hago es utilizar los atributos data, creo dentro del botón (o si se necesita la información en varios modales(varios botones requieren dicha información) entonces la coloco en un lugar mas genérico, quizás un span y le coloco un ID dinámico (para que sea único) el cual pasare por parámetro al modal) varios campos tipo dataset, como por ejemplo data-nombre, data-id, data-email, y coloco la información del back en ellos, ya dentro del modal hago referencia a esos campos con:

//Suponiendo que input_nombre es el input del nombre dentro del modal.
//Colocando los datos dentro del boton que llamara al modal, asi se acceder por this
input_nombre.value = this.dataset.nombre //algo asi.

//Colocando los datos en un lugar generico.
var usuario = document.getElementById(id);
input_nombre.value = usuario.dataset.nombre //algo asi.

Tambien podrías colocar span dentro de cada parte de la tabla y le creas id único pero con un numero (id del usuario por ejemplo) en común para que así puedas identificarlo, luego pasas dicho dígito por parámetro al modal y así puedes llamar a esos valores.

input_nombre.value = document.getElementById('nombre'+id).value//o innerHtml, lo que te funcione
input_correo.value = document.getElementById('correo'+id).value

Te coloco un enlace a mozilla en la que se habla un poco sobre los dataset. https://developer.mozilla.org/es/docs/Web/API/HTMLElement/dataset

0

Hola te puedo sugerir dos opciones. Solo aplican en el caso: Caso 1: -Si estas utilizando directamente blade.

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>


<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#user-id">Ver informacion</button>

<div id="user-id" class="modal fade bd-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">{{ $user->name }}</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        
        Nombre: {{  $user->name }}  
        <br>
        Apellidos: {{ $user->lastName }}     
        <br>
        ...

<br>
...
        
        </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
      </div>
      
      
    </div>
  </div>
</div>


<hr>



<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#user-id-2">Editar</button>

<div id="user-id-2" class="modal fade bd-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">New message</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <form>
          <div class="form-group">
            <label for="recipient-name" class="col-form-label">Nombre:</label>
            <input type="text" class="form-control" id="recipient-name" value="{{ user->name }}">
          </div>
         
         
         <div class="form-group">
            <label for="recipient-name" class="col-form-label">Nombre:</label>
            <input type="text" class="form-control" id="recipient-name" value="{{ user->lastname }}">
          </div>
          
          <br>
          ...
          <br>
          ...
        </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">
        Editar
        </button>
      </div>
      
    </div>
  </div>
</div>

La otra opción es hacer lo ajax pero es mas complicado.

Yo utilizo axios para hacer peticiones http con ajax.

axios.post(url, {
     id: usuerio id

}).then(res=>{
    _.foreach(res.data, function(key, value){
         Campo key: value // obviamente los tienes que asignar a los elementos 
              dentro de un modal
    })
})

Para editar seria lo mismo solo manda los campos actualizar y los procesas en el controlador.

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.