title: X-Editable table in laravel using blade
body: <p>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.</p>
  
  <p>Anyway, I am having a lot of trubbles. </p>
  
  <p>I have this database in mysql:</p>
  
  <p><a href="https://i.stack.imgur.com/LSYN7.png" rel="nofollow noreferrer">MySql database</a></p>
  
  <p><strong>Route</strong> 
  I am doing this in the web.php file that is in the file routes</p>
  
  <pre><code>Route::resource('/test','PruebaController');
  Route::get('/test', 'PruebaController@index')-&gt;name('test');
  Route::post('test/updatetest','PruebaController@updatetest')-&gt;name('updatetest');
  </code></pre>
  
  <p><strong>Controller</strong></p>
  
  <pre><code>public function index(Request $request)
  {
      if ($request){
          $test=DB::table('pruebas')
          -&gt;orderBy('nombre','asc')
          -&gt;get();
  
          $test_model = new Prueba();
          $fillable_columns = $test_model-&gt;getFillable();
          foreach ($fillable_columns as $key =&gt; $value) 
          {
              $test_columns[$value] = $value;
          }
  
          return view('test.index')
          -&gt;with('test', $test)
          -&gt;with('test_columns', $test_columns);
      }
  }
  
  public function updatetest(Request $request, $id)
  {
      try 
      {
          $id =$request-&gt;input('pk');
          $field = $request-&gt;input('name');
          $value =$request-&gt;input('value');
  
  
          $test = Prueba::findOrFail($id);
          $test-&gt;{$field} = $value;
          $test-&gt;save();
      }
      catch (Exception $e)
      {
          return response($e-&gt;intl_get_error_message(), 400);
      }
      return response('',200);
  
  }
  </code></pre>
  
  <p><strong>View</strong></p>
  
  <pre><code>@extends ('layouts.admin')
  @section ('contenido')
  
  
  &lt;div class="panel-heading"&gt;
      &lt;h4&gt;
          Listado de nombres
      &lt;/h4&gt;
      @if (count($errors)&gt;0)
          &lt;div class="alert alert-danger"&gt;
              &lt;ul&gt;
                  @foreach ($errors-&gt;all() as $error)
                      &lt;li&gt;{{$error}}&lt;/li&gt;
                  @endforeach
              &lt;/ul&gt;
          &lt;/div&gt;
      @endif
  &lt;/div&gt;
  
  &lt;div class="panel-body"&gt;
      &lt;form action="{{route('updatetest')}}" method="post"&gt;
      {{csrf_field()}}
          &lt;table class="table table-hover nowrap" id="example" width="100%"&gt;
              &lt;thead class="thead-default"&gt;
                  &lt;tr&gt;
                      &lt;th&gt;ID&lt;/th&gt;
                      &lt;th&gt;Nombre&lt;/th&gt;
                      &lt;th&gt;Cédula&lt;/th&gt;
                      &lt;th&gt;Edad&lt;/th&gt;
                  &lt;/tr&gt;
              &lt;/thead&gt;
              @foreach ($test as $t)
              &lt;tbody&gt;
                  &lt;tr&gt;
                      &lt;td&gt;{{$t-&gt;id}}&lt;/td&gt;
                      &lt;td&gt;
                          &lt;a 
                          href="#" 
                          class="nombre" 
                          data-type="text"
                          data-pk="{{$t-&gt;id}}"
                          data-value="{{$t-&gt;nombre}}" 
                          data-title="Cambie el nombre"
                          data-url="{{route('updatetest') }}"&gt;
                              {{$t-&gt;nombre}}
                          &lt;/a&gt;
                      &lt;/td&gt;
                      &lt;td&gt;
                          &lt;a 
                          href="#" 
                          class="cedula" 
                          data-type="number"
                          data-pk="{{$t-&gt;id}}"
                          data-value="{{$t-&gt;cedula}}" 
                          data-title="Cambie la cedula"
                          data-url="{{route('updatetest') }}"&gt;
                              {{$t-&gt;cedula}}
                          &lt;/a&gt;
                      &lt;/td&gt;
                      &lt;td&gt;
                          &lt;a 
                          href="#" 
                          class="edad" 
                          data-type="number"
                          data-pk="{{$t-&gt;id}}"
                          data-value="{{$t-&gt;edad}}" 
                          data-title="Cambie la edad"
                          data-url="{{route('updatetest') }}"&gt;
                              {{$t-&gt;edad}}
                          &lt;/a&gt;
                      &lt;/td&gt;                   
                  &lt;/tr&gt;    
              &lt;/tbody&gt;
              @endforeach
          &lt;/table&gt;
      &lt;/form&gt;
  &lt;/div&gt;
  @endsection
  </code></pre>
  
  <p><strong>AJAX script</strong></p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
  $(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';
          }
        }
      });
  
  });
  &lt;/script&gt;
  </code></pre>
  
  <p>The problem is that the x-editable is not working, when I click on the field nothing happens. Any idea why is that?</p>
  
  <p>I would really appreciate your help. </p>