Laravel 6 - How to create a table with dynamic rows using LaravelCollective? - html

Question

I want to make a dynamic table using LaravelCollective, where you can add/remove rows.
I already tried to follow a few tutorials, but I keep failing. I don't know what I'm doing wrong.
Html Code for the table/form
{{ Form::open(['action' => 'TransactionsINController#store', 'method' => 'POST']) }}
<section>
<div class="panel panel-header">
<div class="form-group">
{{ Form::label('supplier_name', 'Supplier Name') }}
{{ Form::select('supplier_name', $supplierList->pluck('name', 'id'),
null, ['class' => 'form-control', 'placeholder' => 'Pick one supplier...']) }}
</div>
<div class="form-group">
{{ Form::label('transaction_in_date', 'Transcation Date') }} <br>
{{ Form::date('transaction_in_date', \Carbon\Carbon::now()->format('d M Y')) }}
</div>
</div>
<div class="panel panel-footer">
<table class="table table-hover table-bordered" id="">
<thead align="center">
<tr>
<th>Device Type</th>
<th>Spec</th>
<th>Price</th>
<th><a href="#" class="btn btn-success addRow">
<i class="fa fa-plus"></i>
</a>
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<div class="form-group">
{{ Form::select('device_type_name[]', $deviceTypeList->pluck('name_tipe_device', 'id'),
null, ['class' => 'form-control', 'placeholder' => 'Pick Device Type...', 'name' => 'device_type_name[]']) }}
</div>
</td>
<td>
<div class="form-group">
{{ Form::textarea('device_spec[]', '',
['class' => 'form-control', 'placeholder' => 'Device Spec', 'rows' => 5, 'cols' => 45, 'name' => 'device_spec[]']) }}
</div>
</td>
<td>
<div class="form-group">
{{ Form::number('device_price[]', 'value', ['name' => 'device_price[]']) }}
</div>
</td>
<td>
<a href="#" class="btn btn-danger remove">
<i class="fa fa-times"></i>
</a>
</td>
</tr>
</tbody>
</table>
</div>
</section>
{{ Form::button('<i class="far fa-save"></i> Submit', ['type' => 'submit', 'class' => 'btn btn-info'] ) }}
{{ Form::close() }}
The Script i use to add/remove Rows
<script type="text/javascript">
$('.addRow').on('click', function(){ \\Uncaught ReferenceError: happen in this line.
addRow();
});
function addRow(){
var tr = '<tr>'+
'<td>'+
'<div class="form-group">'+
'{{ Form::select('device_type_name[]', $deviceTypeList->pluck('nama_tipe_device', 'id'),
null, ['class' => 'form-control', 'placeholder' => 'Pick Device Type...', 'name' => 'device_type_name[]']) }}'+
'</div>'+
'</td>'+
'<td>'+
'<div class="form-group">'+
'{{ Form::textarea('device_spec[]', '',
['class' => 'form-control', 'placeholder' => 'Device Spec', 'rows' => 5, 'cols' => 45, 'name' => 'device_spec[]']) }}'+
'</div>'+
'</td>'+
'<td>'+
'<div class="form-group">'+
'{{ Form::number('device_price[]', 'value', ['name' => 'device_price[]']) }}'+
'</div>'+
'</td>'+
'<td>'+
'<a href="#" class="btn btn-danger remove">'+
'<i class="fa fa-times"></i>'+
'</a>'+
'</td>'+
'</tr>';
$('tbody').append(tr);
}
</script>
When I press the + button to add more rows it doesn't do anything and when I inspected the code in the browser, I found this error:
Uncaught ReferenceError: $ is not defined

Answer 1

$ refers to jQuery, have you added it to your project and is it available in this scope?
Note: it needs to be present before your script
jQuery may not have loaded when that script runs, you can try wrapping your script with $(document).ready({ }) so it runs it when jQuery has loaded