How do I pass users id to the modal?

Question

How do I pass users ID to the modal? It is fetching id to the (x) button, but when the modal opens, it still uses admins ID. How do I make it that it converts to users id in modal? I got stuck, I know it has to do something with jquery but unfortunately I don't know how and what. Thank you.

view

    <div class="modal fade" id="deleteModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">

                </div>
                <div class="modal-body">
                    <h2>{{ $modal }}</h2>
                </div>
                <div class="modal-footer">
                    <button type="button" class="rem-mod btn btn-secondary" data-dismiss="modal">Zatvori</button>
                    {{ Form::open(['action'=> ['PagesController@destroy', Auth::user()->id],'method' => 'POST']) }}
                    {{ Form::submit('Obrišite račun', ['class' => 'bck-mod btn btn-danger']) }}    
                    {{ Form::hidden('_method', 'DELETE') }}
                    {{ Form::close() }}
                </div>
            </div>
        </div>
    </div>
    <div class="container">
        <div class="panel panel-default">
        <div class="panel-heading">Pretraži korisnike</div>
            <div class="panel-body">
                <div class="form-group">
                    <input type="text" name="search" id="search" class="form-control" placeholder="Pretraži korisnike" />
                </div>
                <div class="table-responsive">
                    <h3 align="center">Broj korisnika: <span id="total_records"></span></h3>
                    <table id="users" class="table table-striped table-bordered">
                        <thead>
                            <tr>
                                <th>Prezime</th>
                                <th>Ime</th>
                                <th>Telefon</th>
                                <th></th>
                            </tr>
                        </thead>
                    <tbody>

                    </tbody>
                    </table>
                </div>
            </div>    
        </div>
    </div>


<script>

    $(document).ready(function(){

        fetch_user_data();

        function fetch_user_data(query = ''){
            $.ajax({
                url:"{{ route('live_search.action') }}",
                method:'GET',
                data:{query:query},
                dataType:'json',
                success:function(data)
                {
                    $('tbody').html(data.table_data);
                    $('#total_records').text(data.total_data);
                }
            })
        }
        // 
        $(document).on('keyup', '#search', function(){
            var query = $(this).val();
            fetch_user_data(query);
        });

        $('#users').on('click', '.remove-button', function(){
            var id=$(this).data('id');
            $("#deleteModal").modal("show");
            console.log(id);
        });
        $(document).on('click', '.rem-mod', function(){
        var id = $(this).data('id');
        {
            $.ajax({
                url:"{{route('live_search.destroy')}}",
                method:"delete",
                data:{query:query},
                success:function(data)
                {
                    alert(data);
                    $('#users').DataTable().ajax.reload();
                }
            })
        }
    }); 
    });


</script>

Controller

public function destroy($id){
        return $id;
        $user = Auth::user();

        if ($user->IsAdmin()){
            if($users->delete($id)){
                return redirect()->back(); 
            }
        }else{

        if ($user->delete()) {
            Auth::logout();
            $data = array(
                'title' => 'Dobrodošli,',
                'title2' => 'da biste nastavili, ulogirajte se!',

            );
            return view('pages.index')->with($data);
        }
        }
    }

    public function action(Request $request)
    {

        if($request->ajax()){
            $output = '';
            $query = $request->get('query');
            if($query != ''){
                $data = DB::table('users')
                    ->where('surname', 'like', '%'.$query.'%')
                    ->orWhere('name', 'like', '%'.$query.'%')
                    ->orWhere('phone', 'like', '%'.$query.'%')
                    ->orderBy('id')
                    ->get();
            }else {
                $data = DB::table('users')
                    ->orderBy('id')
                    ->get();
            }
            $total_row = $data->count();
            if($total_row > 0){
                foreach($data as $row){
                    $output .= '
                        <tr>
                            <td>'.$row->surname.'</td>
                            <td>'.$row->name.'</td>
                            <td>'.$row->phone.'</td>
                            <td><button type="button" class="remove-button btn btn-danger" data-id="'.$row->id.'">
                            <div class="close">&#120;</div>
                            </button></td>
                        </tr>
                    ';
                }
            }else{
                $output = '
                    <tr>
                        <td align="center" colspan="5">Nema podataka</td>
                    </tr>
                ';
            }
            $data = array(
                'table_data'  => $output,
                'total_data'  => $total_row,
            );

            echo json_encode($data);
        }
    }

EDIT - Figured out where the problem is. First it is not pulling users id from the database, and secondly it is not pushing that id to the modal. Here is my github in case you wanted to have the wider picture - https://github.com/sucoms/multiauthzadatak

Answer 1

It's because you have the same ID on the modal every time you open it. IDs should be unique.

Try:

<div class="modal fade" id="deleteModal{{$id}}" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">

This will be unique for each ID as you open the modal. You will need to change the code where you open the modal also to reflect this.

Edit: See unique IDs in HTML docs https://www.w3.org/TR/html401/struct/global.html#h-7.5.2

The reason it isn't currently working for you is because you are referencing the same ID every time you open a modal. If you use a Laravel variable in the ID of the modal, ie {{ $id }} , each time the modal opens it will be specific for that ID.

Answer 2

You can fix this by setting ID on modal when you click remove:

    $('#users').on('click', '.remove-button', function(){
        var id=$(this).data('id');
        $("#deleteModal").data('id', id).modal("show");
        console.log(id);
    });
    $(document).on('click', '.rem-mod', function(){
        var id = $(this).closest('.modal').data('id');
        {
            $.ajax({
                url:"{{route('live_search.destroy')}}",
                method:"delete",
                data:{id:id},
                success:function(data)
                {
                    alert(data);
                    $('#users').DataTable().ajax.reload();
                }
            })
        }
    });