Laravel 5.3 Ajax url not found

Question

I'm working on a screen with the following url http://localhost/npr/public/admin/athletes/test/143 On this screen, I've implemented the following dynamic droplist Ajax call that's not found:

$(document).ready(function() {
 $('select[name="section"]').on('change', function() {

     var sectionID = $(this).val();

     if(sectionID) {
         $.ajax({
             url: './getSportPositions'+sectionID,
             method: 'get',
             //data: {"_token": $('#token').val()},
             dataType: "json",
             success:function(data) {
                 $('select[name="position"]').empty();
                 $('select[name="position"]').append('<option value="">'+ '-- Please choose one --' +'</option>');
                 $.each(data, function(i, position) {
                     $('select[name="position"]').append('<option value="'+position.name+'">'+ position.name +'</option>');
                 });
             }
         });
     }else{
         $('select[name="position"]').empty();
     }
 });
});

Route:

Route::get('getSportPositions{id}','HomeController@getSportPositions');

I've also tried with:

Route::get('/admin/athletes/test/getSportPositions{id}','HomeController@getSportPositions');

Is it due to athlete ID 143 in the calling URL? How do I fix this call? It seems from the error that it's trying to access this route:

Route::get('/admin/athletes/test/{athlete}/', [
    'uses' => 'HomeController@testAnAthlete',
    'as' => 'admin.test_athlete'
]);

HTML:

    <div class="form-group {{ $errors->has('position') ? ' alert alert-danger' : '' }}">
        <label for="position" class="col-md-3 control-label">Position in Team</label>

        <div class="col-md-6">
            <select class="form-control" name="position" id="position">
                @if (!$errors->has('position'))
                  <option selected value> -- select a team first --  </option>
                @endif
            </select>
        </div>
        @if ($errors->has('position'))
            <span class="help-block">
                <strong>{{ $errors->first('position') }}</strong>
            </span>
        @endif                                        
    </div>                    

Answer 1

When you are using Ajax you have to get url like

var APP_URL = $('meta[name="_base_url"]').attr('content');

also add this <meta name="_base_url" content="{{ url('/') }}"> to head tag

then after you can use APP_URL

var url = APP_URL+"/getSportPositions/"+sectionID;

Answer 2

Additional from me. in laravel view :

<meta name="_base_url" content="{{ url('/') }}">
<meta name="csrf-token" content="{{ csrf_token() }}">

in addition to @Nikhil Radadiya answer, because using jquery mean you wait for page ready, you can use javascript :

var APP_URL = document.getElementsByTagName('meta')._base_url.content;
var APP_CSRF = document.querySelector("meta[name='csrf-token']").content; // javascript cannot use dash, else you can use csrf_token at meta name

then you can use in your ajax like :

$.ajax({
    headers: {
        'X-CSRF-TOKEN': APP_CSRF
    },
    url: APP_URL + '/your_ajax_path',
    ...
    ...
});

and make sure the url is loaded in your web route.

Answer 3

You could name the route and use BLADE to set a Javascript variable to that route.

For example:

Route::get('/', 'MyAmazingController@function')->name('my.awesome.route');

Then in your Javascript you can do something like:

url: '{{ route('my.awesome.route') }}';

If you have the javascript in a seperate file, you could create a constant in your view with routes in it.

val ROUTES = {
    AJAX: '{{ route('my.awesome.route') }}'
}