Last updated
2 years ago.
VisionsIC said:
But, when I went to place the code in my application where I needed it to work, that's when it broke. I have it within the user dashboard, after login occurs. My guess is it has something to do with the
auth middleware. The reason i feel this is so is, because i've pinpointed it to thehome.blade.phpview. the @foreach is breaking the view.when you wrap the
@foreachin a@if(isset())if populates the view again but the dynamic dropdown doesn't work.
Question:
Is this the foreach that's not working:
@foreach($units as $unit)
<option value="{{$unit->id}}">{{$unit->unit}}</option>
@endforeach
and if I understand correctly, this doesn't crash but you don't get anything:
@if(isset($units))
@foreach($units as $unit)
<option value="{{$unit->id}}">{{$unit->unit}}</option>
@endforeach
@endif
If it is, have you tried determining whether $units is being passed correctly to your template? It sounds like $units isn't defined.
That is correct $units isn't being defined... The errorException states this.... That is the confusing part of the situation because I coded the exact same code in a testview.blade.php that functions exactly as it's meant to.
That's why I feel it is the auth that is somehow not allowing the variable to be passed because of the data has to be authenticated. Then again, could be totally wrong but I've tried everything so far to no avail.
VisionsIC said:
That is correct
$unitsisn't being defined... The errorException states this.... That is the confusing part of the situation because I coded the exact same code in atestview.blade.phpthat functions exactly as it's meant to.
Can you show us the code for the working one (controller and template)? Maybe we can compare.
Last updated
7 years ago.
OK,
Here is the testview.blade.php:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Laravel 5.3 Dynamic Dropdown with AJAX</title>
</head>
<body style="width: 900px; margin: 0 auto">
<div style="width: 900px; margin: 50px auto; align-self: center">
<h2 style="width: 500px; margin: 50px auto; text-align: center">Laravel 5.3 Dynamic Dropdown w/ AJAX</h2>
<!-- Form Select #1 : Unit -->
<span>Units: </span>
<select style="width: 200px" class="units" id="unit_id">
<option value="0" disabled selected>Select A Unit</option>
@foreach($units as $unit)
<option value="{{$unit->id}}">{{$unit->unit}}</option>
@endforeach
</select>
<!-- Form Select #2 : Patient Name (JQuery Control) -->
<span>Patient Name: </span>
<select style="width: 200px" class="patient_name">
<option value="0" disabled selected>Select Patient</option>
</select>
<!-- Form Select #3 : Room (JQuery Control) -->
<span>Room: </span>
<select style="width: 200px" class="room">
<option value="0" disabled selected>Select Room</option>
</select>
<!-- Form Select #4 : Gender (JQuery Control) -->
<span>Gender: </span>
<select style="width: 200px" class="gender">
<option value="0" disabled selected>Select Gender</option>
</select>
<!-- Form Select #5 : Diagnosis (JQuery Control) -->
<span>Diagnosis: </span>
<select style="width: 200px" class="diagnosis_abbreviation">
<option value="0" disabled selected>Select Diagnosis</option>
</select>
<!-- Form Select #6 : Therapist Title -->
<span>Therapist Title: </span>
<select style="width: 200px" class="therapist_title">
<option value="0" disabled selected>Select Therapist Title</option>
@foreach($therapist_title as $title)
<option value="{{$title->id}}">{{$title->title_abbreviation}}</option>
@endforeach
</select>
<!-- Form Select #7 : Therapist Name (JQuery Control) -->
<span>Therapist Name: </span>
<select style="width: 200px" class="therapist_names">
<option value="0" disabled selected>Select Therapist Name</option>
</select>
<!-- Form Select #8 : Wheelchair Type -->
<span>Wheelchair Type: </span>
<select style="width: 200px" class="wc_types">
<option value="0" disabled selected>Select Wheelchair Type</option>
@foreach($wc_types as $wc_type)
<option value="{{$wc_type->id}}">{{$wc_type->wc_type}}</option>
@endforeach
</select>
<!-- Form Select #9 : Wheelchair Model (JQuery Control) -->
<span>Wheelchair Model: </span>
<select style="width: 200px" class="inpatient_wc_model">
<option value="0" disabled selected>Select Wheelchair Model</option>
</select>
<!-- Form Select #10 : Wheelchair Brand (JQuery Control) -->
<span>Wheelchair Brand: </span>
<select style="width: 200px" class="inpatient_wc_brand">
<option value="0" disabled selected>Select Wheelchair Brand</option>
</select>
<!-- Form Select #11 : Wheelchair Dimensions -->
<span>Wheelchair Dimensions: </span>
<select style="width: 200px" class="wc_dimensions">
<option value="0" disabled selected>Select Wheelchair Dimensions</option>
@foreach($wc_dimensions as $wc_dems)
<option value="{{$wc_dems->id}}">{{$wc_dems->wc_dimensions}}</option>
@endforeach
</select>
<!-- Form Select #12 : Wheelchair Height -->
<span>Wheelchair Height: </span>
<select style="width: 200px" class="wc_heights">
<option value="0" disabled selected>Select Wheelchair Height</option>
@foreach($wc_heights as $wc_height)
<option value="{{$wc_height->id}}">{{$wc_height->wc_height}}</option>
@endforeach
</select>
<!-- Form Select #13 : Wheelchair Back -->
<span>Wheelchair Back: </span>
<select style="width: 200px" class="wc_back_type">
<option value="0" disabled selected>Select Wheelchair Back</option>
@foreach($wc_back_type as $wc_back)
<option value="{{$wc_back->id}}">{{$wc_back->wc_back_type}}</option>
@endforeach
</select>
<!-- Form Select #14 : Cushion Type -->
<span>Cushion Type: </span>
<select style="width: 200px" class="cushion_type">
<option value="0" disabled selected>Select Cushion Type</option>
@foreach($cushion_types as $cushion_type)
<option value="{{$cushion_type->id}}">{{$cushion_type->cushion_type}}</option>
@endforeach
</select>
<!-- Form Select #15 : Cushion Dimensions -->
<span>Cushion Dimensions: </span>
<select style="width: 200px" class="cushion_dimensions">
<option value="0" disabled selected>Select Cushion Type</option>
@foreach($cushion_dimensions as $cushion_dem)
<option value="{{$cushion_dem->id}}">{{$cushion_dem->cushion_dimensions}}</option>
@endforeach
</select>
<!-- Form Select #16 : Armrest Type -->
<span>Armrest Type: </span>
<select style="width: 200px" class="armrest_type">
<option value="0" disabled selected>Select Armrest Type</option>
@foreach($armrest_types as $armrest_type)
<option value="{{$armrest_type->id}}">{{$armrest_type->armrest_type}}</option>
@endforeach
</select>
</div>
<script src="{{ asset('js/jquery-3.1.1.js') }}"></script>
<script type="text/javascript">
// This block of JQuery code addresses SELECT tag group #2.
$(document).ready(function() {
$(document).on('change', '.units', function () {
var unit_id = $(this).val();
var div = $(this).parent();
var opt_tag = " ";
$.ajax({
type: 'get',
url: '{!!URL::to('findPatientName')!!}',
data: {'id': unit_id},
success: function (data) {
console.log('success');
console.log(data);
console.log(data.length);
opt_tag += '<option value="0" selected disabled>Select Patient</option>';
for (var i = 0; i < data.length; i++) {
opt_tag += '<option value="' + data[i].id + '">' + data[i].patient_name + '</option>';
}
div.find('.patient_name').html(" ");
div.find('.patient_name').append(opt_tag);
},
error: function () {
}
});
});
// This block of JQuery code addresses SELECT tag group #3.
$(document).on('change', '.patient_name', function () {
var patient_id = $(this).val();
var div = $(this).parent();
var opt_tag = " ";
$.ajax({
type: 'get',
url: '{!!URL::to('findRoom')!!}',
data: {'id': patient_id},
success: function (data) {
console.log('success');
console.log(data);
console.log(data.length);
opt_tag += '<option value="0" selected disabled>Select Room</option>';
for (var i = 0; i < data.length; i++) {
opt_tag += '<option value="' + data[i].id + '">' + data[i].room + '</option>';
}
div.find('.room').html(" ");
div.find('.room').append(opt_tag);
},
error: function () {
}
});
});
// This block of JQuery code addresses SELECT tag group #4.
$(document).on('change', '.room', function () {
var gender_id = $(this).val();
var div = $(this).parent();
var opt_tag = " ";
$.ajax({
type: 'get',
url: '{!!URL::to('findGender')!!}',
data: {'id': gender_id},
success: function (data) {
console.log('success');
console.log(data);
console.log(data.length);
opt_tag += '<option value="0" selected disabled>Select Gender</option>';
for (var i = 0; i < data.length; i++) {
opt_tag += '<option value="' + data[i].id + '">' + data[i].gender + '</option>';
}
div.find('.gender').html(" ");
div.find('.gender').append(opt_tag);
},
error: function () {
}
});
});
// This block of JQuery code addresses SELECT tag group #5.
$(document).on('change', '.gender', function () {
var diagnosis_id = $(this).val();
var div = $(this).parent();
var opt_tag = " ";
$.ajax({
type: 'get',
url: '{!!URL::to('findDiagnosis')!!}',
data: {'id': diagnosis_id},
success: function (data) {
console.log('success');
console.log(data);
console.log(data.length);
opt_tag += '<option value="0" selected disabled>Select Diagnosis</option>';
for (var i = 0; i < data.length; i++) {
opt_tag += '<option value="' + data[i].id + '">' + data[i].diagnosis_abbreviation + '</option>';
}
div.find('.diagnosis_abbreviation').html(" ");
div.find('.diagnosis_abbreviation').append(opt_tag);
},
error: function () {
}
});
});
// This block of JQuery code addresses SELECT tag group #7.
$(document).on('change', '.therapist_title', function () {
var name_id = $(this).val();
var div = $(this).parent();
var opt_tag = " ";
$.ajax({
type: 'get',
url: '{!!URL::to('findTherapistNames')!!}',
data: {'id': name_id},
success: function (data) {
console.log('success');
console.log(data);
console.log(data.length);
opt_tag += '<option value="0" selected disabled>Select Therapist Name</option>';
for (var i = 0; i < data.length; i++) {
opt_tag += '<option value="' + data[i].id + '">' + data[i].therapist_names + '</option>';
}
div.find('.therapist_names').html(" ");
div.find('.therapist_names').append(opt_tag);
},
error: function () {
}
});
});
// This block of JQuery code addresses SELECT tag group #9.
$(document).on('change', '.wc_types', function () {
var wc_brand_id = $(this).val();
var div = $(this).parent();
var opt_tag = " ";
$.ajax({
type: 'get',
url: '{!!URL::to('findInpatientWcModels')!!}',
data: {'id': wc_brand_id},
success: function (data) {
console.log('success');
console.log(data);
console.log(data.length);
opt_tag += '<option value="0" selected disabled>Select Wheelchair Model</option>';
for (var i = 0; i < data.length; i++) {
opt_tag += '<option value="' + data[i].id + '">' + data[i].inpatient_wc_model + '</option>';
}
div.find('.inpatient_wc_model').html(" ");
div.find('.inpatient_wc_model').append(opt_tag);
},
error: function () {
}
});
});
// This block of JQuery code addresses SELECT tag group #10.
$(document).on('change', '.inpatient_wc_model', function () {
var wc_model_id = $(this).val();
var div = $(this).parent();
var opt_tag = " ";
$.ajax({
type: 'get',
url: '{!!URL::to('findInpatientWcBrands')!!}',
data: {'id': wc_model_id},
success: function (data) {
console.log('success');
console.log(data);
console.log(data.length);
opt_tag += '<option value="0" selected disabled>Select Wheelchair Brand</option>';
for (var i = 0; i < data.length; i++) {
opt_tag += '<option value="' + data[i].id + '">' + data[i].inpatient_wc_brand + '</option>';
}
div.find('.inpatient_wc_brand').html(" ");
div.find('.inpatient_wc_brand').append(opt_tag);
},
error: function () {
}
});
});
});
</script>
</body>
</html>
And here is the TestController.php :
<?php
namespace App\Http\Controllers;
use App\ArmrestType;
use App\CushionDimension;
use App\CushionType;
use App\Gender;
use App\InpatientDiagnosis;
use App\InpatientWcBrand;
use App\InpatientWcModel;
use App\TherapistName;
use App\TherapistTitle;
use App\WheelchairBack;
use App\WheelchairDimension;
use App\WheelchairHeight;
use App\WheelchairType;
use Illuminate\Http\Request;
use App\PatientName;
use App\Room;
use App\Unit;
class TestController extends Controller {
// TestController - API Function
public function index() {
// This variable controls the Units Select Field #1
$units=Unit::all();//get data from table.
// This variable controls the Therapist Title Select Field #6
$therapist_title=TherapistTitle::all();//get data from table.
// This variable controls the Wheelchair Types Select Field #8
$wc_types=WheelchairType::all();//get data from table.
// This variable controls the Rooms Select Field #11
$wc_dimensions=WheelchairDimension::all();//get data from table.
// This variable controls the Rooms Select Field #12
$wc_heights=WheelchairHeight::all();//get data from table.
// This variable controls the Rooms Select Field #13
$wc_back_type=WheelchairBack::all();//get data from table.
// This variable controls the Rooms Select Field #14
$cushion_types=CushionType::all();//get data from table.
// This variable controls the Rooms Select Field #15
$cushion_dimensions=CushionDimension::all();//get data from table.
// This variable controls the Rooms Select Field #16
$armrest_types=ArmrestType::all();//get data from table.
return view('testview', compact('units', 'therapist_title', 'wc_types', 'wc_dimensions', 'wc_heights',
'wc_back_type', 'cushion_types','cushion_dimensions', 'armrest_types' )); //sent data to view
}
public function findPatientName(Request $request) {
// This variable controls the Patient Name Select Field #2
$inpatients = PatientName::select('patient_name','id')->where('unit_id',$request->id)->take(100)->get();
return response()->json($inpatients); // Then sent this data to ajax success.
}
public function findRoom(Request $request) {
// This variable controls the Rooms Select Field #3
$rooms = Room::select('room','id')->where('inpatient_id',$request->id)->take(100)->get();
return response()->json($rooms); // Then sent this data to ajax success.
}
public function findGender(Request $request) {
// This variable controls the Gender Select Field #4
$gender = Gender::select('gender','id')->where('room_id',$request->id)->take(100)->get();
return response()->json($gender); // Then sent this data to ajax success.
}
public function findDiagnosis(Request $request) {
// This variable controls the Diagnosis Select Field #5
$diagnosis = InpatientDiagnosis::select('diagnosis_abbreviation','id')->where('gender_id',$request->id)->take(100)->get();
return response()->json($diagnosis); // Then sent this data to ajax success.
}
public function findTherapistNames(Request $request) {
// This variable controls the Rooms Select Field #7
$therapist_names = TherapistName::select('therapist_names','id')->where('title_id',$request->id)->take(100)->get();
return response()->json($therapist_names); // Then sent this data to ajax success.
}
public function findInpatientWcModels(Request $request){
// This variable controls the Rooms Select Field #9
$wc_models = InpatientWcModel::select('inpatient_wc_model','id')->where('inpatient_wc_type_id',$request->id)->take(100)->get();
return response()->json($wc_models); // Then sent this data to ajax success.
}
public function findInpatientWcBrands(Request $request){
// This variable controls the Rooms Select Field #10
$wc_brands = InpatientWcBrand::select('inpatient_wc_brand','id')->where('wc_model_id',$request->id)->take(100)->get();
return response()->json($wc_brands); // Then sent this data to ajax success.
}
}
And here are the routes in web.php :
// API Test 2 - working.
Route::get('testview','TestController@index'); // Opens Form View
Route::get('findPatientName','TestController@findPatientName'); // Route to controller that handles SELECT tag #2
Route::get('findRoom','TestController@findRoom'); // Route to controller that handles SELECT tag #3
Route::get('findGender','TestController@findGender'); // Route to controller that handles SELECT tag #4
Route::get('findDiagnosis','TestController@findDiagnosis'); // Route to controller that handles SELECT tag #5
Route::get('findTherapistNames','TestController@findTherapistNames'); // Route to controller that handles SELECT tag #7
Route::get('findInpatientWcModels','TestController@findInpatientWcModels'); // Route to controller that handles SELECT tag #9
Route::get('findInpatientWcBrands','TestController@findInpatientWcBrands'); // Route to controller that handles SELECT tag #10
Last updated
7 years ago.
Well, I don't know if it makes a difference, but in your TestController file, you have an extra declaration:
use App\InpatientWcModel;
After that, your two index() functions are practically the same.
So my questions now are:
-
(If this is an auth issue) If the only difference (as you say) is that TestController doesn't have $this->middleware('auth'), why not put $this->middleware('auth') in the test file and see what happens?
-
(If this is a database issue) How is your App\Unit coded? Does it return everything with ::all()? Can you make another controller by itself and see if it'll spit anything out? can you
print_r($units)in your controller to see if anything comes out? -
Taking a look at the Laravel Documentation on Auth, I think you either do the middleware either at the routing or at the controller. You don't have to do it at both. But I don't think that should have any effect on retreiving things from the database.
Hope that helps.
Well, An update to this is that I have it working to a degree... so I got the @foreach working. But now, I believe it's a JQuery issue because if I console log the code, it's displaying the appropriate dynamically loaded array, but it's not displaying the results in the <option> field.
I have a couple questions regarding the JQuery/HTML code? Does having multiple classes on an element effect calling one particular class with JQuery?
VisionsIC said:
I have a couple questions regarding the JQuery/HTML code? Does having multiple classes on an element effect calling one particular class with JQuery?
Well, this is the laravel forum. I don't really use jQuery myself. Maybe a jQuery forum would be able to help you better?
Sign in to participate in this thread!
Laravel
Laravel News
Laracasts
Laravel Podcast