Trying to use Modal, but

Hey guys!

I’m started to use livewire in my projects, and now a days i tried to do a CRUD with modal;

Basicaly it’s an table with the records, that are working right now, and a modal to create or edit the record.

This is the problem, i’m tring to use the same code as the tutorial with events, but it’s not working, the modal doesn’t show up, even though i can see the request and the response;

I’m guessing it’s a problem with css + bootstrap, in this project i’m using admin lte, and without class=‘modal’ it shows when fire the event;

This is my component (blade):

Class:

Another component that are firing the event:

Any guesses?

Thanks! :smiley: :smiley: :smiley: :smiley:

It sounds like there is something with your bootstrap usage of the modal class. I actually let bootstrap handle opening and closing the modal in many cases and use Livewire for other things.

Is there a specific reason you want to use Livewire to open and close the modal versus letting bootstrap handle it?

I tried because it’ll be a insert / edit modal, and when i type on title or description it closes the modal.

Yesterday i also set an livewire:ignore after modal class,to let the bootstrap handle the modal events, but the validation on my component is not working.

I’ll learn a little bit more about the bootstrap events.

Bootstrap uses jQuery and toggles a couple of classes to show/hide the modal. If you’re gonna use livewire to show/hide the modal, you basically need to tell bootstrap to always show the modal, then let livewire do the rest. For example:

@if($showCart)
    <div class="modal d-block" tabindex="-1" wire:click.self="$set('showCart', false)">

Note the d-block class.

1 Like

Thanks!
I will try it!

I am having the exact same problem.

Did you find a solution?

yeah! @mokhosh solve it, its a bootstrap issue.

define your modal like this: (with d-block class)

<div class="modal d-block" >

Hey! @vverardO
I’m having the issue in Modal when I’m trying to type inside the input the Modal directly hide!
Did u face something like this ?!

Use wire:ignore.self on the modal div, so it will not change this tag when rendering with new data, that way livewire will not interfere with bootstrap js.

In my code:
<div wire:ignore.self class="modal fade" id="membersModal" tabindex="-1" role="dialog" aria-labelledby="membersModalTitle" aria-hidden="true">

6 Likes

Its perfect !
But, close modal?. i’ve tried:

<div wire:ignore.self class="modal fade" ...>
     ...
<button type="submit" wire:click="update()" **data-dismiss="modal"**>Update</button>

</div>

data-dismiss i know it is not correct, but is functional. What is the correct way to do it?

Hi, In my projects i destroyed bootstrap modal.
In fact ! i do not need it anymore !
Example for a confirm delete…

<button wire:click="confirmDestroy({{$row->id}})"

In my livewire component, just a function
public function confirmDestroy($id)
{
$this->confirmDestroy = $id;
}

and back to my view at top :
@if($confirmDestroy)
< x-modal.confirmation
x-show=“modalConfirm”
destroy-id="{{$confirmDestroy}}" />
@endif

Create your own modal is super handy with tailwind !

1 Like

Here’s a little example with Bootstrap modal, Looking for tips working with modals

Do not use livewire when opening the modal. Just use the plain old bootstrap modal event listener.
Use livewire when dispatching browser events from the backend to the frontend and vice versa.

There’s actually a youtube video series that tackles CRUD functionality with Modal Forms you can check it out on this link --> https://www.youtube.com/watch?v=_DQi8TyA9hI

1 Like

thanks
This is solve the problem

@ mokhosh. Thank you very much. This helped a great deal. I’ve lost my modal-background (dimming effect), but at least the modal is actually functioning.