Laravel - Uncaught TypeError: Cannot read property 'style' of undefined

My Error image attached below enter image description here

I want to implement multiple filter in my view file of Laravel project. For above requirement i put a select list in my view file above the table area and after that i put some lines of code in my controller. after that i create a route for this in my web.php file. at last i put a script in my view file.

SeoKeywordController.php

<?php

namespace App\Http\Controllers\Admin;

use Illuminate\Http\Request;
use App\Http\Controllers\Controller;
use Brian2694\Toastr\Facades\Toastr;
use Illuminate\Support\Facades\Log;
use App\Seokeyword;
use App\Project;
use App\Link;
use Validator;

use DB;

class SeoKeywordController extends Controller
{
    public function index()
    {
        $seokey = Seokeyword::latest()->get();
        return view('admin.seokeyword.index',compact('seokey'));
    }
    public function getKeyword(Request $request)
    {
        if(request()->ajax())
         {
              if($request->keyword)
              {
               $data = DB::table('seokeywords')
                 ->select('seokeywords.id','seokeywords.keyword')
                 ->where('seokeywords.keyword', $request->keyword);
              }
              else
              {
               $data = DB::table('seokeywords')
                 // ->join('category', 'category.category_id', '=', 'product.category')
                 ->select('seokeywords.id', 'seokeywords.keyword');
              }
          return datatables()->of($data)->make(true);
         }

         $keyword = DB::table('seokeywords')
            ->select("*")
            ->get();
         return view('admin.seokeyword.index', compact('keyword'));

    }
}

index.blade.php {view file}

@section('content')
<div class="container-fluid">
            <!-- ============================================================== -->
            <!-- Start Page Content -->
            <!-- ============================================================== -->
            <div class="row">
                <div class="col-12">
                    <div class="card">
                        <div class="card-body">

                                <div class="button-group">

                                    <div class="row form-body">
                                        <div class="col-sm-6">
                                            <a type="button" class="btn waves-effect waves-light btn-primary" href="">Add New Keyword</a>
                                        </div>
                                        <div class="col-sm-6 form-group">
                                            <form>
                                            <select name="keyword" id="keyword" class="form-control">
                                                @foreach($seokey as $keyword)
                                                <option value=""></option>
                                                @endforeach
                                            </select>
                                            </form>
                                        </div>
                                    </div>

                                </div>

                                <div class="table-responsive">

                                    <table id="test" class="display nowrap table table-hover table-striped table-bordered" cellspacing="0" width="100%">
                                        <thead>
                                            <tr>
                                                <th>ID</th>
                                                <th>Project</th>
                                                <th>Web Url</th>
                                                <th>Seo Keyword</th>
                                                <th>Action</th>
                                            </tr>
                                        </thead>
                                        <tfoot>
                                            <tr>
                                                <th>ID</th>
                                                <th>Project</th>
                                                <th>Web Url</th>
                                                <th>Seo Keyword</th>
                                                <th>Action</th>
                                            </tr>
                                        </tfoot>
                                        <tbody>
                                            @foreach($seokey as $key=>$ke)
                                            <tr>
                                                <td></td>

                                                <td></td>
                                                <td><a class="btn btn-primary btn-sm" href="" target="_blank" title="">Click Here</a></td>
                                                <td><span title=""></span></td>
                                                <td>
                                                    <a href="" class="btn btn-info btn-m btn-circle">
                                                        <i class="ti-pencil"></i>
                                                    </a>
                                                    <button class="btn btn-danger btn-m btn-circle" type="button" onclick="deletePost()">
                                                        <i class="ti-trash"></i>
                                                    </button>
                                                    <form id="delete-form-" action="" method="POST" style="display: none;">
                                                        
                                                        
                                                    </form>

                                                </td>

                                            </tr>
                                            @endforeach
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                    </div>
                </div>
            </div>
        </div>

@endsection
@push('js')
<script>
$(document).ready(function(){

    fetch_data();

    function fetch_data(keyword = '')
     {
      $('#test').DataTable({
       processing: true,
       serverSide: true,
       ajax: {
        url:"",
        data: {keyword:keyword},
        type: 'GET'
       },
       columns:[
            {
                data: 'id',
                name: 'id'
            },
            {
                data: 'project_id',
                name: 'project_id'
            },
            {
                data: 'link_id',
                name: 'link_id'
            },
            {
                data: 'keyword',
                name: 'keyword'
            },
            {
                data: 'created_at',
                name: 'created_at'
            },
            {
                data: 'updated_at',
                name: 'updated_at'
            }

        ]
      });
    }

     $('#keyword').change(function(){
          var id = $('#keyword').val();

          $('#test').DataTable().destroy();

          fetch_data(id);
     });

});
</script>
@endpush

if anyone have any solution or some suggestion then please comment. and also if you have better option to implement filter in laravel project then suggest me the link. Thanks

from Newest questions tagged laravel-5 - Stack Overflow https://ift.tt/3exivGJ
via IFTTT