Данные не обновляются должным образом для динамически создаваемых полей - JQUERY - PullRequest
0 голосов
/ 06 февраля 2020

Данные не обновляются для динамически создаваемых полей.

Я использую Materialize onAutoComplete для динамически создаваемых полей.

Мне удалось показать данные во входных данных.

Когда я выбираю код продукта, данные добавляются к имени продукта и имени продукта. Но когда я добавляю новую строку и выбираю product_code, он обновляет старые product_name и product_qty.

    $(document.body).ready(function(){
//Invoke the Autosearch 
    productFetch();

      var i=1;
        $("#add_row").click(function(e){
            e.preventDefault();
            b=i-1;
            $('#addr'+i).html($('#addr'+b).html());
            $('.tab_logic').append('<tr id="addr'+(i+1)+'"></tr>');
            productFetch();
            i++; 
        });

    function productFetch(){    
    $.ajax({
        type:"GET",
        url: "{{ route('product-fetch') }}",
        success:function(response){
            var productArray = response;
            var productList = {};
            var productListItems = {};
            for (var i = 0; i < productArray.length; i++) {
                productList[productArray[i].product_code] = null;
                productListItems[productArray[i].product_code] = productArray[i];
            }
            $('input.product_code').autocomplete({
          data: productList,
          limit: 15,
          minLength: 3,
          onAutocomplete:function(reqdata){

            debugger;
            var product_name = productListItems[reqdata]['product_name'];
              $(".product_name").val(product_name);//product_name
              $('.price').val(productListItems[reqdata]['regular_price']);//product_qty
          }
        });
        },
                error: function (err) {
                    console.log(err);
                }
        });
    }

HTML

<form method="POST" action="{{route('invoice-create.store')}}" id="formId">
    @csrf
    <div class="row">
        <div class="col s6">
            <img src="{{asset('assets/Say-cure-final-logo.png')}}" style="width:100%; max-width:150px;">
        </div>
        <div class="col s6">
            <p class="right-align">
                Invoice #{{$orderid}} <br> Created: {{Carbon\Carbon::now()->format('M d, Y')}}<br>
                Due:
                {{Carbon\Carbon::now()->format('M d, Y')}}
            </p>
        </div>
    </div>

    <div class="row">
        <div class="col s6">
            <p class="left-align">
                {{env('APP_NAME')}}<br> {{env('COMPANYADDRESS')}}<br> {{env('COMPANYADDRESSLINE')}}
                <br>
                {{env('COMPANYDISTRICT')}}, <br> {{env('COMPANYSTATE')}}, {{env('COMPANYPINCODE')}}
            </p>
        </div>
        <div class="col s6">
            <p class="right-align">
                {{$order_details['order_details']->full_name}}
                <br>{{$order_details['order_details']->address_line_1}}
                <br>{{$order_details['order_details']->land_mark}},{{$order_details['order_details']->area}}
                <br>{{$order_details['order_details']->district}},{{$order_details['order_details']->city}}
                <br>{{$order_details['order_details']->state}},{{$order_details['order_details']->pincode}}
                <br>{{$order_details['order_details']->email}} <br>
                {{$order_details['order_details']->phone_no}}
            </p>
        </div>
    </div>
    <div class="row z-depth-2">
        <div class="col s4">
            <p class="left-align">Last Payment</p>
        </div>
        <div class="col s4">
            <p class="right-align"> {{$order_details->payment_mode}}</p>
        </div>
        <div class="col s4">
            <p class="right-align"> {{$order_details->payment_paidamount}}</p>
        </div>
    </div>
    <div class="row clearfix">
        <div class="col s12">
            <table class="table table-bordered table-hover tab_logic" id="tab_logic">
                <thead>
                    <tr>
                        <th class="text-center"> Product Code </th>
                        <th class="text-center"> Product Name </th>
                        <th class="text-center"> Qty </th>
                        <th class="text-center"> Price </th>
                        <th class="text-center"> IGST </th>
                        <th class="text-center"> GST </th>
                        <th class="text-center"> Total </th>
                    </tr>
                </thead>
                <tbody>
                    <tr id='addr0' class="addr0">
                        <td>
                            <div class="row">
                                <div class="input-field col s12">
                                    <input type="text" id="product_code" name='product_code[]'
                                        class="autocomplete product_code" placeholder="Product Code">
                                </div>
                            </div>
                        </td>
                        <td>
                            <div class="row">
                                <div class="input-field col s12">
                                    <input type="text" id="product_name" name='product_name[]' class="product_name"
                                        placeholder="Product Name" required>
                                </div>
                            </div>
                        </td>
                        <td>
                            <div class="row">
                                <div class="input-field col s12">
                                    <input type="number" id="qty" name='product_qty[]' placeholder='Enter Qty'
                                        class="form-control qty" step="0" min="0" required />
                                </div>
                            </div>

                        </td>
                        <td>
                            <div class="row">
                                <div class="input-field col s12">
                                    <input type="number" id="price" name='price[]' placeholder='Enter Unit Price'
                                        class="form-control price" step="0.00" min="0" required />
                                </div>
                            </div>
                        </td>
                        <td>
                            <div class="row">
                                <div class="input-field col s12">
                                    <input type="number" name='igst[]' placeholder='IGST %' class="form-control igst"
                                        step="0.00" min="0" />
                                </div>
                            </div>
                        </td>
                        <td>
                            <div class="row">
                                <div class="input-field col s12">
                                    <input type="number" name='gst[]' placeholder='GST %' class="form-control gst"
                                        step="0.00" min="0" />
                                </div>
                            </div>
                        </td>
                        <td>
                            <div class="row">
                                <div class="input-field col s12">
                                    <input type="number" name='total[]' placeholder='0.00' class="form-control total"
                                        readonly />
                                </div>
                            </div>

                        </td>
                    </tr>
                    <tr id='addr1' class="addr1"></tr>
                </tbody>
            </table>
        </div>
    </div>
    <div class="row clearfix">
        <div class="col s12">
            <input id="add_row" class="btn btn-default pull-left add_row" type="button" value="Add Row">
            <input id='delete_row' class="pull-right btn btn-default" type="button" value="Delete Row">
        </div>
    </div>
    <div class="row clearfix" style="margin-top:20px">
        <div class="pull-right col s4">
            <table class="table table-bordered table-hover" id="tab_logic_total">
                <tbody>
                    <tr>
                        <th class="text-center">Grand Total</th>
                        <td class="text-center"><input type="number" name='sub_total' placeholder='0.00'
                                class="form-control" id="sub_total" readonly />
                        </td>
                    </tr>
                    {{-- <tr>
                        <th class="text-center">CGST</th>
                        <td class="text-center">
                            <div class="input-group mb-2 mb-sm-0">
                                <input type="number" class="form-control" id="tax" placeholder="0">
                                <div class="input-group-addon">%</div>
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <th class="text-center">CGST Tax Amount</th>
                        <td class="text-center"><input type="number" name='tax_amount' id="tax_amount"
                                placeholder='0.00' class="form-control" readonly /></td>
                    </tr> --}}
                    {{-- <tr>
                            <th class="text-center">Grand Total</th>
                            <td class="text-center"><input type="number" name='total_amount' id="total_amount"
                                    placeholder='0.00' class="form-control" readonly /></td>
                        </tr> --}}
                </tbody>
            </table>
        </div>
    </div>
    <div class="row">
        <div class="col s12 center-align">
            <input type="submit" class="btn" id="create_invoice" name="create_invoice" value="Submit">
        </div>
    </div>
    </form>

Как связать данные с конкретным классом, не мешая другим классам. Пожалуйста, дайте мне знать, если вам нужна дополнительная информация.

...