X-Editable стол в ларавелле с использованием лезвия

Я новичок в теме веб-программирования. Я делаю проект, используя laravel и Blade для представлений, и я хочу создать X-редактируемую таблицу для одной из моих баз данных, чтобы пользователю не нужно было входить в другое представление для редактирования данных.

Во всяком случае, у меня много трюков.

У меня есть эта база данных в MySQL:

База данных MySql

маршрут
Я делаю это в файле web.php, который находится в файле маршрутов

Route::resource('/test','PruebaController');
Route::get('/test', 'PruebaController@index')->name('test');
Route::post('test/updatetest','PruebaController@updatetest')->name('updatetest');

контроллер

public function index(Request $request)
{
if ($request){
$test=DB::table('pruebas')
->orderBy('nombre','asc')
->get();

$test_model = new Prueba();
$fillable_columns = $test_model->getFillable();
foreach ($fillable_columns as $key => $value)
{
$test_columns[$value] = $value;
}

return view('test.index')
->with('test', $test)
->with('test_columns', $test_columns);
}
}

public function updatetest(Request $request, $id)
{
try
{
$id =$request->input('pk');
$field = $request->input('name');
$value =$request->input('value');$test = Prueba::findOrFail($id);
$test->{$field} = $value;
$test->save();
}
catch (Exception $e)
{
return response($e->intl_get_error_message(), 400);
}
return response('',200);

}

Посмотреть

@extends ('layouts.admin')
@section ('contenido')<div class="panel-heading">
<h4>
Listado de nombres
</h4>
@if (count($errors)>0)
<div class="alert alert-danger">
<ul>
@foreach ($errors->all() as $error)
<li>{{$error}}</li>
@endforeach
</ul>
</div>
@endif
</div>

<div class="panel-body">
<form action="{{route('updatetest')}}" method="post">
{{csrf_field()}}
<table class="table table-hover nowrap" id="example" width="100%">
<thead class="thead-default">
<tr>
<th>ID</th>
<th>Nombre</th>
<th>Cédula</th>
<th>Edad</th>
</tr>
</thead>
@foreach ($test as $t)
<tbody>
<tr>
<td>{{$t->id}}</td>
<td>
<a
href="#"class="nombre"data-type="text"data-pk="{{$t->id}}"data-value="{{$t->nombre}}"data-title="Cambie el nombre"data-url="{{route('updatetest') }}">
{{$t->nombre}}
</a>
</td>
<td>
<a
href="#"class="cedula"data-type="number"data-pk="{{$t->id}}"data-value="{{$t->cedula}}"data-title="Cambie la cedula"data-url="{{route('updatetest') }}">
{{$t->cedula}}
</a>
</td>
<td>
<a
href="#"class="edad"data-type="number"data-pk="{{$t->id}}"data-value="{{$t->edad}}"data-title="Cambie la edad"data-url="{{route('updatetest') }}">
{{$t->edad}}
</a>
</td>
</tr>
</tbody>
@endforeach
</table>
</form>
</div>
@endsection

AJAX скрипт

<script type="text/javascript">
$(document).ready(function() {
//toggle `popup` / `inline` mode
$.fn.editable.defaults.mode = 'inline';
$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
}
});

id = $(this).data('pk');
url = $(this).data('url');

//make username editable
$('.nombre').editable({
url: url,
pk: id,
type:"text",
validate:function(value){
if($.trim(value) === '')
{
return 'This field is required';
}
}
});$('.cedula').editable({
url: url,
pk: id,
type:"number",
validate:function(value){
if($.trim(value) === '')
{
return 'This field is required';
}
}
});

$('.edad').editable({
url: url,
pk: id,
type:"number",
validate:function(value){
if($.trim(value) === '')
{
return 'This field is required';
}
}
});

});
</script>

Проблема в том, что x-editable не работает, когда я нажимаю на поле, ничего не происходит. Любая идея, почему это?

Буду очень признателен за вашу помощь.