So I have tried auto populated dropdown in Laravel. I'm on the half way to complete this, I think so.. So basically I have 3 select dropdown list which is dependent on the first dropdown. the second dropdown list is return as expected, but the other one / the third dropdown is returned undefined list. I haven't find the solution or any clue to fix this. I hope I get the appropriate hints or directions to solve this. Thank You
Here's my dropdown in View
<div >
<label for="nm_cust" >Nama Customer</label>
<div >
<select name="nm_cust" id="nm_cust" required>
<option value="">Pilih</option>
@foreach ($customer['data'] as $cust)
<option value="{{ $cust->nm_cust }}">{{ $cust->nm_cust }}
</option>
@endforeach
</select>
</div>
</div>
<div >
<label for="alamat" >Alamat</label>
<div >
<select name="alamat" id="alamat" required>
<option value="">Pilih</option>
</select>
</div>
</div>
<div >
<label for="no_psn" >Nomor Pemesanan</label>
<div >
<select name="no_psn" id="no_psn" required>
<option value="">Pilih</option>
</select>
</div>
</div>
and this is my controller
public function index()
{
$customer['data'] = Customer::orderby("nm_cust","ASC")
->select('nm_cust','alamat')
->get();
$barang = \App\Barang::All();
$pemesanan['data'] = Pemesanan::orderby("nm_cust","ASC")
->select('nm_cust','no_psn')
->get();
// $temp_kirim = Temp_pengiriman::All();
//No otomatis untuk transaksi pengiriman
$AWAL = 'DLV';
$bulanRomawi = array("", "1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12");
$noUrutAkhir = \App\Pengiriman::max('no_kirim');
$no = 1;
$no_kirim = sprintf("s", abs((int)$noUrutAkhir 1)) . '/' . $AWAL . '/' . $bulanRomawi[date('n')] . '/' . date('Y');
$pengiriman = Pengiriman::orderBy('no_kirim', 'DESC')->paginate(5);
return view('pengiriman.pengiriman',
[
'no_kirim' => $no_kirim,
'customer' => $customer,
'barang' => $barang,
'pemesanan' => $pemesanan,
// 'temp_kirim' => $temp_kirim,
'pengiriman' => $pengiriman
]
);
}
public function getCustomer($nm_cust="")
{
$custData['data'] = Customer::orderby("nm_cust","ASC")
->select('nm_cust','alamat')
->where('nm_cust',$nm_cust)
->get();
return response()->json($custData);
}
public function getNoPsn($nm_cust="")
{
$noPsnData['data'] = Pemesanan::orderby("nm_cust","ASC")
->select('nm_cust','no_psn')
->where('nm_cust',$nm_cust)
->get();
return response()->json($noPsnData);
}
and this is my AJAX to get the dropdown list
<script type='text/javascript'>
$(document).ready(function() {
// Department Change
$('#nm_cust').change(function() {
// Department id
var nm_cust = $(this).val();
// Empty the dropdown
$('#alamat').find('option').not(':first').remove();
// AJAX request
$.ajax({
url: 'pengiriman/' nm_cust,
type: 'get',
dataType: 'json',
success: function(response) {
var len = 0;
if (response['data'] != null) {
len = response['data'].length;
}
if (len > 0) {
// Read data and create <option >
for (var i = 0; i < len; i ) {
var nm_cust = response['data'][i].nm_cust;
var alamat = response['data'][i].alamat;
var option = "<option value='" alamat "'>" alamat
"</option>";
$("#alamat").append(option);
}
}
}
});
});
});
$(document).ready(function() {
// Department Change
$('#nm_cust').change(function() {
// Department id
var alamat = $(this).val();
// Empty the dropdown
$('#no_psn').find('option').not(':first').remove();
// AJAX request
$.ajax({
url: 'pengiriman/' alamat,
type: 'get',
dataType: 'json',
success: function(response) {
var len = 0;
if (response['data'] != null) {
len = response['data'].length;
}
if (len > 0) {
// Read data and create <option >
for (var i = 0; i < len; i ) {
var alamat = response['data'][i].nm_cust;
var no_psn = response['data'][i].no_psn;
var option = "<option value='" no_psn "'>" no_psn
"</option>";
$("#no_psn").append(option);
}
}
}
});
});
});
</script>
I put that script in the views. Please help me solve this problem or give any clue to fix this.
// I forgot my route to put into this section sorry guys
And this is my routes. so I just change parameter on 3rd route below, which is name('pengiriman.getNoPsn), to /{alamat} depends on my AJAX but still no effect.
//pengiriman
Route::get('/pengiriman', 'PengirimanController@index')->name('pengiriman.pengiriman')->middleware('role:Marketing');
Route::get('/pengiriman/{nm_cust}', 'PengirimanController@getCustomer')->name('pengiriman.getCustomer')->middleware('role:Marketing');
Route::get('/pengiriman/{nm_cust}', 'PengirimanController@getNoPsn')->name('pengiriman.getNoPsn')->middleware('role:Marketing');
CodePudding user response：
You don't need to call the nm_cust selector twice to get 2nd and 3rd dropdown result. As 2nd and 3rd both dropdown result depending on the num_cust selector, so you can keep both under same action. And also ensure that the AJAX URL are correct for both dropdown individually.
UPDATE:
Minimize code from your given scenario, as you have issues starting from route to controller to AJAX request. Please Follow the below steps.
Add this route in your route file.
Route::get('/pengiriman/psn-cust', 'PengirimanController@getNoPsnAndCustomer')->name('pengiriman.psn-cust')->middleware('role:Marketing');
Add this function in your controller file and don not forget to use Illuminate\Http\Request class top of your controller file.
public function getNoPsnAndCustomer(Request $request) {
$nm_id = $request->id;
$custData = Customer::orderby("nm_cust","ASC")
->select('nm_cust','alamat')
->where('nm_cust',$nm_id)
->get();
$noPsnData = Pemesanan::orderby("nm_cust","ASC")
->select('nm_cust','no_psn')
->where('nm_cust',$nm_id)
->get();
return response()->json(["nm_psn" => $noPsnData, "nm_cust" => $custData]);
}
And use this script
<script>
$(document).ready(function() {
$('#nm_cust').change(function() {
var nm_id = $(this).val();
let link = `{{ url('pengiriman/psn-cust')}}`
$('#alamat').find('option').not(':first').remove();
$('#no_psn').find('option').not(':first').remove();
$.ajax({
url: link,
type: 'GET',
data: {id: nm_id},
dataType: 'json',
success: function(response) {
if(response.nm_psn.length > 0) {
let len = response.nm_psn.length;
for (let i = 0; i < len; i ) {
let nm_cust = response.nm_psn[i].nm_cust;
let alamat = response.nm_psn[i].alamat;
let option = "<option value='" alamat "'>" alamat
"</option>";
$("#alamat").append(option);
}
}
if(response.nm_cust.length > 0) {
let len = response.nm_cust.length;
for (let i = 0; i < len; i ) {
let nm_cust = response.nm_cust[i].nm_cust;
let alamat = response.nm_cust[i].alamat;
let option = "<option value='" alamat "'>" alamat
"</option>";
$("#no_psn").append(option);
}
}
}
});
})
});
</script>