javascript - Laravel AJAX Bootstrap 切换开关不起作用
问题描述
我目前正在做一个 Laravel 项目。在管理视图中,我得到了用于激活/停用用户的 Bootstrap Toggle。除了我无法将复选框更改为切换之外,一切都运行良好。当我将 class="toggle-class" 更改为 data-toggle="toggle" 时,会出现切换,但数据将不再发送到数据库,因此代码将不再工作......
这就是我所拥有的
这就是我要的
我的管理员视图
<input id="{{$user->id}}" class="toggle-class"
type="checkbox" data-onstyle="success" data-offstyle="danger"
data-on="Active" data-off="Inactive"
{{ $user->status ? 'checked' : '' }}
onclick="changeStatus(event.target, {{ $user->id }});">
function changeStatus(_this, id) {
var status = $(_this).prop('checked') == true ? 1 : 0;
let _token = $('meta[name="csrf-token"]').attr('content');
$.ajax({
url: '{{route("change.status")}}',
type: 'POST',
data: {
_token: _token,
id: id,
status: status
},
success: function(data){
if (data.type == "error") {
$('#message').html("<div class='alert alert-danger card h2'>"+data.fail+"</div>");}
else {
$('#message').html("<div class='alert alert-success card h2'>"+data.success+"
</div>");
}}
});
}
我的控制器中的方法
public function changeStatus(Request $request)
{
$user = User::find($request->id);
$user->status = $request->status;
$user->save();
return response()->json(['success'=>'Status change successfully.']);
}
不知道我做错了什么。似乎无法让它工作。
解决方案
通过替换不活动和活动的地方,我遇到了和你一样的问题,我的问题得到了解决。
var status = $(this).children().prop('checked') == true ? 'active' : 'inactive';
到这条线
var status = $(this).children().prop('checked') == true ? 'inactive' : 'active';
这是我的代码
< script type = "text/javascript" >
$(document).ready(function() {
$('.toggle').click(function() {
var status = $(this).children().prop('checked') == true ? 'inactive' : 'active';
var id = $(this).children().data('id');
$.ajax({
type: 'POST',
dataType: "json",
url: 'statusUpdate',
data: {
'status': status,
'id': id
},
headers: {
'X-CSRF-TOKEN': '{{ csrf_token() }}'
},
success: function(data) {
Swal.fire(
'GREAT!', 'Status changed successfully', 'success')
location.reload();
console.log(data.success);
}
});
});
}) <
/script>
<input data-id="{{ $catego->id }}" class="toggle-class" data-toggle="toggle" data-on="Active" data-off="Inactive" data-onstyle="warning" data-offstyle="dark" type="checkbox" {{ $catego->status == 'active' ? 'checked' : '' }}>
路由代码// Route::post('statusUpdate', [CategoryCRUDController::class, 'changeStatus']);
// My controller
public function changeStatus(Request $request) {
$category = Category::find($request->id);
$category->status = $request->status;
$category->save();
return response()->json(['success'=>' status change successfully.']); }
推荐阅读
- haskell - 测试数据类型的规范方法
- javascript - 动态设置隐藏电子邮件字段的值不起作用
- javascript - 如何导出部分解构赋值?
- javascript - 注入 Angular 自定义元素正在替换整个 DOM
- android - Android使用clipboardManager获取clipData但它总是返回null
- azure - Azure Map 检查地理围栏不适用于 isAsync=true
- wcf - 如何禁止 WCF 元数据/wsdl
- java - 在 eclipse.jdt.core AST 中为外部对象选择节点类型
- c++ - 我收到调试错误“已调用 abort()”
- nginx - 根据来电在入口控制器中添加条件请求头