php - onclick 函数调用在 laravel 中未定义
问题描述
我正在用 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">×</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);
}
})
}
});
解决方案
我可能需要修改这个答案,但我认为问题在于它找不到您的 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>
标签。
推荐阅读
- javascript - 当 onmouseup 被触发时,Vanilla JS before/after 滑块有删除/添加覆盖的问题?
- f# - 为已发布的应用程序获取“无法加载文件或程序集'FSharp.Core,版本 = 4.7.0.0”
- vue.js - 下拉菜单的vue切换类
- nuget - Nuspec 文件目标绝对路径
- java - 有没有办法在spring boot中用参数来调度一个函数
- typescript - 如何在 Typescript 中更新 three.js BufferGeometry 位置
- coq - 使用 Coq MSet 库证明等式的困难
- python - 为什么 numpy 视图是向后的?
- python - 查找具有不同标题的行
- user-interface - 一个非常简单的 JavaFX wait()、notify() 示例