Postingan lainnya
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
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
@lamAN terima kasih jawabannya gan Tapi boleh saya minta contoh code yg bisa saya pelajari hehehe
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