Добавьте дополнительный ввод в форму, используя jquery в laravel

Question

В одном сценарии мое приложение laravel использует laravel datatable для заполнения поля таблицы.В разделе действий я создал форму для каждой строки, позволяющей пользователю добавлять товар в заказ.

В моем контроллере:

return Datatables::of($products)
        ->removeColumn('id')
        ->addColumn('action',function($product){
            return \Form::open(['method'=>'POST','action'=>['OrderController@postLineItemAdd'],'class'=>'form']).'
        <input type="hidden" name="product_id" value="'.$product->id.'" />
        <input type="number" class="qty_picker_input" name="quantity" value="" step="1" min="0" size="3"/>
        <input type="submit" name="submit" value="Add" class="btn pull-right add_this_item" />
        '.\Form::close();
        })->make(true);

На мой взгляд:

<table class="table table-striped table-bordered table-hover datatable" id="product_table_for_order" style="width:100%">
 <thead>
  <tr>
   <th class="cell-tight">Part Number</th>
   <th>Product</th>
   <th class="cell-tight">PU</th>
   <th class="cell-tight">PU HQ</th>
   <th class="text-center" style="width: 100px;">
    <a href="/orders/{{$order->id}}" class="btn btn-xs"><i class="icon-check"> Done</i></a>
   </th>
  </tr>
 </thead>
 <tbody>
 </tbody>
 </table>

Javascript: проблема здесь.Когда я использую jquery, чтобы прикрепить дополнительное поле ввода к текущей форме.Поле ввода никогда не прикрепляется к форме.Как я могу это исправить?

@push('scripts')
<script src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>
<script type="text/javascript">
    // jquery getting data for product table
    $(function() {
        $('#product_table_for_order').DataTable({
            processing: true,
            serverSide: true,
            ajax: '{!! route('line_items/getdata',[$order->id]) !!}',
            columns: [
                { data: 'product_code', name: 'product_code' },
                { data: 'product_name', name: 'product_name' },
                { data: 'pack_unit', name: 'pack_unit' },
                { data: 'pack_unit_hq', name: 'pack_unit_hq' },
                {data: 'action', name: 'action', orderable: false, searchable: false}
            ]
        });
    });

    $(document).ready(function(){
   //this id variable would get the $order->id for current view page 
        var id= $("#order_id2").attr('data-item');
        var input = $("<input>")
            .attr("type", "hidden")
            .attr("name", "order_id").val(id);
        console.log(id);
        $('.form').append(input);
    });
</script>
@endpush

Answer 1

Хм проблема в том, что ваш $(document).ready() происходит до того, как запрос Ajax сможет ответить и создать ячейку.Лучший способ справиться с этим - использовать createdCell в Datatables, поэтому поместите что-то подобное в свои Datatables JS:

$('#product_table_for_order').DataTable({
        processing: true,
        serverSide: true,
        ajax: '{!! route('line_items/getdata',[$order->id]) !!}',
        columns: [
            { data: 'product_code', name: 'product_code' },
            { data: 'product_name', name: 'product_name' },
            { data: 'pack_unit', name: 'pack_unit' },
            { data: 'pack_unit_hq', name: 'pack_unit_hq' },
            { 
                data: 'action', 
                createdCell: function (td, cellData, rowData, row, col) {
                          var id= $("#order_id2").attr('data-item');
                          var input = $("<input>")
                         .attr("type", "hidden")
                         .attr("name", "order_id").val(id);
                         console.log(id);
                         $(td).find('.form').append(input);
                }
                name: 'action', 
                orderable: false, 
                searchable: false
            }
        ]
    });