Я пытаюсь создать таблицу CRUD, используя laravel и AJAX. Испытание учебника Webslesson. Вот ссылка на учебник: https://www.webslesson.info/2018/12/live-table-add-edit-delete-in-laravel-using-ajax-jquery.html
Я пробовал разные способы, но, похоже, это не работает.
Вот мой Javascript код.
$(document).ready(function(){
fetch_data();
function fetch_data()
{
$.ajax({
// url:"/enquiry/fetch_data",
url:"{{url('/enquiry/fetch_data')}}",
dataType:"json",
success:function(data)
{
var html = '';
html += '<tr>';
html += '<td contenteditable id="ac_assign"></td>';
html += '<td contenteditable id="item_cat"></td>';
html += '<td contenteditable id="itemDesc"></td>';
html += '<td contenteditable id="deliveryDate"></td>';
html += '<td contenteditable id="qty"></td>';
html += '<td contenteditable id="unit"></td>';
html += '<td contenteditable id="assetNo"></td>';
html += '<td contenteditable id="remark"></td>';
html += '<td><button type="button" class="btn btn-success btn-xs" id="add">Add</button></td></tr>';
for(var count=0; count < data.length; count++)
{
html +='<tr>';
html +='<td contenteditable class="column_name" data-column_name="ac_assign" data-id="'+data[count].id+'">'+data[count].ac_assign+'</td>';
html += '<td contenteditable class="column_name" data-column_name="item_cat" data-id="'+data[count].id+'">'+data[count].item_cat+'</td>';
html += '<td contenteditable class="column_name" data-column_name="itemDesc" data-id="'+data[count].id+'">'+data[count].itemDesc+'</td>';
html += '<td contenteditable class="column_name" data-column_name="deliveryDate" data-id="'+data[count].id+'">'+data[count].deliveryDate+'</td>';
html += '<td contenteditable class="column_name" data-column_name="qty" data-id="'+data[count].id+'">'+data[count].qty+'</td>';
html += '<td contenteditable class="column_name" data-column_name="unit" data-id="'+data[count].id+'">'+data[count].unit+'</td>';
html += '<td contenteditable class="column_name" data-column_name="assetNo" data-id="'+data[count].id+'">'+data[count].assetNo+'</td>';
html += '<td contenteditable class="column_name" data-column_name="remark" data-id="'+data[count].id+'">'+data[count].remark+'</td>';
html += '<td><button type="button" class="btn btn-danger btn-xs delete" id="'+data[count].id+'">Delete</button></td></tr>';
}
$('tbody').html(html);
}
});
}
var _token = $('input[name="_token"]').val();
$(document).on('click', '#add', function(){
var ac_assign = $('#ac_assign').text();
var item_cat = $('#item_cat').text();
var item_cat = $('#itemDesc').text();
var item_cat = $('#deliveryDate').text();
var item_cat = $('#qty').text();
var item_cat = $('#unit').text();
var item_cat = $('#assetNo').text();
var item_cat = $('#remark').text();
if(ac_assign != '' || item_cat != '' || itemDesc != '' || deliveryDate != '' || qty != '' || unit != '' || assetNo != '' || remark != '' )
{
$.ajax({
url:"{{ route('enquiry.add_data') }}",
method:"POST",
data:{ac_assign:ac_assign, item_cat:item_cat, itemDesc:itemDesc, deliveryDate:deliveryDate, qty:qty, unit:unit, assetNo:assetNo, remark:remark, _token:_token},
success:function(data)
{
$('#message').html(data);
fetch_data();
}
});
}
else
{
$('#message').html("<div class='alert alert-danger'>Both Fields are required</div>");
}
});
$(document).on('blur', '.column_name', function(){
var column_name = $(this).data("column_name");
var column_value = $(this).text();
var id = $(this).data("id");
if(column_value != '')
{
$.ajax({
url:"{{ route('enquiry.update_data') }}",
method:"POST",
data:{column_name:column_name, column_value:column_value, id:id, _token:_token},
success:function(data)
{
$('#message').html(data);
}
})
}
else
{
$('#message').html("<div class='alert alert-danger'>Enter some value</div>");
}
});
$(document).on('click', '.delete', function(){
var id = $(this).attr("id");
if(confirm("Are you sure you want to delete this records?"))
{
$.ajax({
url:"{{ route('enquiry.delete_data') }}",
method:"POST",
data:{id:id, _token:_token},
success:function(data)
{
$('#message').html(data);
fetch_data();
}
});
}
});
});
Вот мой клинок
<div class="panel-body">
<div id="message"></div>
<div class="table-responsive">
<table class="table table-striped table-bordered">
<thead>
<tr>
<!-- <th>NO</th> -->
<th>A/C ASSIGN</th>
<th>ITEM CATEGORY</th>
<th>DELIVERY DATE</th>
<th>ITEM DESC</th>
<th>QTY</th>
<th>UNIT</th>
<th>ASSET NO</th>
<th>REMARK</th>
<th>ACTION</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
{{ csrf_field() }}
</div>
</div>
Вот функции в моем контроллере
function fetch_data(Request $request)
{
$data = Enquiry::where('formId', $request->formId)->orderBy('id','desc')->get();
// echo $data;
echo json_encode($data);
}
function add_data(Request $request)
{
if($request->ajax())
{
$data = array(
'no' => $request->no,
'deliveryDate' => $request->deliveryDate,
'ac_assign' => $request->ac_assign,
'item_cat' => $request->item_cat,
'itemDesc' => $request->itemDesc,
'qty' => $request->qty,
'unit' => $request->unit,
'assetNo' => $request->assetNo,
'remark' => $request->remark
);
$id = Enquiry::insert($data);
if($id > 0)
{
echo '<div class="alert alert-success">Data Inserted</div>';
}
}
}
function update_data(Request $request)
{
// if($request->ajax())
// {
$data = array(
$request->column_name => $request->column_value,
);
Enquiry::where('formId', $request->formId)
->update($data);
echo '<div class="alert alert-success">Data Updated</div>';
// }
}
function delete_data(Request $request)
{
// if($request->ajax())
// {
Enquiry::where('id', $request->id)
->delete();
echo '<div class="alert alert-success">Data Deleted</div>';
// }
}
А вот и моя сеть. php
Route::get('/enquiry/fetch_data', 'FormController@fetch_data');
Route::post('/enquiry/add_data', 'FormController@add_data')->name('enquiry.add_data');
Route::post('/enquiry/update_data', 'FormController@update_data')->name('enquiry.update_data');
Route::post('/enquiry/delete_data', 'FormController@delete_data')->name('enquiry.delete_data');
Это ошибка из консоли. Я прикрепил сюда изображение.
Спасибо.