Estou iniciando meus estudos sobre Laravel. Meu projeto é um simples cadastro de clientes onde gostaria de fazer um combo dos Estados com Cidades.
Seguem códigos:
MODEL ESTADOS
<?php
namespace SGW;
use Illuminate\Database\Eloquent\Model;
class Estado extends Model
{
public $timestamps = false;
protected $table = 'estados';
protected $guarded = ['id'];
protected $fillable = array(
'nome',
'sigla',
);
public function cidades()
{
return $this->hasMany('SGW\Cidade');
}
}
MODEL CIDADES
<?php
namespace SGW;
use Illuminate\Database\Eloquent\Model;
class Cidade extends Model {
public $timestamps = false;
protected $table = 'cidades';
protected $guarded = ['id'];
protected $fillable = array(
'cidade',
'estado_id',
);
public function estado()
{
return $this->belongsTo('SGW\Estado');
}
}
CIDADES CONTROLLER
<?php
namespace SGW\Http\Controllers;
use Illuminate\Support\Facades\DB;
use SGW\Cidade;
use Illuminate\Support\Facades\Request;
use Session;
use SGW\Estado;
class CidadesController extends Controller
{
private $estadoModel;
public function __construct(Estado $estado)
{
$this->estadoModel = $estado;
}
public function getCidades()
{
$estado = $this->estadoModel->findOrFail(13);
$cidades = $estado->cidades()->getQuery()->get(['id', 'cidade']);
return Response::json($cidades);
}
public function estado()
{
return $this->belongsTo('SGW\Estado', 'estado_id')
}
}
ROUTES
Route::get('/', function () { return view('layout.index'); });
Route::resource('empresa', 'EmpresasController');
Route::get('/empresa/get-cidades', 'CidadesController@getCidades');
HTML CADASTRO
<div class="form-group">
<div class="col-xs-11">
<label for="estado">*Estado</label>
<select class="form-control" id="estado" name="estado" required>
<option value=""></option>
@foreach ($estados as $e)
<option value="{{$e->id}}">[ {{$e->sigla}} ] - {{$e->nome}}</option>
@endforeach
</select>
</div>
</div>
<div class="form-group">
<div class="col-xs-11">
<label for="cidade">*Cidade</label>
<select class="form-control" id="cidade" name="cidade"></select>
</div>
</div>
@section('post-script')
<script type="text/javascript">
$('select[name=estado]').change(function () {
var idEstado = $(this).val();
$.get("{{ action ('CidadesController@getCidades') }} ", function (cidades) {
$('select[name=cidade]').empty();
$('select[name=cidade]').append("<option value='' disabled selected style='display:none;'>Selecione uma cidade</option>");
$.each(cidades, function (key, value) {
$('select[name=cidade]').append('<option value=' + value.id + '>' + value.cidade + '</option>');
});
});
});
</script>
@stop
Executando a aplicação ao selecionar o estado não são mostradas as cidades mas o texto "Selecione uma cidade" é exibido. Poderiam me ajudar? Ah para teste passei um id do estado direto na consulta.