onclick 函数调用在 laravel 中未定义

Question

我正在用 laravel 和 ajax 创建一个简单的任务管理系统。我试图在一个编辑按钮（使用 onclick）中实现一个功能，该按钮应该触发一个模式并获取所需 Id 的详细信息。但我犯了以下错误

我的控制器代码：

public function getTasks(Request $request){
    if($request->ajax())
 {
  $output = '';
  $query = $request->get('query');
  if($query != '' && $query != 'All')
  {
   $data = Task::join('projects', 'projects.id', '=', 'tasks.project_id')
        ->where('projects.id', $query)
        ->orderBy('priority', 'ASC')
        ->paginate(10,array('tasks.*', 'projects.project_name'));
  }
  else
  {
   $data = DB::table('tasks')
     ->orderBy('priority', 'ASC')
     ->paginate(10);
  }
  $total_row = $data->count();
  if($total_row > 0)
  {
   foreach($data as $row)
   {
    $output .= '
            <div class="col-12 col-md-3 border p-4 m-4" id="get_task_id" data-id="'.$row->id.'">
                <span class="handle"></span>
                <h4>'.$row->task_name.'</h4>
                <p>#'.$row->priority.'</p>
                <p>Scheduel : '.date('d F, Y', strtotime($row->date_time)).'</p>
                <div class="row d-flex justify-content-end">
                    <button type="button" class="btn btn-primary" onclick="taskEditData('.$row->id.')">
                      Edit Task
                    </button>
                    <button class="btn btn-danger">X</button>
                </div>
            </div> 
           ';
   }
  }
  else
  {
   $output = '
   <tr>
    <td align="center" colspan="5">No Product Found</td>
   </tr>
   ';
  }
  $data = array(
   'table_data'  => $output,
   'total_data'  => $total_row
  );
  echo json_encode($data);
 }
}

从路线出发：

Route::get('singleTask/{id}','App\Http\Controllers\Master@taskEditData');

从 js 文件中：

function taskEditData(id) {
$('#task').modal('show');
$.ajax({
    type: "GET"
    , DataType: 'json'
    , url: "/singleTask/" + id
    , success: function (data) {
        // console.log(data);
        $('.updateButtonShow').show();
        $('.addButtonShow').hide();

        $('#project_name').val(data.project_name);
        $('#project_id').val(data.project_id);
        $('#task_name').val(data.task_name);
        $('#date_time').val(data.date_time);
        $('#priority').val(data.priority);
       
        $('#taskId').html(data.id);
        
       }
   })
  }

从刀刃上

<section class="container">
    <div class="row d-flex justify-content-between sort_task" id="sort_task">
    
    </div>

    <div id="total_records">

    </div>

</section>

<!-- Task Modal -->
<div class="modal fade" id="task" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" 
aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <form>
       @csrf
       <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Add New Task</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
         <div class="form-group">
            <label>Task Name</label>
            <input type="text" name="project_name" class="form-control">
         </div>
         <div class="form-group">
            <label>Select Project</label>
            <select name="project_name" class="form-control">
                @foreach($projects as $project)
                  <option value="{{$project->id}}">{{$project->project_name}}</option>
                @endforeach
            </select>
         </div>
         <div class="form-group">
            <label>Scheduel</label>
            <input type="date" name="date_time" class="form-control">
         </div>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
            <button type="button" id="add" class="btn btn-primary addButtonShow">Add Task</button>
            <button type="button" id="edit" class="btn btn-primary updateButtonShow">Update 
            Task</button>
          </div>
       </form>
    </div>
  </div>
</div>

拉入js文件：

  fetch_customer_data();

  function fetch_customer_data(query = '')
  {
   $.ajax({
   url:"getTasks",
   method:'GET',
   data:{query:query},
   dataType:'json',
   success:function(data)
   {
    $('#sort_task').html(data.table_data);
    $('#total_records').text(data.total_data);
   }
  })
 }

});

Answer 1

我可能需要修改这个答案，但我认为问题在于它找不到您的 javascript 文件。

例如，在您的刀片模板中，您将需要这样的内容：

<section class="container">
    <div class="row d-flex justify-content-between sort_task" id="sort_task">
    
    </div>

    <div id="total_records">

    </div>
    <script src="path-to-your-js-file.js"/>
</section>

然后在 .js 文件中，您就有了 taskEditData 方法。现在您看到的错误是因为浏览器找不到taskEditData 方法。

或者，如果您使用的是布局文件，我会在其中放置 <script> 标签。