Passing Id to be used in controller via datatables ajax property

Question

Im trying to get products variants using the product's id in the controller and displaying them using datatables server side processing as follows

      $("#productVariants").DataTable({
    responsive: true,
    lengthChange: false,
    autoWidth: false,
    dom: "Bfrtip",
    buttons: ["pageLength", "copy", "csv", "excel", "pdf", "print"],
    processing: true,
    serverSide: true,
    ajax: {
        url: "/shop/product/variants/",
        type: "GET",
        'data': {
            id: $("#productVariants").attr("rel"),
        },
    },
    columns: [
        { data: "description", name: "description" },
        { data: "cost", name: "cost" },
        { data: "status", name: "status" },
        { data: "id",
            render: function(data, type, row) {
                return (
                    '<div class="dropdown dropdown-action">' +
                    '<a href="#" class="action-icon dropdown-toggle"'+ 
                   'data-toggle="dropdown" aria-expanded="false">'+
                   '<i class="fa fa-ellipsis-v"></i></a>' +
                    '<div class="dropdown-menu dropdown-menu-left">' +
                    '<a href="/shop/product/variants/' +
                    data +
                    '/edit"' +
                    'class="dropdown-item" data-toggle="tooltip"' +
                    'data-placement="top" title="Edit">' +
                    '<i class="fa fa-pen"' +
                    'aria-hidden="true"></i> Edit</a>' +
                    '<a rel="' +
                    data +
                    '" rel1="delete" href="javascript:"' +
                    'class="dropdown-item deleteProductVariant"' +
                    'data-toggle="tooltip" data-placement="top" title="Delete">' +
                   '<i class="fa fa-trash"></i> Delete</a>' +
                    "</div>" +
                    "</div>"
                );
            },
            name: "Action",
            orderable: false,
            searchable: false,
            printable: false
        }
    ],
    stateSave: true,
    bDestroy: true
});

I do have a route configured as follows

      Route::get('/variants/{id}', [ProductController::class, 'variants']);

In the controller, the function gets the id from the route as follows

      if ($request->ajax()) {
        $data = $data = ProductVariant::join('statuses','product_variants.status_id',
      'statuses.id')->join('variant_types','product_variants.variant_type_id',
      'variant_types.id')->join('variant_categories','variant_types.cat_id',
      'variant_categories.id')->select('product_variants.id As id',
      'variant_types.name As name','product_variants.cost As cost',
      'variant_categories.name As category', 'statuses.name As status')
      ->where(['product_variants.p_id'=>$id])->get();
            return Datatables::of($data)->addIndexColumn()->make(true);
    }

When I run it I get the following error in the console

       GET http://127.0.0.1:8000/shop/product/variants/?draw=1&columns%
      5B0%5D%5Bdata%5D=category&columns%5B0%5D%5Bname%
      5D=category&columns%5B0%5D%5Bsearchable%5D=true&columns%
      5B0%5D%5Borderable%5D=true&columns%5B0%5D%5Bsearch%5D%5Bvalue
      %5D=&columns%5B0%5D%5Bsearch%5D%5Bregex%5D=false&columns%5B1
      %5D%5Bdata%5D=name&columns%5B1%5D%5Bname%5D=name&columns
      %5B1%5D%5Bsearchable%5D=true&columns%5B1%5D%5Borderable
      %5D=true&columns%5B1%5D%5Bsearch%5D%5Bvalue%5D=&columns%5B1
      %5D%5Bsearch%5D%5Bregex%5D=false&columns%5B2%5D%5Bdata
      %5D=cost&columns%5B2%5D%5Bname%5D=cost&columns%5B2%5D%
      5Bsearchable%5D=true&columns%5B2%5D%5Borderable%5D=true&
      columns%5B2%5D%5Bsearch%5D%5Bvalue%5D=&columns%5B2%
      5D%5Bsearch%5D%5Bregex%5D=false&columns%5B3%5D%5Bdata%5D=
      status&columns%5B3%5D%5Bname%5D=status&columns%5B3%5D%
      5Bsearchable%5D=true&columns%5B3%5D%5Borderable%5D=true&
      columns%5B3%5D%5Bsearch%5D%5Bvalue%5D=&columns%5B3%5D%5
      Bsearch%5D%5Bregex%5D=false&columns%5B4%5D%5Bdata%5D=id&
      columns%5B4%5D%5Bname%5D=Action&columns%5B4%5D%5Bsearchable
      %5D=false&columns%5B4%5D%5Borderable%5D=false&columns%
      5B4%5D%5Bsearch%5D%5Bvalue%5D=&columns%5B4%5D%5Bsearch%5D
      %5Bregex%5D=false&order%5B0%5D%5Bcolumn%5D=0&order%
      5B0%5D%5Bdir%5D=asc&start=0&length=10&search%5Bvalue%5D=&
     search%5Bregex%5D=false&id=742&_=1677158506437 404 (Not Found)

from my understanding, a new URL is being formed which is not found yet I expected the supplied URL to be used and the id passed just like is done in laravel routing. How can I get to pass the id correctly and achieve the desired output?

What have you tried to resolve the problem? Where are you stuck? Is this a PHP problem, or a JS problem? A 404 error when calling the route might indicate that it does not exist — Nico Haase, Feb 23 '23 at 13:33
@NicoHaase I've indicated what I've done both in the JavaScript section, I have also said that I'm having a challenge passing the id to the route and subsequently to the controller. I have also offered my code for the controller side and the route just in case the issue is from there — The Only Smart Boy, Feb 23 '23 at 13:49
Can you share the route definition that should match the given URL? `/variants/{id}` will obviously not match the URL that you've shared, as the ID parameter is missing — Nico Haase, Feb 23 '23 at 13:52
@NicoHaase to be honest, I have no idea how that URL is coming about and what I am asking for is how I can pass the id to the url. something like ```url: "/shop/product/variants/". $id,``` in my attempt, I have tried using data ```'data': { id: $("#productVariants").attr("rel"), },``` but from a close observation of the error, that makes the request a search and actially passes the id but not in a format that the route can capture — The Only Smart Boy, Feb 23 '23 at 13:56
You should just set up a route for `/variants/` here, because that is the URL _path_ datatables makes the request to. All the parameters are, as can be clearly seen from your 404-ing example URL, put into the query string. — CBroe, Feb 23 '23 at 14:27
Check [this](https://stackoverflow.com/questions/31051550/server-side-data-tables-send-post-data-as-json) post mostly related to your issue. — Swati, Feb 23 '23 at 14:28

score 0 · Accepted Answer · answered Jul 10 '23 at 06:34

For anyone having the same issue, here is how I solved the problem. I changed the route method to post removing the id variable from the route I then changed the datatable code as follows

        $("#productVariants").DataTable({
    responsive: true,
    lengthChange: false,
    autoWidth: false,
    dom: "Bfrtip",
    buttons: ["pageLength", "copy", "csv", "excel", "pdf", "print"],
    processing: true,
    serverSide: true,
    ajax: {
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            },
        url: "/shop/product/variants/",
        type: "POST",
        'data': {
            id: $("#productVariants").attr("rel"),
        },
    },
    columns: [
        { data: "category", name: "category" },
        { data: "name", name: "name" },
        { data: "cost", name: "cost" },
        { data: "quantity", name: "quantity" },
        { data: "status", name: "status" },
        { data: "id",
            render: function(data, type, row) {
                return (
                    '<div class="dropdown dropdown-action">' +
                    '<a href="#" class="action-icon dropdown-toggle" data-toggle="dropdown" aria-expanded="false"><i class="fa fa-ellipsis-v"></i></a>' +
                    '<div class="dropdown-menu dropdown-menu-left">' +
                    '<a href="/shop/product/variants/' +
                    data +
                    '/edit"' +
                    'class="dropdown-item" data-toggle="tooltip"' +
                    'data-placement="top" title="Edit"><i class="fa fa-pen"' +
                    'aria-hidden="true"></i> Edit</a>' +
                    '<a rel="' +
                    data +
                    '" rel1="delete" href="javascript:"' +
                    'class="dropdown-item deleteProductVariant"' +
                    'data-toggle="tooltip" data-placement="top" title="Delete"><i class="fa fa-trash"></i> Delete</a>' +
                    "</div>" +
                    "</div>"
                );
            },
            name: "Action",
            orderable: false,
            searchable: false,
            printable: false
        }
    ],
    stateSave: true,
    bDestroy: true
});

Note that the only significant change is the change of method to post

Passing Id to be used in controller via datatables ajax property

1 Answers1