Laravel 5 и AJAX динамическое меню выбора в зависимости от предыдущего выбора

Question

Попытка создать отдельные меню, которые заполняются данными из базы данных. При выборе значения в первом содержимое второго меню будет зависеть от того, какой выбор был сделан в первом.

<div class="form-group">
    {{Form::label('company', 'Company')}}
    <select selected="" class="form-control" id="company" name="university">
        <option disabled selected value> -- select an option -- </option>
        @foreach($company as $key)
            <option>{{$key->Id}}</option>
        @endforeach
    </select>
</div>
<div class="form-group">
    @include('includes.partial', ['department' => $department])
</div>

Частичная:

{{Form::label('department', 'Department')}}
    <select selected="" class="form-control" id="department" name="department">
        <option disabled selected value> -- select an option -- </option>
        @foreach($department as $key)
            <option>{{$key->name}}</option>
        @endforeach
    </select>

JQuery:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
    $(document).ready(function(){
        setListener(); 
    });

    function setListener() {
        $('#company').change(function() {
            let value = $(this).val();
            alert(value);
            console.log(value.length);
            $.ajax({
                url:"create/" + value,
                method: "GET",
                success:function(result) {
                    $('#department').empty();
                    $('#department').html(result);
                    alert('result');
                }
            });

        });
    }
</script>

Маршрут:

Route::get('home/package/create/{value}', 'Admin\PackageController@getContent');

Метод контроллера:

public function getContent(Request $request, $value)
{
    $department = DB::table('department')->where('company_id', '=', $value)->get();

    return View::make('admin.package.create')
        ->with('department', $department);

}

Например, при вводе URL http://localhost/exchange/exchange/public/home/package/create/10 вручную в браузере страница обновляется, и второе меню выбора заполняется правильными значениями. Но при этом путем выбора значения в первом меню либо ничего не происходит, либо консоль браузера возвращает ошибку GET http://localhost/exchange/exchange/public/home/package/create/create/10 404 (Not Found)

Что здесь может быть не так? Странно то, что функционал работает при ручном вводе URL.

Answer 1

Решено с:

<script>
    $('#company').on('change', function(e) {
        console.log(e);

        let company_id = e.target.value;

        $.get('create/sub?company_id=' + company_id, function(data) {
            console.log(data);
            $('#department').empty();
            $.each(data, function(index, Obj) {
                $('#department').append('<option value="'+Obj.Id+'">'+Obj.name+'</option>')
            })
        })
    });    
</script>

Контроллер:

public function getContent(Request $request)
{
    $company_id = $request->input('company_id');
    $department = Department::where('company_id', '=', $company_id)->get();

    return response()->json($department);

}

Answer 2

Возможно, URL-адрес, который использует ajax-запрос, некорректен (вы должны использовать полный uri - без хоста), или ваша форма отсутствует csrf токен.

Добавьте тег csrf в заголовок html

<meta name="csrf-token" content="{{ csrf_token() }}">

добавить настройку ajax куда-нибудь, желательно глобально - вы должны использовать это в любом случае

$.ajaxSetup({
    headers: {
        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
    }
});

Обновите ваш запрос js.

function setListener() {
    $('#company').change(function() {
        let value = $(this).val();
        alert(value);
        console.log(value.length);
        $.ajax({
            url:"/exchange/exchange/public/home/package/create/" + value,
            method: "GET",
            success:function(result) {
                $('#department').empty();
                $('#department').html(result);
                alert('result');
            }
        });

    });
}