javascript - 将数据放在文本框上编辑/更新模态 Laravel
问题描述
所以我正在使用模态做这个粗鲁的事情,我想我能够做到这一点,只是表格中的数据没有显示在模态的文本框中。我能够更新我的表格,只是我希望所选行的数据显示在模式中。
外观如下: 在此处输入图像描述
这是我的观点:表格部分(view/crud/crud.blade.php)
<div>
<table class="table" id="dataTable">
<thead>
<tr>
<th scope="col">id</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Course</th>
<th scope="col">Action</th>
</tr>
</thead>
<tbody>
@foreach ($cruds as $crud)
<tr>
<td>{{$crud->id}}</td>
<td>{{$crud->firstName}}</td>
<td>{{$crud->lastName}}</td>
<td>{{$crud->course}}</td>
<td>
<a href="#" class= "btn btn-warning edit_btn"> Edit </a>
</td>
</tr>
@endforeach
</tbody>
</table>
</div>
@else
<p> No Post found </p>
@endif
这是我的观点:模态部分(view/crud/crud.blade.php)
<div class="modal fade" id="editModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">EDIT DATA</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<form action="/crud" method="POST" id = "editForm">
{{csrf_field()}}
{{method_field('PUT')}}
<div class="modal-body">
<input type="hidden" class="form-control" id="crud_id">
<div class="form-group">
<label>First Name</label>
<input type="text" class="form-control" name="firstName" id="firstName">
</div>
<div class="form-group">
<label>Last Name</label>
<input type="text" class="form-control" name="lastName" id="lastName">
</div>
<div class="form-group">
<label>Course</label>
<input type="text" class="form-control" name="course" id="course">
</div>
</div>
<div class = "modal-footer">
{{Form::submit('Update', ['class' => 'btn btn-primary'])}}
</div>
</form>
</div>
</div>
</div>
这是我的 js (public/js/modal.js)
$(document).ready(function(){
var table = $('#dataTable').DataTable();
//display Edit Modal
$('.edit_btn').on('click', function(){
$tr = $(this).closest('tr');
var data = $tr.children("td").map(function(){
return $(this).text();
}).get();
console.log(data);
$('#firstName').val(data[1]);
$('#lastName').val(data[2]);
$('#course').val(data[3]);
$('#editForm').attr('action', '/crud/' + data[0]);
$('#editModal').modal('show');
})
});
这是我的控制器:更新部分
public function update(Request $request, $id)
{
//
$this->validate($request, [
'firstName' =>'required',
'lastName' => 'required',
'course' => 'required'
]);
//Adding Data
$crud = Crud::find($id);
$crud->firstName = $request->input('firstName');
$crud->lastName = $request->input('lastName');
$crud->course = $request->input('course');
$crud->save();
return redirect('/crud');
}
这是我的路线
Route::resource('crud', 'CrudController');
这是控制台中显示的内容:
(5) ["9", "abcde", "abcde", "abcde", "↵ Edit … Delete ↵ "]
0: "9"
1: "abcde"
2: "abcde"
3: "abcde"
4: "↵ Edit ↵ Delete ↵ "
length: 5
__proto__: Array(0)
解决方案
你能试试这个吗?
$(document).ready(function(){
var table = $('#dataTable').DataTable();
//display Edit Modal
$('.edit_btn').on('click', function(){
var id = $(this).parent().prev().prev().prev().prev().text();
var firstName = $(this).parent().prev().prev().prev().text();
var lastName = $(this).parent().prev().prev().text();
var course = $(this).parent().prev().text();
$('#firstName').val(firstName);
$('#lastName').val(lastName);
$('#course').val(course);
$('#editForm').attr('action', '/crud/' + id);
$('#editModal').modal('show');
})
});
当您关闭它并再次单击其他记录时,您可能需要重置模式表单。如果它是一个引导模式,您可以在它关闭时通过以下示例重置它:
// Clears modal form when is closed
$('#kt_modal_org').on('hidden.bs.modal', function(e) {
$(this).find('#org-form')[0].reset();
});
推荐阅读
- jquery - 如何反转 scrollLeft jQuery 脚本
- haskell - 由于缺少 zlib 库,Cabal 安装 (Cabal cabal-install) 失败
- javascript - 有没有一种简单的方法可以从字符串中返回所有单词?
- java - 在二维数组中查找相邻元素
- module - 查找本地编译的 Raku 模块
- objective-c - 使用 bitmapData 修改图像
- emacs - emacs - 滚动过去缓冲区的顶部?
- reactjs - 如何使用不同的 .env 文件多次运行 1 个 Express 服务器项目
- python - 如何处理具有相同标签的 XML 元素迭代嵌套属性
- r - 总结 R 中的数据问题