我在我的项目中使用 Laravel。我有一张可以保持状态的优惠券。 我已经使用 AJAX 来更改状态,并且 AJAX 代码工作成功。
但是,直到刷新页面后,我的 View 中的状态才发生变化。我正在寻找解决这个问题的方法。
<button class="btn btn-link p-0 change" type="submit" data-id="{{ $voucher->id }}">
@if ($voucher->status == 1)
<i class="fa fa-toggle-on text-success"></i>
@else
<i class="fa fa-toggle-off text-muted"></i>
@endif
</button>
@if ($voucher->status == 1)
<span class="badge badge-soft-success">
enable
</span>
@else
<span class="badge badge-soft-pink">
disbale
</span>
@endif
$(".change").click(function() {
var id = $(this).data("id");
$.ajax({
url: "vouchers/change-status/" + id,
type: 'put',
dataType: "JSON",
data: {
"id": id,
"_method": 'put',
"_token": "{{ csrf_token() }}",
},
success: function() {
console.log("it Work");
// $("tr#"+id).remove();
}
});
console.log("It failed");
});
最佳答案
您可以尝试以下方法:
Blade
当状态为 1
时,将您的代码包装在具有 status-enabled
类的某个容器中。根据状态为可见或不可见的元素设置特殊类。
<div class="holder @if($voucher->status == 1) status-enabled @endif">
<button class="btn btn-link p-0 change" type="submit" data-id="{{ $voucher->id }}">
<i class="fa fa-toggle-on text-success enabled-visible"></i>
<i class="fa fa-toggle-off text-muted enabled-invisible"></i>
</button>
<span class="badge badge-soft-success enabled-visible">
enable
</span>
<span class="badge badge-soft-pink enabled-invisible">
disbale
</span>
</div>
CSS
设置规则:
.holder .enabled-visible {
display: none;
}
.holder .enabled-invisible {
display: inline-block;
}
.holder.status-enabled .enabled-visible {
display: inline-block;
}
.holder.status-enabled .enabled-invisible {
display: none;
}
JS
成功更改状态后切换持有者类别。
$(".change").click(function() {
var id = $(this).data("id");
$.ajax({
url: "vouchers/change-status/" + id,
type: 'put',
dataType: "JSON",
data: {
"id": id,
"_method": 'put',
"_token": "{{ csrf_token() }}",
},
success: function() {
$(this).closest('.holder').toggleClass('status-enabled');
}
});
console.log("It failed");
});
关于javascript - 在 laravel 中使用 ajax 更改状态,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58607213/