laravel send data from a table to a modal window

Question

laravel send data from a table to a modal window

Navigation

#1 by (2 votes)

0

I am using Laravel 5.4 with a database in MariaDB , and for the frontend I use the Materialize.css framework and now as well says the title, I have a table with user records. And the table is filled with the following laravel code.

<table class="bordered highlight table-responsive">
    <thead>
        <tr class="table-users">
            <th>ID</th>
            <th>Tipo de Usuario</th>
            <th>Primer Nombre</th>
            <th>Primer Apellido</th>
            <th>UserName</th>
            <th>Editar</th>
        </tr>
    </thead>
    <tbody>
        @foreach($permisions as $permision)
            <tr>
                <td>{{ $permision->user->id }}</td>
                <td>{{ $permision->user->userType->name }}</td>
                <td>{{ $permision->user->f_name }}</td>
                <td>{{ $permision->user->f_lastname }}</td>
                <td>{{ $permision->user->username }}</td>
                <td><a href="#updateUser" class="btn-floating btn-small waves-effect waves-light blue"><i class="material-icons">mode_edit</i></a></td>
            </tr>
        @endforeach
   </tbody></table>

So fill it up like this

Now on the edit button, I call a materialize modal and then I have my html structure. Note: I put a part of two input, I want that from those two inputs according to the information I send them to the modal.

@foreach($permisions as $permision)
<div class="row">
    <div class="input-field col s12 m6">
        <i class="material-icons prefix">account_circle</i>
        <input value="{{ $permision->user->f_name }}" title="Solo puede ingresar letras en este campo." id="Primer nombre" type="text" class="validate" required>
        <label for="Primer nombre">Primer nombre:</label>
    </div>

    <div class="input-field col s10 m6 push-s1">
        <input value="{{ $permision->user->s_name }}" title="Solo puede ingresar letras en este campo." id="Segundo nombre" type="text" class="validate" required>
        <label for="Segundo nombre">Segundo nombre:</label>
    </div>
</div>@endforeach

So what happens with this, I try to send the data, which if it does, but there is a problem as you already know or have noticed, repeat all the data I have in my table, and put each user, which one shows them to me like this:

As you see, it repeats all the data, obviously I know that it is done by the @foreach de laravel, if someone can help me so that it only grabs me according to the row where I clicked to edit the user. If I give the button of the first row, in this case the modal should send me only the first name: Oscat and second name: Ernesto, and so it depends on which row the edit button is clicked on. Beforehand thank you very much. Or also if they have another way of doing it with Javascript because it is also welcome. Thanks for reading

laravel materialize

asked by Samuel Mena 22.05.2017 в 23:47

source

1 answer

How to search by date in a timestamp Show Hidden Element when checking a Checkbox

score 2 · Accepted Answer

Well, the problem is that you are doing foreach within the modal and this makes it go through all the records, the solution would be the following.

<table class="bordered highlight table-responsive">
    <thead>
        <tr class="table-users">
            <th>ID</th>
            <th>Tipo de Usuario</th>
            <th>Primer Nombre</th>
            <th>Primer Apellido</th>
            <th>UserName</th>
            <th>Editar</th>
        </tr>
    </thead>
    <tbody>
        @foreach($permisions as $permision)
        <tr>
            <td>{{ $permision->user->id }}</td>
            <td>{{ $permision->user->userType->name }}</td>
            <td>{{ $permision->user->f_name }}</td>
            <td>{{ $permision->user->f_lastname }}</td>
            <td>{{ $permision->user->username }}</td>
            <td><a href="#updateUser{{ $permision->user->id }}" class="btn-floating btn-small waves-effect waves-light blue"><i class="material-icons">mode_edit</i></a></td>
        </tr>
        <div id="#updateUser{{ $permision->user->id }}" class="modal">
            <div class="modal-content">
                <div class="row">
                    <div class="input-field col s12 m6">
                        <i class="material-icons prefix">account_circle</i>
                        <input value="{{ $permision->user->f_name }}" title="Solo puede ingresar letras en este campo." id="Primer nombre" type="text" class="validate" required>
                        <label for="Primer nombre">Primer nombre:</label>
                    </div>

                    <div class="input-field col s10 m6 push-s1">
                        <input value="{{ $permision->user->s_name }}" title="Solo puede ingresar letras en este campo." id="Segundo nombre" type="text" class="validate" required>
                        <label for="Segundo nombre">Segundo nombre:</label>
                    </div>
                </div>
            </div>
        </div>
        @endforeach
    </tbody>
</table>

We put the modal within the foreach of the table, that is, it will go through all the registers and when activating a modal window we will call it by the href="#updateUser{{ $permision->user->id }}" , which coincides.

Now it's a bad practice to put a modal window that way, you can create a new file update-modal.blade.php , and call this file.

Within update-modal.blade.php :

    <div id="#updateUser{{ $permision->user->id }}" class="modal">
        <div class="modal-content">
            <div class="row">
                <div class="input-field col s12 m6">
                    <i class="material-icons prefix">account_circle</i>
                    <input value="{{ $permision->user->f_name }}" title="Solo puede ingresar letras en este campo." id="Primer nombre" type="text" class="validate" required>
                    <label for="Primer nombre">Primer nombre:</label>
                </div>

                <div class="input-field col s10 m6 push-s1">
                    <input value="{{ $permision->user->s_name }}" title="Solo puede ingresar letras en este campo." id="Segundo nombre" type="text" class="validate" required>
                    <label for="Segundo nombre">Segundo nombre:</label>
                </div>
            </div>
        </div>
    </div>

Y en tu archivo actual.

<table class="bordered highlight table-responsive">
    <thead>
        <tr class="table-users">
            <th>ID</th>
            <th>Tipo de Usuario</th>
            <th>Primer Nombre</th>
            <th>Primer Apellido</th>
            <th>UserName</th>
            <th>Editar</th>
        </tr>
    </thead>
    <tbody>
        @foreach($permisions as $permision)
        <tr>
            <td>{{ $permision->user->id }}</td>
            <td>{{ $permision->user->userType->name }}</td>
            <td>{{ $permision->user->f_name }}</td>
            <td>{{ $permision->user->f_lastname }}</td>
            <td>{{ $permision->user->username }}</td>
            <td><a href="#updateUser{{ $permision->user->id }}" class="btn-floating btn-small waves-effect waves-light blue"><i class="material-icons">mode_edit</i></a></td>
        </tr>
        @include('carpeta.update-modal') 
        @endforeach
    </tbody>
</table>

I would practically do the same, but it looks better ordered.