javascript - Laravel - 使用 javascript 将用户 ID 传递给模态

Question

如何将用户 ID 传递给模态？现在它只是写 id，但我如何将它传递给模态？如何使其转换为模态中的用户 ID？目前它正在传递管理员 ID。我被卡住了，我知道它必须用 javascript/jquery 做一些事情，但不幸的是我不知道该怎么做以及如何去做。请帮忙。谢谢你。

看法

<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', '.bck-mod', function(){
        var id = $(this).data('id');
            $.ajax({
                url:"{{route('live_search.destroy')}}",
                method:"POST",
                data:{id:id},
                success:function(data)
                {
                    alert(data);
                    $('#users').DataTable().ajax.reload();
                }
            })
    });
    });


</script>

控制器

public function destroy(Request $reqeust, $id){
        return $id;
        $user = Auth::user();
        if($reqeust){
        if ($user->IsAdmin()){
            if($user->delete()){
                return view('pages.index'); 
            }
        }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" id="rowId" 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);
    }
}

标签： javascriptphpjquerylaravelmodal-dialog

Answer 1

所以我会在你的情况下做的是，而不是data-id属性，你可以delete为每个用户生成 url。

例如：

data-url="' . action('PagesController@destroy', ['id' => $row->id]) . '"

然后在您的视图中，删除表单的操作。在您的 JS 中单击操作执行以下操作：

var url = $(this).data('url');
$("#deleteModal form").attr('action', url);
$("#deleteModal").modal("show");

希望这会有所帮助。