CODEWITHSUNDEEP
bootstrap-modallaravel-livewire
Sunusi Mohd Inuwa
Sunusi Mohd Inuwa

Reputation: 74

Laravel Livewire hiding bootstrap modal with click event

I am building a livewire-based application which I came to a point where I need wire:click event to fire a function in the livewire component class as well as open a Bootstrap Modal.

Without the wire:click event, the Bootstrap Modal opens.

Without the Bootstrap Modal id, the wire:click event works just fine.

With both the two, the Modal opens but hides (not dismissed) forever, until I reload the page before I could do anything.

By default when you create livewire using php artisan make:livewire --name, the view part comes with <div> //comment </div> tag. So, whenever the place the Modal inside the div tag the above problem occurs.

However, if the place the Modal in outside the div tag it works fine BUT NOT RECOGNIZING THE LIVEWIRE VARIABLES

I want to know;

If the livewire doesn't support Bootstrap Modal or having conflicts with the Modal scripts.

If one event can not be fired twice at the same time (wire:click and default click event).

Why except tags are enclosed inside the <div> </div> before livewire recognizes it.

<a href="#" wire:click="edit({{ $file->id }})" class="mr-1 edit" data-toggle="modal" data-target="#editFileModal">
    <i class="align-middle fa fa-edit"></i>
</a>

Upvotes: 3

Views: 14985

Answers (4)

Qirel
Qirel

Reputation: 26460

You could use Alpine.js (that comes with Livewire) to fire both the wire:click and the toggle of the modal. By doing this you could even listen for the wire:click call to complete before you open the modal, if that suits you better.

<a href="#" x-on:click="$wire.edit({{ $file->id }}); 
$('#editFileModal').modal('show');" class="mr-1 edit">
    <i class="align-middle fa fa-edit"></i>
</a>

Upvotes: 2

Tom Shaw
Tom Shaw

Reputation: 1712

By adding wire:ignore.self to the root element of my modal fixed it for me.

Modal trigger button.

<button wire:click="updateModal({{ $item->id }})" type="button" 
    class="btn btn-sm btn-label-brand btn-bold" data-toggle="modal" 
    data-target="#updateModal"> Update</button>

Example modal dialog.

 <div wire:ignore.self class="modal fade" id="kt_modal_1" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-lg" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">New message</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
        </button>
      </div>
      <div class="modal-body">
        <form>
          <div class="form-group">
            <label for="recipient" class="form-control-label">Recipient:</label>
            <input type="text" class="form-control" id="recipient" wire:model="recipient">
          </div>
          <div class="form-group">
            <label for="message" class="form-control-label">Message:</label>
            <textarea class="form-control" id="message" wire:model="message"></textarea>
          </div>
        </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Send message</button>
      </div>
    </div>
  </div>
</div>

Upvotes: 18

Regolith
Regolith

Reputation: 2982

In your controller function add $this->skipRender(); at the end of the function. If you are changing any variable value in the livewire controller then it will automatically rerender the whole page. the function skipRender will stop livewire to render the page.

Upvotes: 0

Josh
Josh

Reputation: 690

I was having the exact same issue, here is my solution:

Instead of using the attribute data-target="#myModal" to show myModal when the button is clicked, I just use wire:click function to do that. ie:

<button class="btn btn-sm btn-danger" wire:click.prevent="myFunction({{$some_id}})">...</button>

In myFunction, do whatever you want, after that, add:

$this->dispatchBrowserEvent('openModal', ['someParameter' => 'some value']);

In the view file, add:

<script>
window.addEventListener('openModal', event => {
$('#myModl').modal('show');
//alert('parameter: ' + event.detail.someParameter);
})
</script>

See https://laravel-livewire.com/docs/2.x/events#browser for more info

Upvotes: 0

Related Questions