jquery .min. js: 2 jQuery. Отложенное исключение: не удается прочитать свойство «on» неопределенного типа. Ошибка типа: невозможно прочитать свойство «on» неопределенного значения - PullRequest
0 голосов
/ 07 мая 2020

Я пытаюсь создать таблицу 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');

Это ошибка из консоли. Я прикрепил сюда изображение.

Спасибо.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...