Problem with route in Ajax using Laravel? - php

Question

I am trying to get a list of countries with their cities using Select2 with Jquery.
At the time of creating a post with their respective country and city, I don't have a problem, but at the time of editing the post I miss the following error:
http: //imperial.test/dashboard/posts/40/edit/getStates/6 (Not Found)
D:\laragon\www\Imperial\vendor\laravel\framework\src\Illuminate\Routing\RouteCollection.php # 179
Routes:
Route::group([
'prefix' => 'dashboard',
'namespace' => 'Admin',
'middleware' => 'auth'],
function(){
Route::get('/', 'AdminController#index')->name('dashboard');
Route::resource('posts', 'PostsController', [
'names' => [
'index' => 'dashboard.posts.index',
'create' => 'dashboard.posts.create',
'store' => 'dashboard.posts.store',
'edit' => 'dashboard.posts.edit',
'update' => 'dashboard.posts.update',
'destroy' => 'dashboard.posts.destroy',
],
]);
Route::get('posts/create/getStates/{id}', 'PostsController#getStates');
Route::get('posts/create/getCities/{id}', 'PostsController#getCities');
Route::get('posts/edit/getStates/{id}', 'PostsController#getStates');
Route::get('posts/edit/getCities/{id}', 'PostsController#getCities');
Route::get('images/posts/{id}/avatar/{image}', [
'uses' => 'PostsController#postProfileAvatar',
]);
});
My Script
$(document).ready(function(){
$('select[name="country_id"]').on('change',function(){
var country_id = $(this).val();
if(country_id)
{
$.ajax({
url: '/edit/getStates/'+country_id,
type: 'GET',
dataType: 'json',
success: function(data){
console.log(data);
$('select[name="state_id"]').empty();
$.each(data, function(key, value){
$('select[name="state_id"]')
.append('<option value="'+key+'">' + value + '</option>');
});
}
});
} else {
$('select[name="state_id"]').empty();
}
});
$('select[name="state_id"]').on('change',function(){
var state_id = $(this).val();
if(state_id)
{
$.ajax({
url: '/edit/getCities/'+state_id,
type: 'GET',
dataType: 'json',
success: function(data){
console.log(data);
$('select[name="city_id"]').empty();
$.each(data, function(key, value){
$('select[name="city_id"]').append('<option value="'+key+'">' + value + '</option>');
})
}
});
}else {
$('select[name="city_id"]').empty();
}
});
});
N' in the blade if the script path is registered:
<script src="{{ asset('js/worldedit.js') }}" defer></script>
Any suggestions on how to solve this error, I tried it in a separate project without using Route :: group and prefixes and I did it with GET routes and it worked, so I deduce that the problem is in the ajax route

Answer 1

Your route is under a group with prefix dashboard, so shouldn't it be
url: '/dashboard/posts/edit/getStates/'+ country_id
Instead of just
url: '/edit/getStates/'+country_id

Answer 2

When you are viewing a post your current address is
http: //imperial.test/dashboard/posts/40
and your javascript has this url (relative address)
url: '/edit/getStates/'+country_id,
So ajax call actually get this url:
http: //imperial.test/dashboard/posts/40/edit/getStates/6
While you are defining route (in laravel web.php) for
http: //imperial.test/dashboard/posts/edit/getStates/{id}
So you get not found error.
Define your routes as
Route::get('posts/{postid}/edit/getStates/{id}', 'PostsController#getStates');
Route::get('posts/{postid}/edit/getCities/{id}', 'PostsController#getCities');

Answer 3

You must use the route helper to get the route by name. In this case, you can do the following:
In the html "select" element:
For example, suppose you have a route called "cities.list" that retrieves all cities in this state:
<select name="state_id" data-route="{{ route('cities.list', ['id' => ':id']) }}" >
So, in the js script just use that route as follows:
....
var select_state = $('select[name="state_id"]'); // or $(this)
var route = select_state.data('route')
route = route.replace(':id', select_state.val())
$.ajax({
url: route,
type: 'GET',
dataType: 'json',
....
Did you get the idea?