Gimana cara send data pada laravel menggunakan ajax dan modal dialog bootstraap

jadi disini saya punya tabel mahasiswa yang berisikan data(nama,nim,no_hp,alamat,dll) saya membuat tombol button detail yang akan menuju ke Modal form dialog bootstraap yg berisikan semua data didalam tabel mahasiswa. disini saya punya banyak data mahasiswa.

gimana cara agar setiap saya mengklik detail button pada salah satu data mahasiswa, maka pada Modal form dialog akan terisi otomatis data dari mahasiswa yang saya klik tadi

avatar Saidfarhan
@Saidfarhan

5 Kontribusi 0 Poin

Diperbarui 5 tahun yang lalu

4 Jawaban:

klo saya pake data-(nama attribut), yang dimana itu ada pada suatu button yg ngetrigger modal nya, terus dikasih event onclick untuk memasukkan data dari data- ke modal (sesuai id yang dibutuhkan)

Konsepnya begitu, maaf ga lampirkan koding

avatar codingforbabies
@codingforbabies

159 Kontribusi 53 Poin

Dipost 5 tahun yang lalu

@lamAN terima kasih jawabannya gan Tapi boleh saya minta contoh code yg bisa saya pelajari hehehe

avatar Saidfarhan
@Saidfarhan

5 Kontribusi 0 Poin

Dipost 5 tahun yang lalu

Jawaban Terpilih

Ini kode tampilan


<table id="absensi" class="table table-bordred table-striped">
                                <thead>
                                    <tr>
                                        <th colspan="4">
                                            <input type="text" name="search" class="form-control" placeholder="Cari...">
                                        </th>
                                        <th>
                                            <select class="form-control kelas search">
                                                <option value="">--PILIH TINGKAT KELAS--</option>
                                                <option>X</option>
                                                <option>XI</option>
                                                <option>XII</option>
                                            </select>
                                        </th>
                                        <th>
                                            <select class="form-control jk search">
                                                <option value="">--PILIH JENIS KELAMIN--</option>
                                                <option value="L">Laki-Laki</option>
                                                <option value="P">Perempuan</option>
                                            </select>
                                        </th>
                                    </tr>
                                    <tr>
                                        <th width="10px"><input type="checkbox" id="checkall" /> </th>
                                        <th width="10px" class="text-center">No</th>
                                        <th>NIS</th>
                                        <th>Nama Siswa</th>
                                        <th class="text-center">Tingkat Kelas</th>
                                        <th class="text-center">Jenis Kelamin</th>
                                        <th width="5%" colspan="2" class="text-center">Aksi</th>
                                    </tr>
                                </thead>
                                <tbody id="isi">
                                    @foreach ($resource as $index => $res)
                                    <tr>
                                        <td><input type="checkbox" class="checkthis" /></td>
                                        <td class="text-center">{{ $index+1 }}</td>
                                        <td>{{ $res->nis}}</td>
                                        <td><a href="/siswa/{{$res->id_siswa}}"> {{ $res->nama}}</a></td>
                                        <td class="text-center">{{ $res->tingkat_kelas}}</td>
                                        <td class="text-center">@if($res->jenis_kelamin=="L"){{ "Laki-Laki" }}@else{{ "Perempuan" }}@endif</td>
                                        <td class="text-center"><p data-placement="top" data-toggle="tooltip" title="Edit"><button data-aksi="siswa" data-nama="{{$res->nama}}" data-id="{{$res->id_siswa}}" data-status="{{$res->status}}" data-jk="{{$res->jenis_kelamin}}" data-tk="{{$res->tingkat_kelas}}" data-nis="{{$res->nis}}" class="edit-button btn btn-primary btn-xs" data-title="Edit" data-toggle="modal" data-target="#edit" ><span class="glyphicon glyphicon-pencil"></span></button></p></td>
                                        <td class="text-center"><p data-placement="top" data-toggle="tooltip" title="Delete"><button data-aksi="siswa" data-id="{{$res->id_siswa}}" class="delete-button btn btn-danger btn-xs" data-title="Delete" data-toggle="modal" data-target="#delete"><span class="glyphicon glyphicon-trash"></span></button></p></td>
                                    </tr>
                                    @endforeach
                                </tbody>
                            </table>

adapun js nya


$(".edit-button").click(function(){
    if($(this).data('aksi')=="kelas"){
        $('#id').val($(this).data('id'));
        $('#jurusan').val($(this).data('jurusan'));
        $('#tingkat_kelas').val($(this).data('tingkat'));
        $('#nama_kelas').val($(this).data('nama'));
        $('#kuota').val($(this).data('kuota'));
        $('#tahun_masuk').val($(this).data('tahunmasuk'));
        $('#tahun_keluar').val($(this).data('tahunkeluar'));
        $('#title-modal').html($(this).data('tingkat') + "-" + $(this).data('jurusan') + " " + $(this).data('nama'));
    }else if($(this).data('aksi')=="siswa"){
        $('#id').val($(this).data('id'));
        $('#nama_siswa').val($(this).data('nama'));
        $('#nis').val($(this).data('nis'));
        $('#jk').val($(this).data('jk'));
        $('#tk').val($(this).data('tk'));
        if($(this).data('status')=="Aktif"){
            $("#aktif").attr("checked", true);
        }else{
            $("#tidak_aktif").attr("checked", true);
        }
    }else if($(this).data('aksi')=="guru"){
        $('#id').val($(this).data('id'));
        $('#nama').val($(this).data('nama'));
        $('#nip').val($(this).data('nip'));
        $('#jk').val($(this).data('jk'));
        if($(this).data('status')=="Aktif"){
            $("#aktif").attr("checked", true);
        }else{
            $("#tidak_aktif").attr("checked", true);
        }
    }
});
$('.delete-button').click(function(){
    var id = $(this).data('id');
    $("#delete-form").attr("action", "/" + $(this).data('aksi') + "/delete/" + id);
})
$('input[name="tahun_masuk"]').change(function(){
    var tahun_keluar = parseInt($(this).val()) + 1;
    $('input[name="tahun_keluar"]').val(tahun_keluar);
    $('input[name="tahun_kel"]').val(tahun_keluar);
})

preview nya

avatar codingforbabies
@codingforbabies

159 Kontribusi 53 Poin

Dipost 5 tahun yang lalu

Terima kasih banyak kang @lamAn

avatar Saidfarhan
@Saidfarhan

5 Kontribusi 0 Poin

Dipost 5 tahun yang lalu

Login untuk ikut Jawaban