skip to Main Content

I’m completely new to ajax and trying to find a workaround how to complete these scenario since I can’t find any that works for me.

I’m finding a way to populate the dropdown selection using foreach using AJAX. How I’m able to achieve it? I’m completely stuck here. Here’s the AJAX script.

$('#kelompokumur_id').change(function() {
  var id = $(this).val();
    $.ajax({
      url: "{{url('fetch-anak')}}/"+id,
      type: 'get',
      dataType: 'json',
      success: function(response) {
        if(response.success){
          let dataArray = response.data
          $('#data_anak').empty()
          let res = dataArray.map((person, index) => {
          let list = `
              <tr class="btn-reveal-trigger">
                <td>${person.user.name}</td>
                <td></td>
                <td class="text-end">
                  <select class="form-select form-select-sm" aria-label=".form-select-sm example" name="absensi[${person.id}]">
                    <option value="">Pilih Absensi</option>
                    <option value="1">PRESENT</option>
                    <option value="2">PERMIT</option>
                    <option value="3">SICK</option>
                    <option value="4">ALPHA</option>
                  </select>
                </td>
              </tr>
            `;
            $('#data_anak').append(list);
          });

        }
      }
  });
});

And here’s the script that I tried to get the collection,

        return view('anak.absensi._inputabsen', compact('data_ku'));``` 

I tried this method, but it returns null since it’s the closest I can get. Others show errors.

let list = `
              <tr class="btn-reveal-trigger">
                <td>${person.user.name}</td>
                <td></td>
                <td class="text-end">
                  <select class="form-select form-select-sm" aria-label=".form-select-sm example" name="absensi[${person.id}]">`
@foreach($data_ku -> item)
                    <option value="{{$item -> id}}">{{$item -> attendance -> status}</option>
@endforeach
                  `</select>
                </td>
              </tr>
            `;

On controller:

public function create()
    {
        $data_ku = KelompokUmur::all();
        $kabsen = kodeabsensi::all();
        // dd($kabsen->toArray());
        return view('anak.absensi._inputabsen', compact('data_ku', 'kabsen'));
    }

when I dd($data_ku), this returns:

0 => array:6 [▼
    "id" => 1
    "kode_absen" => "AM"
    "nama_absen" => "Anak Malas"
    "keterangan" => "Anak Malas"
    "created_at" => "2023-01-13T17:27:49.000000Z"
    "updated_at" => "2023-01-13T17:27:49.000000Z"
  ]

Any help would be appreciated, thanks!

2

Answers


  1. Chosen as BEST ANSWER

    Use this to get the collection of array in the JS

    var absen = {!! json_encode($kabsen->toArray()) !!}
    

    Then iterate it using $.each method in jQuery

    $.each(absen, function(index, value) {
                          list += `<option value="${value.id}">${value.kode_absen}</option>`;
                        });
                        list += 
    

  2. While in the *.blade.php file you can do something like this. I did it outside of the script tags but you can also perform it inside:

    @php
        $data_ku_item_options = '';
        foreach ($data_ku as $item) {
            $data_ku_item_options .= "<option value="" . $item->id . "">" . $item->attendance->status . "</option>";
        }
    @endphp
    
    <script>
    
    $('#kelompokumur_id').change(function () {
        var id = $(this).val();
        $.ajax({
            url: "{{url('fetch-anak')}}/" + id,
            type: 'get',
            dataType: 'json',
            success: function (response) {
                if (response.success) {
                    let dataArray = response.data
                    $('#data_anak').empty()
                    let res = dataArray.map((person, index) => {
                        var options = "{{ $data_ku_item_options }}";
                        let list = `
                            <tr class="btn-reveal-trigger">
                            <td>${person.user.name}</td>
                            <td></td>
                            <td class="text-end">
                                <select class="form-select form-select-sm" aria-label=".form-select-sm example" name="absensi[${person.id}]">
                                    ${options}
                                </select>
                            </td>
                            </tr>
                        `;
                        $('#data_anak').append(list);
                    });
                }
            }
        });
    });
    
    </script>
    

    And $data_ku = KelompokUmur::all(); change this line to:

    $data_ku = KelompokUmur::with('attendance')->get();
    
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search