Laravel: Auto populate dropdown select with AJAX is returned undefined

Question

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 class="form-group row">
                    <label for="nm_cust" class="col-sm-2 col-form-label">Nama Customer</label>
                    <div class="col-sm-4">
                        <select name="nm_cust" id="nm_cust" class="form-control" required>
                            <option value="">Pilih</option>
                            @foreach ($customer['data'] as $cust)
                                <option value="{{ $cust->nm_cust }}">{{ $cust->nm_cust }}
                                </option>
                            @endforeach
                        </select>
                    </div>
                </div>

                <div class="form-group row">
                    <label for="alamat" class="col-sm-2 col-form-label">Alamat</label>
                    <div class="col-sm-4">
                        <select name="alamat" id="alamat" class="form-control" required>
                            <option value="">Pilih</option>
                        </select>
                    </div>
                </div>

                <div class="form-group row">
                    <label for="no_psn" class="col-sm-2 col-form-label">Nomor Pemesanan</label>
                    <div class="col-sm-4">
                        <select name="no_psn" id="no_psn" class="form-control" 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("%03s", 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');

Md. Amin Hossain · Accepted Answer · 2022-07-20 09:11:52Z

1

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>

edited Jul 20, 2022 at 9:11

answered Jul 18, 2022 at 11:16

Md. Amin Hossain

581 silver badge8 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Muhammad Hidayat Over a year ago

Oh I see.. so just define the other variable tu put into the 3rd dropdown in one selector. but now the undefined just move to the 3rd dropdown and i don't know why. I just followed the instructions you gave. also before I forgot to put my route. Please give me some ways to solve this. thankyou

Md. Amin Hossain Over a year ago

@MuhammadHidayat updated the answer, please have a look. As you have issues starting from Route to AJAX request, so I minimize the code from your scenario for. I hope you'll get the process from updated answer.

Muhammad Hidayat Over a year ago

Hi.. @Amin Hossain, I have tried the code suggestion you provided and it works! the silly things is, the undefined maybe my mistake is on my route, the route is same method and uri. And actually there are still many missed or wrong code before you suggest. Thanks dude I really appreciate it

Collectives™ on Stack Overflow

Laravel: Auto populate dropdown select with AJAX is returned undefined

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related