Блог

У меня есть 2 таблицы, склад и категория товаров, я хочу показать свою таблицу в окне выбора опции ajax. Мне удалось отобразить категорию элемента выбора опции.

Мой Код Ajax

 $(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>'
                );
            }
        });
        
      });
 

как мне получить хранилище данных ? должен ли я создать 2 URL-адреса для получения товаров категории и склада? могу ли я сделать 2 URL-адреса?

почему вы не объединяете склад и категорию товаров в 1 URL-адрес ajax

Пример /admin-master/get_item_category_and_warehouse

и в контроллере

 return response([
  'item_categories' => $itemCategory,
  'warehouse' => $warehouse,
]);
 

и функция успеха ajax

 success:function(res){
  let item_categories = res.item_categories,
      warehouse = res.warehouse;
  // process options
}
 

У каждого <option> есть значение идентификатора из таблицы категорий, это вам подсказывает?

Сначала вы должны определить взаимосвязь между ними (категории таблиц и Склад) в модели. (Один — ко многим)

Затем вам нужно создать 2 функции в вашем контроллере, первая функция для получения всех данных категории, а последняя-это таблица хранилища фильтров с идентификатором категории.

Пример:

функция получения данных таблицы категорий

public function getCategories(){
$category = CategoryModel::getAll();
return response()->json('data'=> $category);
}

функция фильтрации склада по идентификатору (из таблицы категорий)/пример

public function filterWarehouse($id){
// using Eloquent or QueryBuilder to find all Warehouse data by $id (Categories table)
return response()->json($wareHouseDataById);
}

Затем, по вашему мнению, вам нужно вызвать ajax, чтобы получить данные всех категорий (независимо от имени вашего маршрута, которое вы определили для вызова двух функций выше ) и заполнить данные категорий в свой <option> тег. Готов добавить onclick фильтр событий для каждой опции.

 <option value='  data.data.id  ' onclick="getWarehouseFilter(data.data.id)">'  data.data.name '</option>
 

И последнее задание-создать новую функцию javascript и вызвать другой ajax для получения данных хранилища (вторая функция). (для события onclick)

Пример ajax-фильтра вызовов данных хранилища:

function getWarehouseFilter(id){
let id = $(this).attr(id);
или
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
}
})
}

Я надеюсь, что вам в этом помогут.