Modals wont work!

[JohnnyBigodes]

Hello everyone,

I am trying to open a model, but for some reason it wont open at all.

I tried the way it is written on the documentation.

Controller:

namespace App\Http\Livewire\Tags;

use Livewire\Component;

class TagEditModal extends Component
{
    public $isOpen = false;

    protected $listeners = ['showModal' => 'open'];

    public function open()
    {
        $this->isOpen = true;
    }

    public function render()
    {
        return view('livewire.tags.tag-edit-modal', ['isOpen' => $this->isOpen]);
    }
}

Blade view:

<div>
    @if($isOpen)
        <div class="modal fade" tabindex="-1" role="dialog">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title">Test</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        <p>Modal body text goes here.</p>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-primary">Save changes</button>
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                    </div>
                </div>
            </div>
        </div>
    @endif
</div>

The modal gets opened on an other component. I see that the requests are beeing made, but nothing get open.

If I put a normal <h1>Hello World</h1> on my blade view it get shown, but for some reason the modal not.

EDIT:
Tried giving the modal an ID and opening it through:

@push('scripts')
$('#myModelID').modal('show');
@endpush

And this wont work at all.

I am close to give up on Livewire. ;o(

Thanks in advance

[xxdalexx]

EDIT:
Tried giving the modal an ID and opening it through:

@push('scripts')
$('#myModelID').modal('show');
@endpush

And this wont work at all.

This isn’t going to work because you are trying to show the modal in 2 different ways now, through livewire and jquery. Livewire probably hasn’t injected the modal code into your page yet when the jquery event is fired, so the jquery selector isn’t going to find it.

Taking livewire out of this, the modal code is in the page but not being displayed, and jquery toggles it being displayed or not.

Now livewire is injecting the code in into the page, but jquery hasn’t told the browser to show it, (or like I said, it tried, but the modal wasn’t in the page yet)

If you want livewire to do it, @mokhosh pointed out here already:

Trying to use Modal, but

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.

That you will have to add the classes into the modal that jquery does when it toggles it for it to be displayed.

When the modal is hidden it has:

class="modal fade"
style="display: none;" 
aria-hidden="true"

When it is shown:

class="modal fade show"
style="display: block;" 
aria-modal="true"

TLDR: add the show class and go from there.

You’re probably still going to run into functionality issues but that goes beyond my frontend knowledge.

If you want to make it easier on yourself, leave the modal handling to bootstrap/jquery and put your livewire inside of the modal. If it needs to be dynamic, like if you need a different record each time, emit an event with the id for livewire to use with the jquery modal open event.

Events | Livewire Documentation