I have a problem, i am using wire:poll, when i open a modal window it closes
I used laravel 10 with bootstrap and used wirepoll to refresh the view every 2 seconds, somehow it closes the modal window every 2 seconds too
@include('livewire.modals')
Modals blade:
@foreach ($product->habitaciones as $habitacion)
<button type="button" data-toggle="modal" data-target="#registerModal">
<div wire:poll>
<div
class=" @if($habitacion->estado == '1') items @elseif($habitacion->estado == '2') items2 @elseif($habitacion->estado == '3') items3 @endif ">
<p class="texto1">{{$habitacion->id}}</p>
<p class="texto2">@if($habitacion->estado == '1') DISPONIBLE @elseif($habitacion->estado ==
'2') OCUPADA @elseif($habitacion->estado == '3') RESERVADA @endif</p>
<p style=" @if($habitacion->estado == '1') color: #6ff96b; @elseif($habitacion->estado == '2') color: #fa595a; @elseif($habitacion->estado == '3') color: #7c98fc; @endif"
class="texto3">30 MIN</p>
</div>
</div>
</button>
<!-- Modal -->
<div class="modal fade register-modal" id="registerModal" tabindex="-1" role="dialog"
aria-labelledby="registerModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header" id="registerModalLabel">
<h4 class="modal-title">Register</h4>
<button type="button" class="close" data-dismiss="modal" aria-hidden="true"><svg aria-hidden="true"
xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
class="feather feather-x">
<line x1="18" y1="6" x2="6" y2="18"></line>
<line x1="6" y1="6" x2="18" y2="18"></line>
</svg></button>
</div>
<div class="modal-body">
<form class="mt-0">
<div class="form-group">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
class="feather feather-user">
<path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path>
<circle cx="12" cy="7" r="4"></circle>
</svg>
<input type="text" class="form-control mb-2" id="exampleInputUsername1" placeholder="Username">
</div>
<div class="form-group">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
class="feather feather-at-sign">
<circle cx="12" cy="12" r="4"></circle>
<path d="M16 8v5a3 3 0 0 0 6 0v-1a10 10 0 1 0-3.92 7.94"></path>
</svg>
<input type="email" class="form-control mb-2" id="exampleInputEmail2" placeholder="Email">
</div>
<div class="form-group">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
class="feather feather-lock">
<rect x="3" y="11" width="18" height="11" rx="2" ry="2"></rect>
<path d="M7 11V7a5 5 0 0 1 10 0v4"></path>
</svg>
<input type="password" class="form-control mb-4" id="exampleInputPassword2"
placeholder="Password">
</div>
<button type="submit" class="btn btn-primary mt-2 mb-2 btn-block">Register</button>
</form>
</div>
<div class="modal-footer justify-content-center">
<div class="forgot login-footer">
<span>Already have <a href="javascript:void(0);">Login</a>?</span>
</div>
</div>
</div>
</div>
</div>
@endforeach
Is there a way to prevent wire:poll from not closing the modal window?
The modal is being shown using JavaScript. It updates the styling. When you wire:poll, the view is re-rendered. Therefore, the style applied in the frontend is removed, as the backend is unaware of this style.
You can simply stop updates to this modal by adding wire:ignore. If the contents within the modal should be updated, you can use wire:ignore.self to only ignore the wrapping container.
See docs