Hi greetings I try to perform all the functions of the action buttons to finish my crud, what happens is that I want to make them in modal windows someone can help me I do not know how to do it.
Hi greetings I try to perform all the functions of the action buttons to finish my crud, what happens is that I want to make them in modal windows someone can help me I do not know how to do it.
I'll give you a couple of options, in my opinion some better than others.
You could use the this element from when you call the modal to refer to the button that opened it and in this way refer to its position in the table, and then move between the brothers to get the information ...
For my part, what I do is use the data attributes, I create inside the button (or if the information is needed in several manners (several buttons require this information) then I put it in a more generic place, maybe a span and I put a dynamic ID (to be unique) which will pass by parameter to the modal) several dataset type fields, such as data-name, data-id, data-email, and place the information of the back in them, already inside of the modal I refer to those fields with:
//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.
You could also place span within each part of the table and you think it is unique but with a number (user id for example) in common so that you can identify it, then you pass that digit by parameter to the modal and you can call it to those values.
input_nombre.value = document.getElementById('nombre'+id).value//o innerHtml, lo que te funcione
input_correo.value = document.getElementById('correo'+id).value
I put a link to mozilla where we talk a bit about the dataset. link
Hi, I can suggest two options. Only apply in the case: Case 1: -If you are using blade directly.
<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">×</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">×</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>The other option is to do the ajax but it is more complicated.
I use axios to make http requests with 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
})
})
To edit it would be the same, just send the update fields and the processes in the controller.