Anyone please help me, I Have an project build with Code Igniter 3, So the schematic is : I Have 2 file view, i caled formAdd.php and detail.php and 1 file controller i named is Uangmuka.php
In formAdd.php i use the select option, when the select option change, i send the request with ajax to Uangmuka.php -> method : getDetailSPB, my request is detail data based on id i sent, and the return data in the form of html elements I insert using : $("#table_temp").html(data);
The script is as below :
$('#no_spb').change(function() {
$("#btn-save").addClass("hide");
$("#btn-save-verifikasi").addClass("hide");
var id_spb = $("#no_spb").val();
var acc_dp = $("#no_spb option:selected").data("acc_dp");
var nama_supplier = $("#no_spb option:selected").data("nama_supplier");
// var id_barang = $("#nama_barang_add").data("id_barang");
// alert(acc_dp);
$("#supplier").val(nama_supplier);
$("#uang_muka").val(acc_dp);
$("#uang_muka").select2({
theme: "bootstrap4"
});
// $('#uang_muka option[value="' + acc_dp + '"]').attr("selected", "selected");
$.ajax({
url: '<?= base_url("admin/Uangmuka/getDetailSPB") ?>',
type: 'POST',
data: {
id_spb: id_spb
},
success: function(data) {
$("#table_temp").html(data); //inner HTML to id : table_temp
$("#btn-save").removeClass("hide");
$("#btn-save-verifikasi").removeClass("hide");
}
});
});
In the Controller i get the request like this :
$id_spb = $this->input->post('id_spb');
$detail_spb = $this->Pengadaan_model->getDetailSPBDP($id_spb);
// foreach ($detail_spb as $col) {
// echo $col["nama_barang"] . "<br/>";
// }
$data = [
"detail_spb" => $detail_spb
];
$this->load->view("trx_uang_muka/detail", $data);
The script above successfully displays data based on detail.php into formAdd.php
The script in detail.php is as below :
<!-- Table SPB -->
<div class="col">
<div class="card">
<div class="card-header">
<h6 class="card-title">
Data SPB
</h6>
</div>
<!-- /.card-header -->
<div class="card-body">
<table class="table" id="table-temporary">
<thead>
<tr>
<th style="width: 10px">#</th>
<th>Nama Barang</th>
<th>Qty</th>
<th>Satuan</th>
<th>Aksi</th>
</tr>
</thead>
<tbody>
<?php
$i = 1;
foreach ($detail_spb as $col) : ?>
<tr>
<td><?= $i++; ?></td>
<td><?= $col["nama_barang"]; ?></td>
<td><?= $col["qty"]; ?></td>
<td><?= $col["satuan"]; ?></td>
<td>
<div class="row d-flex justify-content-end align-items-baseline">
<div class="col p-0">
<button type="button" class="btn btn-success btn-sm btn-add" data-id_spb="<?= $col["id_spb"]; ?>" data-no_spb="<?= $col["no_spb"]; ?>" data-id_rab="<?= $col["id_rab"]; ?>" data-id_barang="<?= $col["id_barang"]; ?>" data-nama_barang="<?= $col["nama_barang"]; ?>" data-qty="<?= $col["qty"]; ?>" data-satuan="<?= $col["satuan"]; ?>" data-harga_rab="<?= $col["harga_rab"]; ?>" data-acc_persediaan="<?= $col["acc_persediaan"]; ?>" data-id_supplier="<?= $col["id_supplier"]; ?>" data-nama_supplier="<?= $col["nama_supplier"]; ?>"><i class="fas fa-chevron-right"></i></button>
</div>
</div>
</td>
</tr>
<?php endforeach; ?>
</tbody>
</table>
</div>
</div>
<!-- /.card -->
</div>
<!-- Table uang muka Temporary -->
<div class="col">
<div class="card">
<div class="card-header">
<h6 class="card-title">
Data Uang Muka
</h6>
</div>
<!-- /.card-header -->
<div class="card-body" id="table_uang_muka">
</div>
</div>
<!-- /.card -->
</div>
<div class="modal fade" id="modal_uang_muka" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h1 class="modal-title fs-5" id="exampleModalLabel">Tambah Barang</h1>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div class="row">
<div class="col">
<label for='nama_barang_add'>Nama Barang</label>
<input type='text' name='nama_barang_add' id='nama_barang_add' class='form-control' readonly>
</div>
</div>
<div class="row">
<div class="col">
<label for='qty_add'>Qty</label>
<input type='number' name='qty_add' id='qty_add' class='form-control' placeholder='Qty'>
<span class="hide" id="qty_add_error"><small class="text-danger">Qty Tidak Boleh Kosong</small></span>
</div>
<div class="col">
<label for='satuan_add'>Satuan</label>
<input type='text' name='satuan_add' id='satuan_add' class='form-control' placeholder='Satuan' readonly>
</div>
</div>
<div class="row">
<div class="col">
<label for='harga_rab'>Harga RAB</label>
<input type='text' name='harga_rab_add' id='harga_rab_add' class='form-control' readonly>
</div>
<div class="col">
<label for='harga_inv'>Harga Invoice</label>
<input type='number' name='harga_inv_add' id='harga_inv_add' class='form-control' placeholders='Harga Invoice'>
<span class="hide" id="harga_inv_add_error"><small class="text-danger">Harga Invoice Tidak Boleh Kosong Atau "NOL"</small></span>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary" id="btn-add-modal">Add</button>
</div>
</div>
</div>
</div>
<script>
$(document).ready(function() {
window.data_barang = [];
function delete_spb(index) { //Fungsi delete data barang pada sppb
window.data_barang.splice(index, 1);
var table = '<table class="table table-striped">';
table += '<thead>';
table += '<tr>';
table += '<th>No</th>';
table += '<th>Nama Barang</th>';
table += '<th>Qty</th>';
table += '<th>Satuan</th>';
table += '<th>Harga RAB</th>';
table += '<th>Harga Inv</th>';
table += '<th>Aksi</th>';
table += '</tr>';
table += '</thead>';
table += '<tbody>';
var i = 0;
var index = 0;
window.data_barang.forEach((barang) => {
i++;
table += '<tr>';
table += '<td>' + i + '</td>';
table += '<td>' + barang[2] + '</td>';
table += '<td>' + barang[3] + '</td>';
table += '<td>' + barang[4] + '</td>';
table += '<td>' + barang[5] + '</td>';
table += '<td>' + barang[6] + '</td>';
table += '<td> <button class="btn btn-danger btn-sm delete_sppb" onclick="delete_spb(' + index + ')"><i class="fas fa-trash"></i></button> </td>';
table += '</tr>';
index++;
});
table += '</tbody>';
table += '</table>';
$("#table_uang_muka").html(table);
};
$('.btn-add').click(function() { //Tombol add di table RKBJ
$("#nama_barang_add").removeData("id_barang");
$("#nama_barang_add").removeData("perkiraan");
$("#nama_barang_add").val($(this).data("nama_barang"));
$("#nama_barang_add").data("id_barang", $(this).data("id_barang"));
$("#nama_barang_add").data("perkiraan", $(this).data("acc_persediaan"));
$("#harga_rab_add").val($(this).data("harga_rab"));
$("#harga_inv_add").val($(this).data("harga_rab"));
$("#qty_add").val($(this).data("qty"));
$("#satuan_add").val($(this).data("satuan"));
$("#modal_uang_muka").modal("show");
});
$("#btn-add-modal").click(function() { // Tombol add di Modal
$("#qty_add_error").addClass("hide")
$("harga_inv_add_error").addClass("hide");
var id_barang = $("#nama_barang_add").data("id_barang");
var perkiraan = $("#nama_barang_add").data("perkiraan");
var nama_barang = $("#nama_barang_add").val();
var qty = $("#qty_add").val();
var satuan = $("#satuan_add").val();
var harga_rab = $("#harga_rab_add").val();
var harga_inv = $("#harga_inv_add").val();
// insert(id_barang, id_barang, id_barang, id_barang, id_barang, id_barang, id_barang, id_barang);
if (qty == "" || harga_inv == "" || harga_inv == 0) {
if (qty == "") {
$("#qty_add_error").removeClass("hide");
}
if (harga_inv == "" || harga_inv == 0) {
$("#harga_inv_add_error").removeClass("hide");
}
} else {
window.data_barang.push([id_barang, perkiraan, nama_barang, qty, satuan, harga_rab, harga_inv]);
console.table(window.data_barang);
var table = '<table class="table table-striped">';
table += '<thead>';
table += '<tr>';
table += '<th>No</th>';
table += '<th>Nama Barang</th>';
table += '<th>Qty</th>';
table += '<th>Satuan</th>';
table += '<th>Harga RAB</th>';
table += '<th>Harga Inv</th>';
table += '<th>Aksi</th>';
table += '</tr>';
table += '</thead>';
table += '<tbody>';
var i = 0;
var index = 0;
window.data_barang.forEach((barang) => {
i++;
table += '<tr>';
table += '<td>' + i + '</td>';
table += '<td>' + barang[2] + '</td>';
table += '<td>' + barang[3] + '</td>';
table += '<td>' + barang[4] + '</td>';
table += '<td>' + barang[5] + '</td>';
table += '<td>' + barang[6] + '</td>';
table += '<td> <button class="btn btn-danger btn-sm delete_sppb" onclick="delete_spb(' + index + ')"><i class="fas fa-trash"></i></button> </td>';
table += '</tr>';
index++;
});
table += '</tbody>';
table += '</table>';
$("#table_uang_muka").html(table);
$("#harga_inv_add").val("");
$("#modal_uang_muka").modal("hide");
}
});
});
</script>
In the detail.php script above i append html script to html element caled table_uang_muka, like this:
$("#btn-add-modal").click(function() { // Tombol add di Modal
$("#qty_add_error").addClass("hide")
$("harga_inv_add_error").addClass("hide");
var id_barang = $("#nama_barang_add").data("id_barang");
var perkiraan = $("#nama_barang_add").data("perkiraan");
var nama_barang = $("#nama_barang_add").val();
var qty = $("#qty_add").val();
var satuan = $("#satuan_add").val();
var harga_rab = $("#harga_rab_add").val();
var harga_inv = $("#harga_inv_add").val();
// insert(id_barang, id_barang, id_barang, id_barang, id_barang, id_barang, id_barang, id_barang);
if (qty == "" || harga_inv == "" || harga_inv == 0) {
if (qty == "") {
$("#qty_add_error").removeClass("hide");
}
if (harga_inv == "" || harga_inv == 0) {
$("#harga_inv_add_error").removeClass("hide");
}
} else {
window.data_barang.push([id_barang, perkiraan, nama_barang, qty, satuan, harga_rab, harga_inv]);
console.table(window.data_barang);
var table = '<table class="table table-striped">';
table += '<thead>';
table += '<tr>';
table += '<th>No</th>';
table += '<th>Nama Barang</th>';
table += '<th>Qty</th>';
table += '<th>Satuan</th>';
table += '<th>Harga RAB</th>';
table += '<th>Harga Inv</th>';
table += '<th>Aksi</th>';
table += '</tr>';
table += '</thead>';
table += '<tbody>';
var i = 0;
var index = 0;
window.data_barang.forEach((barang) => {
i++;
table += '<tr>';
table += '<td>' + i + '</td>';
table += '<td>' + barang[2] + '</td>';
table += '<td>' + barang[3] + '</td>';
table += '<td>' + barang[4] + '</td>';
table += '<td>' + barang[5] + '</td>';
table += '<td>' + barang[6] + '</td>';
table += '<td> <button class="btn btn-danger btn-sm delete_sppb" onclick="delete_spb(' + index + ')"><i class="fas fa-trash"></i></button> </td>';
table += '</tr>';
index++;
});
table += '</tbody>';
table += '</table>';
$("#table_uang_muka").html(table);
$("#harga_inv_add").val("");
$("#modal_uang_muka").modal("hide");
}
});
at the $("#btn-add-modal").click(function() {}); above i added a table html to #table_uang_muka, and you can see the following one line of code :
table += '<td> <button class="btn btn-danger btn-sm delete_sppb" onclick="delete_spb(' + index + ')"><i class="fas fa-trash"></i></button> </td>';
i added the td with onclick attribut caled delete_spb(' + index + ') like this :
onclick="delete_spb(' + index + ')"
But the delete_spb function is not working and i get the error : Uncaught ReferenceError: delete_spb is not defined at HTMLButtonElement.onclick (formTambah:1:1)
whereas, i had declared the delete_spb function in my script
Thanks in advance, and I hope someone can help me solve this problem
I Try declared the delete_spb function, but stil not working
