Question 69990 in Ajax Question posted in
You can find the official documentation here.

How to use 2 url in 1 function ajax – Jquery ajax

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?

Tags:

2

Answers


  1. 0

    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
}
    Login or Signup to reply.
  2. 0

    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.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search