Laravel vs. Ajax: incorrect routing - ajax

Question

I'm trying to populate "position" dropdown based on "department". The Ajax call is triggered on change event of the "department" dropdown.
The problem is that the Ajax call can't reach the correct route:
with url: 'ajax/get-position' - the url is: localhost/public/join/ajax/get-position?dept_id=5
with url: '/ajax/get-position' - the url is: localhost/ajax/get-position?dept_id=5
Both of the URLs are wrong and I have no idea why. Especially this /join/ in the first point is a mystery to me. The correct URL should be localhost/public/ajax/get-position?dept_id=5. I believe there's some kind of a conflict in the routing, however I'm not sure where.
The Ajax call is made on localhost/public/join/editor page.
JS:
...
...
$.ajax({
url: 'ajax/get-position',
data: {
dept_id: value
},
type: 'GET',
dataType : 'json',
success: function(json) {
//
},
error: function(xhr, status, errorThrown) {
//
}
});
...
...
Routes:
Route::get('join/editor',
array(
'uses' => 'DefaultController#showEditorRegistration',
'as' => 'editorRegistration'
)
);
Route::post('join/editor',
array(
'uses' => 'DefaultController#createEditor',
'as' => 'createEditor'
)
);
// ROUTE FOR AJAX CALL
Route::get('ajax/get-position',
array(
'uses' => 'DefaultController#getPositionsByDepartment',
)
);
Any ideas?
EDIT:
The JavaScript is in an external file. If I put the JS directly in blade.php view and use URL::route('routename') as Ajax url value - all works fine. However, simply using url: ajax/get-position - does not. Crazy world.

Answer 1

I'm not completely sure, but based on our conversation about the details of your project I think the issue has to do with the location of your document root. the public directory should never show up in any of your laravel project's urls.
I created a demo project to demonstrate a simple interaction with Laravel and Ajax. It's a vanilla laravel project with slight alterations to the hello view.
Checkout the project, navigate into the public folder, and use the following command to spin up an ad-hoc phpserver:
php -S localhost:8002
You can then go to the url http://localhost:8002 to get to the homepage.
If you inspect the link on the home page and look at the url that is generated with the URL facade for the route tester. The URL doesn't include the public directory:
http://localhost:8003/tester
You can also look at the ajax setup and see that you can use the tester route as well.
$('#getbutton').click( function (){
$.ajax({
url: 'tester'
}).complete(function (a){
alert(a.responseText);
}).error(function (a){
console.log(a);
});
});
Using either the link or the ajax call on button click will hit the tester route in the routes file:
Route::get('tester',[ 'as' => 'tester', 'uses' => function (){
return 'worked';
}]);
The link can hit the route via the route name tester assigned in the routes file, and the ajax request can hit the route from the query string.
The routes in your project look ok and using ajax/get-position as your url in the ajax call shouldn't be an issue.
Give this project a try. Even if the issue isn't a webroot one, hopefully it will help you figure out where your issue is coming from.