Search code examples
ajaxlaraveldatatablesyajra-datatable

How to fix laravel 404 NotFoundHttpException Error?


I am using this laravel package called yajra datables to create a data table for my app. But I am getting this error whenever I reload the page. After a few reloads the table gets loaded. However, page keeps throwing me ajax errors every time I use the search option.

error

I have searched the internet for every possible solution, but none of them seemed to work.

Below is my code:

Index.blade

<script>
    $(document).ready(function(){
    $('#jobsTable').DataTable({
        processing: true,
        serverSide: true,
        ajax: "{{ route('activity.index') }}",
        dom: "B" + /* Buttons */
        "<'row'<'col-sm-12 col-md-6'l>" + /* Length changing input control */
            "<'col-sm-12 col-md-6'f>>" + /* Filtering Input */
                "<'row'<'col-sm-12'tr>>" + /* The Table! + Processing Display Element*/
                    "<'row'<'col-sm-12 col-md-5'i>" + /* Table Information Summary */
                        "<'col-sm-12 col-md-7'p>>" , /* Pagination Control*/
        columns:[
            /* 1 */ {data: 'id' , name: 'id', visible: false },
            /* 0 */ {data: 'action', name: 'action', orderable: false, searchable: false },
            /* 1 */ {data: 'job_id' , name: 'job_id' },
            /* 2 */ {data: 'type' , name: 'type' },
            /* 3 */ {data: 'job_no' , name: 'job_no' },
            /* 4 */ {data: 'deal_no' , name: 'deal_no' },
            /* 5 */ {data: 'cyc_no' , name: 'cyc_no' },
            /* 6 */ {data: 'deal_name' , name: 'deal_name' },

Controller

public function index()
    {
        if (request()->ajax()) {

            $jobs = Job::all();

            return DataTables::of($jobs)
                ->addColumn('action', function ($jobs) {
                    $button = '<div class="btn-group btn-group-xs">';
                    $button .= '<a href="/activity/' . $jobs->id . '/edit" class="btn btn-primary btn-xs"><i class="fa fa-edit fa-fw"></i>&nbsp;Edit</a>';
                    $button .= '<button type="button" name="deleteButton" id="' . $jobs->id . '" data-jobcycid="' . $jobs->job_no . ' | ' . $jobs->cyc_no . '" class="btn btn-danger btn-xs deleteButton"><i class="fas fa-trash-alt"></i>&nbsp;Delete</button>';
                    $button .= '</div>';
                    return $button;
                })
                ->rawColumns(['action'])

                ->setRowID(function ($jobs) {
                    return $jobs->id;
                })
                ->make(true);
        }

        return view('activity.index');
    }

Routes

Route::group(['middleware' => ['auth.roles']], function () {

    /*Side bar menu Routes*/
    Route::get('/home', 'HomeController@index')->name('home');
    Route::get('/dashboard', 'HomeController@dashb')->name('dashboard');
    Route::get('/profile', 'HomeController@profile')->name('profile');

    /*Activity Routes*/
    Route::resource('/activity', 'JobController');
    // Route::get('/activity', 'JobController@getIndex')->name('activity.index');

    /*Activity Sub Routes*/
    Route::get('/jobEditCancel', 'JobController@jobEditCancel')->name('jobEditCancel');
    Route::get('/jobAddCancel', 'JobController@jobAddCancel')->name('jobAddCancel');



    // Route::get('/activity', 'JobController@index')->name('activity.index');
    // Route::delete('/activity/destroy/{id}', 'JobController@destroy')->name('activity.destroy');

    /*FPBlog Routes*/
    Route::resource('fpblog', 'PostController');
    Route::get('/postEditCancel', 'PostController@postEditCancel')->name('postEditCancel');
    Route::get('/blogManager', 'PostController@blogManager')->name('blogManager');
});

Solution

  • Thank you each and every one of you who have tried your best to support me to solve this problem. However, after so many searches for the answer, I have figured it it out.

    Apparently my URI is far too long. I was able to understand this after moving my development environment to laravel Homestead.

    I have followed the steps on this blog to shorten the url. And it solved all the issues:

    DataTables and Long URL

    Once again thank you very much for anyone who has provided their opinion. I hope this post will be useful to someone who is trying to create data tables which have high column counts.