State/City Combos: AJAX does not return cities

Asked

Viewed 48 times

0

Good evening, everyone!

I’m learning jQuery/Ajax and I’m trying to do the famous title combo, but the city combo is blank.

I was able to test even the part that arrives in AJAX and, apparently, the error should be there in his block. Where I am missing?

view:

            <div class="row">
                <div class="input-group mb-3 col">
                    <div class="input-group-prepend">
                        <label class="input-group-text" for="cUf">UF</label>
                    </div>                        
                    <select class="form-control" name="cUf" id="cUf">
                        <option value="">Selecione...</option>
                        @foreach ($uf as $u)
                            <option value="{{ $u->id }}">{{ $u->uf }}</option>
                        @endforeach
                    </select>
                    <div class="valid-feedback">
                        Ok!
                    </div>
                    <div class="invalid-feedback">
                        Escolha uma UF
                    </div>
                </div>

                <div class="input-group mb-3 col-md-9">
                    <div class="input-group-prepend">
                      <label class="input-group-text" for="cCid">Cidade</label>
                    </div>
                    <select class="form-control" name="cCid" id="cCid" >
                    </select>
                    <div class="valid-feedback">
                        Ok!
                    </div>
                    <div class="invalid-feedback">
                        Escolha uma cidade
                    </div>
                  </div>
            </div>

...

<script>
$(document).ready(function(){
    $('#cUf').change(function(){

        if($(this).val() != ''){
            var uf_id = $(this).val();
            var _token = $('input[name="_token"]').val();

            $.ajax({
                url:"{{ route('clientes.fetch') }}",
                type:"POST",
                data:{value:uf_id, _token:_token},
                success:function(data){
                    $('#cCid').html(data);
                }
            })
        }

    });
});

route:

Route::post('/clientes/fetch','ControladorCliente@fetch')->name('clientes.fetch');

Controller:

public function fetch(Request $request){
    $uf_id = $request->get('value');

    $data = DB::table('cidades')
            ->where('uf_id','=',$uf_id)
            ->get();

    $output = '<select value="">Selecione...</select>';

    foreach ($data as $row) {
        $output .= '<option value="'.$row->id.'">'.$row->nome.'</option>';
    }

    echo $output;
}
php jquery ajax laravel

1 answer

0

in Controller, try to replace:

$uf_id = $request->get('value');

for

$uf_id = $request->value;

Browser other questions tagged php jquery ajax laravel

You are not signed in. Login or sign up in order to post.