vendredi 27 avril 2018

Laravel 5 and AJAX dynamic select menu depending on previous select

Trying to create select menus that are populated by data from database. When selecting a value in the first, the contents of the second menu will be depending on which choices was made in the first.

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

Partial:


    <select selected="" class="form-control" id="department" name="department">
        <option disabled selected value> -- select an option -- </option>
        @foreach($department as $key)
            <option></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:

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

Controller method:

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

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

}

When entering the url http://localhost/exchange/exchange/public/home/package/create/10 manually in the browser for example, the page updates and the second select menu is filled with the correct values. But when doing this by selecting a value in the first menu, either nothing happens or the browser console returns an error GET http://localhost/exchange/exchange/public/home/package/create/create/10 404 (Not Found)

What can be wrong here? The strange thing is that the functionality works when entering the url manually.



via Chebli Mohamed

Aucun commentaire:

Enregistrer un commentaire