I have a small case study with Laravel project. The Idea is very simple; I have 3 combo boxes with related information each other. I need to show the parent-child information based on related combo box that is selected. I decided to use Javascript because it can load information so fast.
Select Kingdom:
Select Species:
Slect name:
Here is my codes:
View
@extends('app')
@section('content')
<div class="row">
<div class="col-md-4">
{!! Form::label('kingdom', 'Select Kingdom') !!}
{!! Form::select('id', $kingdom ,null , array('id'=>'kingdom','class' => 'form-control')) !!}
</div>
</div>
<div class="row">
<div class="col-md-4">
{!! Form::label('species', 'Select Species') !!}
{!! Form::select('id', $species ,null , array('id'=>'species','class' => 'form-control')) !!}
</div>
</div>
<div class="row">
<div class="col-md-4">
{!! Form::label('name', 'Select Name') !!}
{!! Form::select('id', $name ,null , array('id'=>'name','class' => 'form-control')) !!}
</div>
</div>
</div>
<script type="text/javascript">
$(document).ready(function(){
$('#kingdom').on('change', function(e){
var id_kingdom = e.target.value;
$.get('{{ url('kingdom')}}/'+id_kingdom, function(data){
console.log(id_kingdom);
console.log(data);
$('#species').empty();
$.each(data, function(index, element){
$('#species').append("<option>"+element.name_info+" </option>");
});
});
});
$('#species').on('change', function(e){
var id_species = e.target.value;
$.get('{{ url('species')}}/'+id_species, function(data){
console.log(id_species);
console.log(data);
$('#name').empty();
$.each(data, function(index, element){
$('#name').append("<option>"+element.name_info+"</option>");
});
});
});
});
</script>
@endsection
Controller
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use App\Http\Requests;
use App\ModelKingdom;
use App\ModelSpecies;
use App\ModelName;
class PagesController extends Controller
{
public function home(){
$kingdom=ModelKingdom::pluck('name_info', 'id');
$species=ModelSpecies::pluck('name_info', 'id','id_kingdom');
$name=ModelName::pluck('name_info', 'id','id_kingdom','id_species');
return view('home', compact('kingdom', 'species', 'name'));
}
public function SpeciesAjax($id_kingdom){
if($id_kingdom==0){
$species = ModelSpecies::all();
}else{
$species = ModelSpecies::where('id_kingdom','=',$id_kingdom)->get();
}
return $species;
}
public function NameAjax($id_species){
if($id_species==0){
$name = null;
}else{
$name = ModelName::where('id_species','=',$id_species)->get();
}
return $name;
}
}
Route
Route::get('/', 'PagesController@home');
Route::get('/kingdom/{id_kingdom}','PagesController@SpeciesAjax');
Route::get('/species/{id_species}','PagesController@NameAjax');
Okay, up to this point I guess everything is properly set, but when I ran into the browser, something happen.
Scenario 1:
When I select one of the Kingdom, the Species is shown correctly. For example when I select Animal, the species are Fish and Mamals. But when I select Fish, the value of combo box 3 (Name) were disappeared(null).
Scenario 2:
I select first the species and the Name values were shown correctly. For example I select Mammals so the Name values are Cow and Elephant. Then I go for Kingdom, so the species are shown correctly, BUT when I select one of them, the Name value were disappeared(Again).
What did just happen? I just want to consecutively select combo boxes and display related value. Please help!
The issue seems to be the following, if $id_species is 0 you are setting $name to null. Instead change the function to the following
public function NameAjax($id_species = null){
if(isnull($id_species)) {
$name = null;
} else {
$name = ModelName::where('id_species','=',$id_species)->get();
}
return $name;
}