x editable 在 2023 年在 laravel 中工作吗？

Question

有人知道 xeditable 是否有效？我一直在尝试官方文档，但我无法获得编辑单元格的小窗口，单元格中的单词只会变蓝但不可编辑：c HEEEEEEEEEEEEELP

@extends('adminlte::page')

@section('title', 'Productores')

@section('css')
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.2/css/bootstrap.css">
    <link rel="stylesheet" href="https://cdn.datatables.net/1.13.4/css/dataTables.bootstrap4.min.css">
    <link rel="stylesheet" href="https://cdn.datatables.net/responsive/2.4.1/css/responsive.bootstrap4.min.css">

    <link href="//cdnjs.cloudflare.com/ajax/libs/x-editable/1.5.0/bootstrap3-editable/css/bootstrap-editable.css" rel="stylesheet"/>
@endsection

@section('content')

    <h1>Listado Productores</h1>
        <div class="card">
            <div class="card-body">
                <table class="table table-striped" id="productores"> 
                    <thead> 
                        <tr> 
                            <th>IDProductor</th> 
                            <th>Nombre</th> 
                            <th>RazónSocial</th> 
                            <th>Estado</th> 
                            <th>Telefono</th> 
                            <th>Correo</th> 
                            <th>Notificaciones</th> 
                            <th>Especie</th> 
                            <th>Cooler</th> 
                            <th>Ciudad</th> 
                            <th colspan="2"></th> 
                        </tr> 
                    </thead> 

                    <tbody> 

                        @foreach ($productores as $productor) 
                            <tr>
                                <td>{{$productor->IDProductor}}</td> 
                                <td>{{$productor->Nombre}}</td> 
                                <td>{{$productor->RazónSocial}}</td> 
                                <td>{{$productor->Estado}}</td> 
                                <td>{{$productor->Telefono}}</td> 
                                <td>{{$productor->Correo}}</td> 
                                <td>{{$productor->Notificaciones}}</td> 
                                <td>{{$productor->Especie}}</td> 
                                <td>{{$productor->Cooler}}</td> 
                                <td>
                                    <a href="#" class="ciudad" data-type="text" data-pk="{{ $productor->IDProductor }}" data-url="/post" data-title="Ingresa la ciudad" data-name="Ciudad">{{$productor->Ciudad}}</a>
                                    <script>
                                        $(function() {
                                            $('.ciudad').editable('enable');
                                            $('.ciudad').editable('activate');
                                            $('.ciudad').editable({
                                                url: '',
                                                pk: 1,
                                                title: 'Ingresa Ciudad',
                                                type: 'text',
                                                success: function(response, newValue) {
                                                    ModeloCatProd.set('Ciudad', newValue); //update backbone model
                                                params: function(params) {
                                                    params._token = '{{ csrf_token() }}';
                                                    return params;
                                                },
                                                ajaxOptions: {
                                                    type: 'put'
                                                }
                                            });
                                        });
                                        $.fn.editable.defaults.mode = 'inline';
                                        $.fn.editableform.buttons;

                                    </script>
                                </td> 
                            </tr> 
                        @endforeach 
                    </tbody> 
                </table>
            </div>
        </div>
@endsection

@section('js')
    <script src="https://cdn.datatables.net/1.13.4/js/jquery.dataTables.min.js"></script>
    <script src="https://cdn.datatables.net/1.13.4/js/dataTables.bootstrap4.min.js"></script>
    <script src="https://cdn.datatables.net/responsive/2.4.1/js/dataTables.responsive.min.js"></script>
    <script src="https://cdn.datatables.net/responsive/2.4.1/js/responsive.bootstrap4.min.js"></script>

    
    <script src="//cdnjs.cloudflare.com/ajax/libs/jquery-mockjax/1.6.2/jquery.mockjax.js"></script>

    <script>
        $('#productores').DataTable({
            responsive:true,
            autoWidth:false
        });  
    </script>
@endsection