X-Editable table in laravel using blade - php

Question

I am new in the web programming subject. I am doing a project using laravel and Blade for the views, and I want to create an X-editable table for one of my databases so the user doesn't need to enter to a different view to edit the data.
Anyway, I am having a lot of trubbles.
I have this database in mysql:
MySql database
Route
I am doing this in the web.php file that is in the file routes
Route::resource('/test','PruebaController');
Route::get('/test', 'PruebaController#index')->name('test');
Route::post('test/updatetest','PruebaController#updatetest')->name('updatetest');
Controller
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);
}
View
#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
<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>
The problem is that the x-editable is not working, when I click on the field nothing happens. Any idea why is that?
I would really appreciate your help.

Answer 1

Change
<form action="{{route('test/updatetest')}}" method="post">
To
<form action="{{route('updatetest')}}" method="post">
The route function generates a URL for the given named route:
$url = route('routeName');
You can read more about it here