DataTables warning: table id=example1 - Ajax error

tontonodilon

Laravel 8:
Error: DataTables warning: table id=example1 - Ajax error:
Description of problem: Hi,
I use laravel 8.
I have a mysql table : orders
I have a route in my web.php
Route::resource(name:'orders',controller:\App\Http\Controllers\OrdersController::class);
here is my controller :
use Illuminate\Http\Request;
use App\Models\Orders;

class OrdersController extends Controller
{

    public function index()
    {

        $orders = Orders::all();
        return view('orders.index', compact('orders'));

    }

Here is my Orders class :
namespace App\Models;

use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;

class Orders extends Model
{
    use HasFactory;
    protected $fillable = [
        'site', 'number', 'amount', 'mail', 
        'first_name', 'last_name', 'address',
        'user_updated_id',

    ];
}

In my app.blade.php I put the Javascript and CSS like this :
<title>{{ config('app.name', 'Laravel') }}</title>

        <!-- HTML tables datatables.net  -->
        <script type="text/javascript" src="https://code.jquery.com/jquery-3.5.1.js"></script>
        <script type="text/javascript" src="https://cdn.datatables.net/v/dt/dt-1.10.25/datatables.min.js"></script>
        <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/dt/dt-1.10.25/datatables.min.css"/>
        <style>
            td.details-control {
                background: url('/images/details_open.png') no-repeat center center;
                cursor: pointer;
            }
            tr.shown td.details-control {
                background: url('/images/details_close.png') no-repeat center center;
            }
        </style> 

In my index.blade.php I put the html code and javascript like this :

	Site	Number	Amount	Mail
	Site	Number	Amount	Mail

</x-app-layout>
<script>
console.log('00');


/* Formatting function for row details - modify as you need */
function format ( d ) {
    console.log('11');
    // `d` is the original data object for the row
    return '<table cellpadding="5" cellspacing="0" border="0" style="padding-left:50px;">'+
        '<tr>'+
            '<td>First Name:</td>'+
            '<td>'+d.first_name+'</td>'+
        '</tr>'+
        '<tr>'+
            '<td>Last Name:</td>'+
            '<td>'+d.last_name+'</td>'+
        '</tr>'+
        '<tr>'+
            '<td>Address:</td>'+
            '<td>'+d.address+'</td>'+
        '</tr>'+
    '</table>';
}
$(document).ready(function() {

    var table = $('#example1').DataTable( {
        "ajax": "../ajax/data/ordersObjects.txt",
        "columns": [
            {
                "className":      'details-control',
                "orderable":      false,
                "data":           null,
                "defaultContent": ''
            },
            { "data": "site" },
            { "data": "number" },
            { "data": "amount" },
            { "data": "mail" }
        ],
        "order": [[1, 'asc']]
    } );            



    // Add event listener for opening and closing details
    $('#example1 tbody').on('click', 'td.details-control', function () {
        var tr = $(this).closest('tr');
        var row = table.row( tr );

        if ( row.child.isShown() ) {
            // This row is already open - close it
            row.child.hide();
            tr.removeClass('shown');
        }
        else {
            // Open this row
            row.child( format(row.data()) ).show();
            tr.addClass('shown');
        }
    } );

    $.fn.dataTable.ext.errMode = 'throw';
} );

</script>

And I have a empty file : ordersObjects.txt into the [myWebSite/ajax/data/ordersObjects.txt]
And I have a empty file : ordersObjects.txt into the [myWebSite/ajax/data/ordersObjects.txt]

On the Chrome's developer console I have a this message :

GET http://myWebSite:82/ajax/data/ordersObjects.txt?_=1627054814614 404 (Not Found)
Uncaught Error: DataTables warning: table id=example1 - Ajax error. For more information about this error, please see http://datatables.net/tn/7

Where I make the mistake ?
There is surely something that I did not understand!
I missing something
Do you have an idea?
You can help me ?

Thanks

kthorngren

The 404 Not Found error means your server could not find the path in the URL. You will need to look at your web server logs and configuration to determine why it can find the path to ajax/datat/ordersObjects.txt.

Kevin

tontonodilon

Thanks Kevin,
you are right, my path (to ordersOjects.txt) was wrong.