Postingan lainnya
Kelas Premium!
Belajar Javascript untuk website
Gunakan kupon "mulaijs" untuk diskon 75 ribu!
update record table tanpa reload/refresh page part II
maaf pada postingan sebelumnya ternyata belum terselesaikan masalahnya. Jadi saat tekan tombol +/- otomatis update ke db tanpa reload page sudah berhasil, namun ketika jumlah row ada 2 atau lebih tombol +/- nya tidak mau update.. jadi hanya yg baris pertama..
cart.php : berupa tabel
<td>
<form method="post" action="cart-update.php">
<input type="text" name="cart_id" value="<?php echo $row['cart_id']?>"></input>
<input type="text" name="item_id" value="<?php echo $row['item_id']?>"></input>
<input type="text" name="id" value="<?php echo $row['cdid']?>"></input>
<center>
<button type="submit" class="qtyminus"name="minus" onclick="minusqty()">-</button>
<input type="text" name="quantity" class="qty" value="<?php echo $row['qty']?>">
<button type="submit" class="qtyplus" name="plus" onclick="plusqty()">+</button>
</center>
</form>
</td>
//javascript dibawah ini
//update otomatis ketika tekan tombol -
<script type="text/javascript">
function minusqty() {
var quantityVal2 = $("input[name='quantity']").val();
var qtyVal2 = quantityVal2-1;
var idVal2 = $("input[name='id']").val();
var itemidVal2 = $("input[name='item_id']").val();
var cartidVal2 = $("input[name='cart_id']").val();
$.ajax({
url: 'cart-update.php',
method: 'GET',
data: {qty: qtyVal2, item_id: itemidVal2, id: idVal2, cart_id: cartidVal2 },
cache: false,
dataType: 'html',
success: function(data) {
},
});
}
</script>
//update otomatis ketika tekan tombol +
<script type="text/javascript">
function plusqty() {
var quantityVal2 = $("input[name='quantity']").val();
var qtyVal2 = quantityVal2-(-1);
var idVal2 = $("input[name='id']").val();
var itemidVal2 = $("input[name='item_id']").val();
var cartidVal2 = $("input[name='cart_id']").val();
$.ajax({
url: 'cart-update.php',
method: 'GET',
data: {qty: qtyVal2, item_id: itemidVal2, id: idVal2, cart_id: cartidVal2 },
cache: false,
dataType: 'html',
success: function(data) {
},
});
}
</script>
jadi hanya yg baris pertama yg mau update, yg baris kedua / ketiga tidak mau update saat tekan tombol +/- . Bagaimana agar terupdate ?
10 Jawaban:
di javascriptnya nama function nya bedain jangan plusqty semua
@Nandar maaf saya belum diganti.. bukan itu masalahnya.. jadi yg var quantityVal = $("input[name='quantity']").val(); dan yang lainnya hanya membaca row pertama, jika lebih dari 1 row.. row kedua ketiga dst tidak terupdate
udah coba buat ganti salah satu plusqty jadi minusqty?
@nandar sudah... script javascript dan ajax diatas sudah betul bisa update +/- cuman jika cart nya lebih dari 1 baris, hanya baris pertamanya saja yg mau terupdate.. baris kedua dan seterusnya tidak mau.. saya fikir salahnya disini : var quantityVal = $("input[name='quantity']").val(); karena saat saya alert quantityVal dapet angka 4 yg otomatis kebacanya baris pertama.. bagaimana biar bisa update yg baris ke2 dst
Bro, perbaris id/name element udah beda ?
contoh
cart_id1, item_id1, quantity1, $("input[name='quantity1']").val(); (utk baris 1),
cart_id2, item_id2, quantity2, $("input[name='quantity2']").val(); (utk baris 2)
@mltobing saya pake pengulangan untuk tabelnya
<table>
<thead>
<tr>
<th>Product</th>
<th>Description</th>
<th>Availability</th>
<th>Unit Price</th>
<th>Qty</th>
<th>Total</th>
</tr>
</thead>
<?php
$querytampil = mysqli_query($conn,"SELECT * FROM cart_order");
if(mysqli_num_rows($querytampil)>0){
while($row=mysqli_fetch_array($querytampil)){
?>
<tbody>
<tr>
<td><?php echo $row['filename']?></td>
<td><?php echo $row['des']?></td>
<td><?php echo $row['stok']?></td>
<td><?php echo $row['price']?></td>
<td>
<form method="post" action="cart-update.php">
<input type="text" name="cart_id" value="<?php echo $row['cart_id']?>" style="display:none;">
<input type="text" name="item_id" value="<?php echo $row['item_id']?>" style="display:none;">
<input type="text" name="id" value="<?php echo $row['cdid']?>" style="display:none;">
<center>
<button type="submit" class="qtyminus" field="quantity" name="minus" onclick="minusqty(event)">-</button>
<input type="text" name="quantity" class="qty" value="<?php echo $row['qty']?>">
<button type="submit" class="qtyplus" field="quantity" name="plus" onclick="plusqty(event)">+</button>
</center>
</form>
</td>
<td><?php echo $row['total']?></td>
</tr>
</tdbody>
<?php
}}
?>
</table>
Namenya sama semua ya, $("input[name='quantity']").val().
Berarti kalo total record 40. $("input[name='quantity']").val() juga ada 40.
Itukan selector, nanti milih yang mana satu kalo namenya sama semua. Setahu saya di 1 page ga boleh ada name yg sama. atau minimal ada yg membedakan antara baris satu dengan yang lain
Jawaban Terpilih
Masalah di atas adalah karena gak ada selector unik untuk tag input yang akan diambil valuenya. Betul kata bro @mltobing. Jadi harus dibuat selector uniknya. Untuk ini kita bisa buat trik untuk ngakalin. Nah, untuk generate row di tabel udah pake while loop. Saat looping, kita bisa tambahkan selektor unik pada tag-tag input tersebut dengan custom atribut data-*(lihat [link]https://www.w3schools.com/tags/att_global_data.asp[/link]).
Kali ini custom data attribbute-nya ane kasih nama data-quantity-id. Atribut data-quantity-id ini yang akan dijadikan selektor. Nah, karena data-quantity-id adalah selektor, maka value-nya juga harus unik. Setelah ane amati, value dari <?= $row['cdid'] ?> (<?= ?> versi pendek dari <?php echo ?>) bisa dipake.
Trus, penempatannya gimana? Atribut data-quantity-id ini akan ditempatkan pada tiap tag <input>.
Biar lebih jelas langsung ane kasih contoh.
<input type="hidden" name="cart_id" value="<?php echo $row['cart_id']?>" data-quantity-id="<?= $row['cdid'] ?>">
<input type="hidden" name="item_id" value="<?php echo $row['item_id']?>" data-quantity-id="<?= $row['cdid'] ?>">
<input type="hidden" name="id" value="<?php echo $row['cdid']?>" data-quantity-id="<?= $row['cdid'] ?>">
Saran: Sebaiknya <input type="text"> diganti <input type="hidden"> aja gan karena <input type="hidden"> secara default CSS-nya udah `display: none`. Daripada nambahin atribut style di tiap tag input.
Trus, kita perlu modifikasi function plusqty() dan minusqty() di Javascript-nya. Kedua function tersebut perlu kita tambahkan parameter-nya. Parameter yang ditambahkan adalah value dari atribut data-quantity-id tadi. Sehingga implementasi kedua function tadi menjadi plusqty(var id) dan minusqty(var id).
Gimana cara ngedapetin value dari atribut data-quantity-id yang banyak tadi? Caranya mudah. Pada atribut onclick di masing-masing button plus (+) dan minus (-) kita kasih value berupa function plusqty() atau minusqty(). Tapi jangan lupa kalo kedua function Javascript itu butuh parameter. Jadi plusqty() menjadi plusqty(<?=$row[''cdid]?>) dan minusqty menjadi minusqty(<?=$row[''cdid]?>).
Begini code snippet-nya gan.
<button type="submit" class="qtyminus" field="quantity" name="minus" onclick="minusqty(<?=$row['cdid']?>)">-</button>
<button type="submit" class="qtyplus" field="quantity" name="plus" onclick="plusqty(<?=$row['cdid']?>)">+</button>
Yang terakhir adalah modifikasi function javascript-nya.
<script>
// minusqty
function minusqty(var id) {
var quantityVal2 = $("input[name='quantity'][data-quantity-id='"+id+"']").val();
var qtyVal2 = quantityVal2-1;
var idVal2 = $("input[name='id'][data-quantity-id='"+id+"']").val();
var itemidVal2 = $("input[name='item_id'][data-quantity-id='"+id+"']").val();
var cartidVal2 = $("input[name='cart_id'][data-quantity-id='"+id+"']").val();
//...
}
// plusqty
function plusqty(var id) {
var quantityVal2 = $("input[name='quantity'][data-quantity-id='"+id+"']").val();
var qtyVal2 = quantityVal2-(-1);
var idVal2 = $("input[name='id'][data-quantity-id='"+id+"']").val();
var itemidVal2 = $("input[name='item_id'][data-quantity-id='"+id+"']").val();
var cartidVal2 = $("input[name='cart_id'][data-quantity-id='"+id+"']").val();
//...
}
</script>
Semoga bisa membantu.
@fathy terimakasih.. oke sudah terselesaikan.. terimakasih