Passing Laravel Route Parameter to JavaScript

Question

I'm using server-side DataTables in Laravel (Yajra to be specific).

I have a route set up that pulls all assets and returns as a DataTable, but what I need is to pull all assets where the school_id is equal to the parameter in the URL.

So my application should look like this:

User lands on /schools/{school_id}/assets .e.g schools/1/assets
Datatables pulls all school's assets using that {school_id}

I'm using the following so far in the script:

$(function() {
    $('#assets-table').DataTable({
        processing: true,
        serverSide: true,
        ajax: '/api/assets',
        columns: [
            {data: 'asset_tag', name: 'assets.asset_tag'},
            {data: 'name', name: 'assets.name'},
        ]
    });
});

What would be the best approach to fetching that ID in the URL and passing it to that ajax request?

Bruno Francisco · Accepted Answer · 2018-09-27 12:58:41Z

This answer will reflect a method I use to have all files structured and don't mix blade files with js.

In your controller you will have the the {school_id}. You could simply pass it to the blade as so:

return view('...')->with([
  'school_id' => $school_id
]);

Create a simple input field to be able to fetch the data.

<input type="hidden" data-fetch-route="{{ route('name_of_route', ['school_id' => $school_id]) }}" id="schoolFetch">

In the .js file you can have:

$(function() {
 $('#assets-table').DataTable({
    processing: true,
    serverSide: true,
    ajax: $("#schoolFetch").attr('data-fetch-route'),
    columns: [
        {data: 'asset_tag', name: 'assets.asset_tag'},
        {data: 'name', name: 'assets.name'},
    ]
});

As you could see you will have route('name_of_route', ['school_id' => $school_id]) which means you will need to accept a parameter at the route name_of_route

If you would like to go even deeper and cleaner you can create a file called utilities.js and this file will have all the functions that you may use all over your application as such:

window.getRoute = function($element, action){
  return $element.attr('data-' + action + '-route');
}

and

ajax: $("#schoolFetch").attr('data-fetch-route'),

will turn into

ajax: getRoute($("#schoolFetch"), 'fetch'),

ajtrichards · Accepted Answer · 2018-09-27 13:16:14Z

0

$(function() {
    $('#assets-table').DataTable({
        processing: true,
        serverSide: true,
        ajax: {{ route('name.your.route.here') }},
        columns: [
            {data: 'asset_tag', name: 'assets.asset_tag'},
            {data: 'name', name: 'assets.name'},
        ]
    });
});

edited Sep 27, 2018 at 13:16

ajtrichards

30.7k13 gold badges99 silver badges102 bronze badges

answered Sep 27, 2018 at 12:27

Shailendra Gupta

1,1207 silver badges16 bronze badges

Collectives™ on Stack Overflow

Passing Laravel Route Parameter to JavaScript

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related