I have 2 table, warehouse and item category, i wanna show my table in select option ajax. I managed to display select option item category.
My Ajax Code
$(function () {
var i = 0;
$("#add-more-item").click(function () {
++i;
$.ajax({
type:"GET",
url:"/admin-master/get_item_category",
dataType: 'JSON',
success:function(res){
let option = "";
$.each(res,function(itemcategory_name,id_item_category){
option += '<option value='+id_item_category+'>'+ itemcategory_name+ '</option>'
});
$(".add-more").append(
'<tr><td><select class="form-control" id="warehouse"></select</td>
<td><input type="text" name="item_code['+i+']" class="form-control" placeholder="Kode Barang" required></td>
<td><select class="form-control" name="itemcategory_id['+i+']"><option>-- Pilih Ketegori --</option>'+option+'</select></td>
<td><input type="text" name="item_name['+i+']" class="form-control" placeholder="Nama Barang" required</td>
<td><input type="text" name="item_weight[]" class="form-control" placeholder="Contoh : 200 kg" required></td>
<td><input type="text" name="item_height[]" class="form-control" placeholder="Contoh : 200 cm" required></td>
<td><input type="number" name="item_qty[]" class="form-control" placeholder="Contoh : 200 " required></td>
<td><input type="text" name="description[]" class="form-control" placeholder="Keterangan Barang"></td>
<td align="center"><button type="button" class="remove-item btn btn-danger btn-md"><i class="fas fa-trash-alt"></i></a></td></tr>'
);
}
});
});
how do i retrieve the data warehouse ? should i create 2 urls to fetch category and warehouse items? can i make 2 urls?
why you not combine warehouse and item category to 1 url ajax
Example /admin-master/get_item_category_and_warehouse
and in controller
return response([
'item_categories' => $itemCategory,
'warehouse' => $warehouse,
]);
and ajax success function
success:function(res){
let item_categories = res.item_categories,
warehouse = res.warehouse;
// process options
}
Each <option> have an id value from Categories table, is that suggest you?
First you have to define relationship between them (table Categories and Warehouse) on Model. (One- to many)
Then you have to create 2 function into your controller, the first function to get all Category data, and the last one is filter Warehouse table with id of Category.
Example:
function get Categories table data
public function getCategories(){
$category = CategoryModel::getAll();
return response()->json('data'=> $category);
}
function filter Warehouse by id (of Categories table)/example
public function filterWarehouse($id){
// using Eloquent or QueryBuilder to find all Warehouse data by $id (Categories table)
return response()->json($wareHouseDataById);
}
Then, in your view, you have to call an ajax to get all Categories Data (whatever your route name that you defined to call two function above ) and fill Categories data into your <option> tag. Ready to add onclick event filter each option.
<option value='+ data.data.id +' onclick="getWarehouseFilter(data.data.id)">'+ data.data.name+'</option>
And the last job is make new javascript function and call another ajax to get Warehouse data (second function). (in purpose onclick event)
Example ajax call filter warehouse data:
function getWarehouseFilter(id){
let id = $(this).attr(id);
or
let id = $(this).target.value;
$.ajax({
url: '/getFilterWarehouseData....',
method: 'post',
data: {id: id},
dataType: 'json',
success: function(data){
$('#htmlNeedToRenderData').html(rawHtml(your custom) + data )
// do not use append() in this case.
},
error: function(response){
// do whatever if got an error
}
})
}
I hope this will be helped u.