When utilizing AJAX to fetch route data, I encountered an issue.
I aim to create a Dynamic Select that, based on the selected "Faculty," displays the corresponding "programs" linked to that faculty.
This is my route:
Route::get('selectprogramas/{id}', 'SyllabusController@getProgramas');
This represents the Program model:
class Programa extends Model
{
protected $table = 'Programas';
protected $fillable = ['nombre', 'perfil_profesional', 'competencias', 'facultad_id',
'perfil_profesional'];
public function selectprogramas($id){
return Programa::where('facultad_id', $id)->get();
}
}
This is the controller function:
public function getProgramas(Request $request, $id){
if($request->ajax()){
$programas = Programa::selectprogramas($id);
return response()->json($programas);
}
}
The following HTML snippets show the two selects (made with Laravel Collective):
<div class="form-group col-9 font-weight-bold">
{{ Form::label('facultad', 'Facultades:') }}
{{ Form::select('facultad', $facultades, null, ['class' => 'form-control', 'id' => 'facultad']) }}
</div>
<div class="form-group col-9 font-weight-bold">
{{ Form::label('programa', 'Programas:') }}
{!! Form::select('programa', ['placeholder'=>'Selecciona'], null, ['id'=>'programa']) !!}
</div>
Below is my JavaScript code:
$("#facultad").change(function (event){
console.log("Entered!");
$.get("../selectprogramas/" + event.target.value ,function(response, facultad){
$("#programa").empty();
for(i=0; i<response.length; i++){
$("#programa").append("<option>"+response[i].nombre+"</option>");
}
});
});
The error I am encountering can be seen here: https://i.sstatic.net/Lv2b4.png