Dynamic Combobox with jQuery + Laravel

Question

I am on a registration screen where there is a combobox of State and Cities.

City has q be filled after the state is selected.

I have create.blade.php

<div class="form-group">
        {!! Form::label('estado', 'Estado:') !!}
        {!! Form::select('estado', $estados) !!}
    </div>

    <div class="form-group">
        {!! Form::label('cidade', 'Cidade:') !!}
        {!! Form::select('cidade', []) !!}
    </div>

<script type="text/javascript">
    $('select[name=estado]').change(function () {
        var id_estado = $(this).val();

       // $('select[name=cidade]').html('').append('<option value="">  Carregando...  </option>');
        $.get('/cidades/' + id_estado, function (cidades) {
            $('select[name=cidade]').empty();
            $.each(cidades, function (key, value) {
                $('select[name=cidade]').append('<option value=' + value.id_cidade + '>' + value.nome + '</option>');
            });
        });
    });
</script>

And the controller:

class CidadeController extends Controller
{
    private $estadoModel;

    public function __construct(Estado $estado)
    {
        $this->estadoModel = $estado;
    }

    public function index()
    {
        $estados = $this->estadoModel->lists('nome', 'id_estado');

        return view('contas.create', compact('estados'));
    }

    public function getCidades($id_estado)
    {

        $estado = $this->estadoModel->find($id_estado);

        $cidades = $estado->cidades()->getQuery()->get(['id_estado', 'nome']);

        return Response::json($cidades);

    }

But using the debugging of the Variable is doing the wrong query:

select * from `estados` where `estados`.`id_estado` = '3' limit 1

select `id_estado`, `nome` from `cidades` where `cidades`.`id_cidade` = '3' and `cidades`.`id_cidade` is not null

Can someone help me because you’re making the wrong appointment?

Answer 1

I’m using the Laravel 5.0 version

    class Estado extends Model {
    protected $primaryKey = 'id_estado';

    protected $fillable = [

        'nome',
        'regiao',
        'sigla'

    ];

    public $timestamps  = false;

    public function cidades()
    {
        return $this->hasMany('Realito\Cidade','id_cidade');
    }





class Cidade extends Model {

    protected $primaryKey = 'id_cidade';

    protected $fillable = ['id_estado','nome'];



    public function estado()
    {
        return $this->belongsTo('Realito\Estado','id_estado');
    }

}

Answer 2

After commenting on your question, I noticed at first glance that your mistake is in defining the relationship between State and Cities (hasMany).

The function hasMany expects the following parameters:

• The model (+namespace)
• To Foreign Key (FK) present in this model, ie the field that makes the connection from city to state, which in this case is id_estado
• And the Primary key (PK) of the current model, in this case, of the State (not mandatory)

So the right way to do this relationship would be:

return $this->hasMany('Realito\Cidade','id_estado');

---

Some points for you to check in your code:

Model state

Definition of relationship with the City model (hasMany - there are/have many(as))

class Estado extends Model
{

    // outros códigos

    public function cidades()
    {
        return $this->hasMany('Realito\Cidade', 'id_estado')
    }

    // outros códigos

}

Model city

Definition of the relationship with the State model (belongsTo - belongs to...).

class Cidade extends Model
{

    // outros códigos

    public function estado()
    {
        return $this->belongsTo('Realito\Estado', 'id_estado')
    }

    // outros códigos

}

I always advise to define the controller name in Plural, after all, it is a convention of Laravel and many other frameworks .

class CidadesController extends Controller
{
    // outros códigos

    public function getCidades($id_estado)
    {
        $estado = $this->estadoModel->findOrFail($id_estado);
        $cidades = $estado->cidades()->lists('nome', 'id');

        // não entendi porque você está selecionando o campo id_estado 
        // ->get(['id_estado', 'nome']);

        return Response::json($cidades);
    }

    // outros códigos
}

The use of findOrFail avoids problems with invalid ids, but also this can be treating "n" different ways, with a simple if or even a Try catch.

As to the lists(), it is incredibly easy to use it to return an arrary containing only id and chosen name/value.

---

Furthermore, I ask you to validate your code and compare it to mine.

Leave a comment so I can assist you if you have any questions.