如何解决为什么模态在laravel livewire中不关闭?
我正在使用laravel livewire删除两个表中的记录,问题是模式,正在删除记录,但模式仍然显示。
我正在使用Bootstrap 4.1
这是我的功能
public function delete($id)
{
DB::beginTransaction();
try
{
// If I comment on any of the following two lines (it doesn't matter what line it is),it works!
DetalleRamComputadora::where('fk_computadora','=',$id)->delete();
Computadora::where('id',$id)->delete();
DB::commit();
$this->emit('confirm'); // Close modal "confirm"
session()->flash('success','Registro eliminado con éxito');
} catch (\Throwable $th) {
DB::rollBack();
$this->emit('confirm'); // Close modal "confirm"
session()->flash('error','Ocurrió un error y no se almacenó el registro');
}
}
这是从livewire关闭模式的脚本:
window.livewire.on('confirm',() => {
$('#delete_confirm').modal('hide');
});
请帮助我!
解决方法
首先,我们无法验证#delete_confirm
实际上是您的模态名称。其次,检查事件confirm
是否被触发。
window.livewire.on('confirm',() =>
{
alert('Yes,I have reached here');
});
如果事件被触发,请尝试以下操作:
window.livewire.on('confirm',() =>
{
$('.modal').modal('hide');
});
如果仍然无法执行,请强制将模式完全销毁:
window.livewire.on('confirm',() =>
{
$('.modal').modal('hide').data('bs.modal',null);
$('.modal').remove();
$('.modal-backdrop').remove();
$('body').removeClass('modal-open');
$('body').removeAttr('style');
});
,
我也厌倦了解决这个问题,但我有一个想法,直接关闭该模式,无需任何 js 和 livewire 代码,仅在引导程序本身中。这是我所做的:
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary" wire:click.prevent="store()" data-bs-dismiss="modal">Add Students</button>
,
我能够解决问题。只有我将此代码添加到模态的div
**wire:ignore.self**
<div wire:ignore.self class="modal fade" id="delete_confirm" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
...
</div>
,
在函数删除中,添加调度浏览器事件
public function delete($id)
{
DB::beginTransaction();
try
{
/*...Your code ... */
$this->dispatchBrowserEvent('closeModal');
} catch (\Throwable $th) {
/*...Your code ... */
}
}
然后在您的app.blade.php中,尝试像这样添加此窗口事件监听器。
window.addEventListener('closeModal',event => {
$("#delete_confirm").modal('hide');
})
通过这种方式,您将能够通过从前端触发javascript来关闭模式。
P.S。 有一个laravel livewire教程的youtube视频系列,实际上将Boostrap Modal用于CRUD功能。您可以在这里观看! https://www.youtube.com/watch?v=_DQi8TyA9hI
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。