I have Table called predictions with columns Currorg1,Currorg2,Currorg3,Currorg4,Currorg5 now I am getting all these values in multi select dropdown. I want to implement dynamic dropdown i.e. when I select Currorg1 then all the values in Currorg2 must load values dependent on Currorg1 selection.
For e.g. this is my table | Curr0rg1 | Currorg2 | | -------- | ---------| | First | row1 | | Second | row2 | | First | row3 | | First | row4 | | Second | row 5 |
Now when First is selected it should display row1,row3,row4 in Currorg2 dropdown and so on. I have followed this tutorial: https://www.webslesson.info/2018/03/ajax-dynamic-dependent-dropdown-in-laravel.html but not sure what I am doing wrong.
Here is my controller:
public function index(Request $request,ExportDataTable $dataTable)
{
if(request()->ajax())
{
if(!empty($request->BusinessUnit) || !empty($request->CurrOrg1) || !empty($request->CurrOrg2) || !empty($request->Role) || !empty($request->Region) || !empty($request->ProfessionalClassification) || !empty($request->Gender) || !empty($request->CurrOrg3) || !empty($request->CurrOrg4) || !empty($request->CurrOrg5) || !empty($request->L6) || !empty($request->L7) || !empty($request->Account))
{
$loged_user =Auth::user();
$user= DB:: table('users')
->selectRaw('users.*, REPLACE(Org2, "Admin", "") AS ROrg2, REPLACE(Org1, "Admin", "") AS ROrg1, REPLACE(Org3, "Admin" , "") AS ROrg3')
->where('email',$loged_user->email)
->first();
$query= DB:: table('predictions')
->where('CurrOrg1','like','%'.$user->ROrg1.'%')
->where('CurrOrg2','like','%'.$user->ROrg2.'%')
->where('CurrOrg3','like','%'.$user->ROrg3.'%')
->select('predictions.id','predictions.EmployeeNumber','predictions.Role','predictions.Region','predictions.CurrOrg1','predictions.CurrOrg2','predictions.RiskZone','predictions.Probablity','predictions.Rating','predictions.Feedback','predictions.Gender','predictions.CurrOrg3','predictions.CurrOrg4','predictions.CurrOrg5','predictions.ProfessionalClassification','predictions.Local_Expat','predictions.EmployeeRoleSeniority','predictions.FeedRisklevel','predictions.Feedinfluencers','predictions.Action','predictions.Fname','predictions.Lname','predictions.Avgweekhr','predictions.Account','predictions.L6','predictions.L7');
if(!empty($request->CurrOrg2)) {
$query->whereIn('CurrOrg2',$request->CurrOrg2);
}
if(!empty($request->Region)) {
$query->whereIn('Region',$request->Region);
}
if(!empty($request->ProfessionalClassification)) {
$query->whereIn('ProfessionalClassification',$request->ProfessionalClassification);
}
if(!empty($request->CurrOrg1)) {
$query->whereIn('CurrOrg1',$request->CurrOrg1);
}
if(!empty($request->CurrOrg3)) {
$query->whereIn('CurrOrg3',$request->CurrOrg3);
}
if(!empty($request->CurrOrg4)) {
$query->whereIn('CurrOrg4',$request->CurrOrg4);
}
if(!empty($request->CurrOrg5)) {
$query->whereIn('CurrOrg5',$request->CurrOrg5);
}
if(!empty($request->Role)) {
$query->whereIn('Role',$request->Role);
}
if(!empty($request->BusinessUnit)) {
$query->whereIn('BusinessUnit',$request->BusinessUnit);
}
if(!empty($request->Gender)) {
$query->whereIn('Gender',$request->Gender);
}
if(!empty($request->L6)) {
$query->whereIn('L6',$request->L6);
}
if(!empty($request->L7)) {
$query->whereIn('L7',$request->L7);
}
if(!empty($request->Account)) {
$query->whereIn('Account',$request->Account);
}
$data = $query->get();
}
else
{
$loged_user =Auth::user();
$user= DB:: table('users')
->selectRaw('users.*, REPLACE(Org2, "Admin", "") AS ROrg2, REPLACE(Org1, "Admin", "") AS ROrg1, REPLACE(Org3, "Admin" , "") AS ROrg3')
->where('email',$loged_user->email)
->first();
$data1 =DB:: table('predictions')
->where('CurrOrg1','like','%'.$user->ROrg1.'%')
->where('CurrOrg2','like','%'.$user->ROrg2.'%')
->where('CurrOrg3','like','%'.$user->ROrg3.'%')
->select('predictions.id','predictions.EmployeeNumber','predictions.Role','predictions.Region','predictions.CurrOrg1','predictions.CurrOrg2','predictions.RiskZone','predictions.Probablity','predictions.Rating','predictions.Feedback','predictions.Gender','predictions.CurrOrg3','predictions.CurrOrg4','predictions.CurrOrg5','predictions.ProfessionalClassification','predictions.Local_Expat','predictions.EmployeeRoleSeniority','predictions.FeedRisklevel','predictions.Feedinfluencers','predictions.Action','predictions.Fname','predictions.Lname','predictions.Avgweekhr','predictions.Account','predictions.L6','predictions.L7');
$data = $data1->get();
}
return datatables()->of($data)
->addColumn('Feedback', function($data)
{
if($data->Action == 'No' || is_null($data->Action))
{
return "<a href='#' style='background-color:#CA0088;color:#fff' class='btn btn-sm Feedback' id='".$data->id."'>Feedback</a>";
}
else
{
return "<a href='#' style='background-color:#00A300;color:#fff' class='btn btn-sm Feedback' id='".$data->id."'>Feedback</a>";
}
})
->escapeColumns([])
->make(true);
}
$Business_unit_name = DB::table('predictions')
->select('BusinessUnit')
->groupBy('BusinessUnit')
->orderBy('BusinessUnit', 'ASC')
->get();
$CurrOrg1_name = DB::table('predictions')
->select('CurrOrg1')
->groupBy('CurrOrg1')
->orderBy('CurrOrg1', 'ASC')
->get();
$CurrOrg2_name = DB::table('predictions')
->select('CurrOrg2')
->groupBy('CurrOrg2')
->orderBy('CurrOrg2', 'ASC')
->get();
$CurrOrg3_name = DB::table('predictions')
->select('CurrOrg3')
->groupBy('CurrOrg3')
->orderBy('CurrOrg3', 'ASC')
->get();
$CurrOrg4_name = DB::table('predictions')
->select('CurrOrg4')
->groupBy('CurrOrg4')
->orderBy('CurrOrg4', 'ASC')
->get();
$CurrOrg5_name = DB::table('predictions')
->select('CurrOrg5')
->groupBy('CurrOrg5')
->orderBy('CurrOrg5', 'ASC')
->get();
$Role_name = DB::table('predictions')
->select('Role')
->groupBy('Role')
->orderBy('Role', 'ASC')
->get();
$Region_name = DB::table('predictions')
->select('Region')
->groupBy('Region')
->orderBy('Region', 'ASC')
->get();
$Gender_name = DB::table('predictions')
->select('Gender')
->groupBy('Gender')
->orderBy('Gender', 'ASC')
->get();
$ProfessionalClassification_name = DB::table('predictions')
->select('ProfessionalClassification')
->groupBy('ProfessionalClassification')
->orderBy('ProfessionalClassification', 'ASC')
->get();
$Prediction= new Prediction;
$Prediction_list= $Prediction::all();
$Topcorrelators = DB::table('predictions')
->select('Topcorrelators')
->groupBy('Topcorrelators')
->orderBy('Topcorrelators', 'ASC')
->get();
$L6_name = DB::table('predictions')
->select('L6')
->groupBy('L6')
->orderBy('L6','ASC')
->get();
$L7_name = DB::table('predictions')
->select('L7')
->groupBy('L7')
->orderBy('L7','ASC')
->get();
$Account_name = DB::table('predictions')
->select('Account')
->groupBy('Account')
->orderBy('Account','ASC')
->get();
return view('admin.members.Predictions', compact('Business_unit_name','CurrOrg1_name','CurrOrg2_name','CurrOrg3_name','CurrOrg4_name','CurrOrg5_name','Role_name','Region_name','Gender_name','Topcorrelators','ProfessionalClassification_name','Prediction_list','L6_name','L7_name','Account_name'));
}
/**
* Show the form for creating a new resource.
*
* @return \Illuminate\Http\Response
*/
function fetch(Request $request)
{
$select = $request->get('select');
$value = $request->get('value');
$dependent = $request->get('dependent');
$data = DB::table('predictions')
->where($select, $value)
->groupBy($dependent)
->get();
$output = '<option value="">Select '.ucfirst($dependent).'</option>';
foreach($data as $row)
{
$output .= '<option value="'.$row->$dependent.'">'.$row->$dependent.'</option>';
}
echo $output;
}
This is my script:
$('.dynamic').change(function(){
if($(this).val() != '')
{
var select = $(this).attr("id");
var value = $(this).val();
var dependent = $(this).data('dependent');
var _token = $('input[name="_token"]').val();
$.ajax({
url:"{{ route('dynamic_dependent') }}",
method:"POST",
data:{select:select, value:value, _token:_token, dependent:dependent},
success:function(result)
{
$('#'+dependent).html(result);
}
})
}
});
$('#CurrOrg1').change(function(){
$('#CurrOrg2').val('');
$('#CurrOrg3').val('');
});
$('#CurrOrg2').change(function(){
$('#CurrOrg3').val('');
});
This is my view:
<div class="form-group" style="margin-right: 10px">
<select name="CurrOrg1[]" id="CurrOrg1" multiple class="form-control input-lg dynamic" data-dependent="CurrOrg2">
@foreach($CurrOrg1_name as $org1)
<option value="{{ $org1->CurrOrg1 }}">{{ $org1->CurrOrg1 }}</option>
@endforeach
</select>
</div>
<div class="form-group" style="margin-right: 10px">
<select name="CurrOrg2[]" id="CurrOrg2" multiple class="form-control input-lg dynamic" data-dependent="CurrOrg3">
<option value="">Select Org2</option>
</select>
</div>
<div class="form-group" style="margin-right: 10px">
<select name="CurrOrg3[]" id="CurrOrg3" multiple class="form-control">
<option value="">Select Org3</option>
</select>
</div>
{{ csrf_field() }}
Can someone suggest what I am doing wrong here?
$('.dynamic').change(...- I don't see any HTML elements with that class? What debugging have you tried? Do the selects render correctly on first load, is the HTML as expected? Any errors on the browser devtools console? What is the actual problem?