aliqasemzadeh/livewire-bootstrap-modal

Dynamic Laravel Livewire Bootstrap modals.

livewire-bootstrap-modal's Issues

Help to make it work

Hi, my livewire component is views\livewire\modals\add-authotizations.blade.php

<div class="modal-dialog">
    <div class="modal-content">
    <div class="modal-header">
        <h5 class="modal-title">Modal title</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
    </div>
    <div class="modal-body">
        <p>Modal body text goes here.</p>
    </div>
    <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
    </div>
    </div>
</div>

in another view i inserted a button like this

<button class="btn btn-primary" type="button" wire:click="$emit('showModal', 'livewire.modals.add-authorizations')">
         {{ __('Aggiungi abilitazioni') }}
</button>

and the component class

<?php

namespace App\Http\Livewire\Modals;

use Livewire\Component;

class AddAuthorizations extends Component
{

    public function save()
    {  
        $this->emit('hideModal');
    }

    public function render()
    {
        return view('livewire.modals.add-authorizations');
    }
}

The modal is not shown.
I use Jetstream with Jetstrap and laravel 9

Can you help me?

Override the standard view

Hi, is possible to override the standard view?

Unable to make it work in fresh installation of laravel 10 and livewire 3

• I'm unable to make it work for livewire3. I'm pulling the master branch directly by adding the following code in my composer.json
  "repositories": [ { "type": "package", "package": { "name": "aliqasemzadeh/livewire-bootstrap-modal", "version": "2.0.1", "source": { "type" : "git", "url" : "git://github.com/aliqasemzadeh/livewire-bootstrap-modal.git", "reference" : "master" }, "dist": { "url": "https://github.com/aliqasemzadeh/livewire-bootstrap-modal/archive/master.zip", "type": "zip" } } } ]

• Getting the following response when i run
  php artisan vendor:publish --tag=livewire-bootstrap-modal:views
No publishable resources for tag [livewire-bootstrap-modal:views].

• And getting the exception Unable to find component: [modals] when i add <livewire:modals/> to my layout.
  Please help. have to breaking my head over this. Thanks

Not working with wire:navigate

Bootstrapt modal working fine when first time open page with refresh but in livewire 3 not working when come back from other page (usinf wire:navigate) and open modal

Livewire v3

Not compatible installing it via composer with Laravel Livewire v3. Are you planning to provide an update?

Laravel 8 and less

Cannot install to Laravel 8. Why do you require laravel 9? not less?

Unclear documentation about the alias

Sorry but am I the one who doesn't understand or is the documentation unclear regarding the alias? Where should I set it? 😄

Only arrays and Traversables can be unpacked

I recently upgraded a Livewire 2 project to Livewire 3.
I also switched from the bastinald/laravel-livewire-modals package to yours.

Since then I've had this error: Only arrays and Traversables can be unpacked

I did, however, make a very simple modal

app/Http/Livewire/TestModal.php

<?php

namespace App\Http\Livewire;

use Livewire\Component;

class TestModal extends Component
{
    public function render()
    {
        return view('livewire.test-modal');
    }
}

resources/views/livewire/test-modal.blade.php

<div class="modal-dialog">
    <div class="modal-content">
        <div class="modal-header">
            <h5 class="modal-title">Modal title</h5>
            <button
                type="button"
                class="btn-close"
                data-bs-dismiss="modal"
                aria-label="Close"
            ></button>
        </div>
        <div class="modal-body">
            <p>Modal body text goes here.</p>
        </div>
        <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
                Close
            </button>
            <button type="button" class="btn btn-primary">Save changes</button>
        </div>
    </div>
</div>

And I call it like that in another Livewire component :

<button type="button" wire:click="$dispatch('showModal', 'test-modal')">
    {{ __('Display test modal') }}
</button>

Do you have any idea what the problem is?

The complete error :

https://flareapp.io/share/x7Xw4nwP/claim/FNle9JTUDEyBnKGaBz8BILLUrfJlMNK0

BUG: Affects Bootstrap Toggle

This package affects bootstrap toggles on a page should the js file be added. Commenting it out fixes the issue. I've not dived deep into why this happens.

Second time bootstrap modal is not working all the inputs are not focusing

I have tried to implement the bootstrap modal. When first time it opens it works fine. If I will open again then it is not allowing me to input anything in the textboxes.

Modal Code

        <div class="text-center mb-12">
            <h1 class="fw-bolder mb-3">Bank Details</h1>
        </div>

        <form id="kt_modal_add_user_form" class="form" action="#" wire:submit.prevent="create">
            <!--begin::Scroll-->
            <div class="d-flex flex-column scroll-y me-n7 pe-7" id="kt_modal_add_user_scroll" data-kt-scroll="true" data-kt-scroll-activate="{default: false, lg: true}" data-kt-scroll-max-height="auto" data-kt-scroll-dependencies="#kt_modal_add_user_header" data-kt-scroll-wrappers="#kt_modal_add_user_scroll" data-kt-scroll-offset="300px">


                <!--end::Input group-->
                <div class="row row-cols-lg-2 g-10">
                    <div class="col">
                        <div class="fv-row mb-9 fv-plugins-icon-container fv-plugins-bootstrap5-row-valid">
                            <!--begin::Label-->
                            <label class="fs-6 fw-bold mb-2 required">Bank Name</label>
                            <!--end::Label-->
                            <!--begin::Input-->
                            <input type="text" name="bank_name" wire:model="bank_name" class="form-control form-control-solid mb-3 mb-lg-0 @error('bank_name') is-invalid @enderror" placeholder="Bank Name" value="" />

                            <!--end::Input-->
                            @error('bank_name')
                            <div class="fv-plugins-message-container invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>
                    <div class="col" data-kt-calendar="datepicker">
                        <div class="fv-row mb-9">
                            <!--begin::Label-->
                            <label class="fs-6 fw-bold mb-2 required">A/C Holder Name</label>
                            <!--end::Label-->
                            <!--begin::Input-->
                            <input type="text" name="account_holder_name" wire:model="account_holder_name" class="form-control form-control-solid mb-3 mb-lg-0 @error('account_holder_name') is-invalid @enderror" placeholder="A/C Holder Name" value="" />
                            <!--end::Input-->
                            @error('account_holder_name')
                            <div class="fv-plugins-message-container invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>
                </div>
                

                <!--end::Input group-->
            </div>
            <!--end::Scroll-->
            <!--begin::Actions-->
            <div class="text-center pt-15">
                <button type="reset" class="btn btn-light me-3" data-kt-users-modal-action="cancel" data-bs-dismiss="modal">Cancel</button>
                <button type="submit" class="btn btn-primary" data-kt-users-modal-action="submit">
                    <span class="indicator-label">Submit</span>
                    <span class="indicator-progress">Please wait...
                        <span class="spinner-border spinner-border-sm align-middle ms-2"></span></span>
                </button>
            </div>
            <!--end::Actions-->
        </form>
        <!--end::Form-->
    </div>
    <!--end::Modal body-->
</div>
<!--end::Modal content-->

Modal Button

<button class="border border-secondary btn btn-icon btn-light-primary" type="button" onclick="Livewire.emit('showModal', 'bank-account.modal.create')"> <i class="la la-plus fs-3"></i> </button>

Button Code

Unable to hide modal from component

I'm using $this->emit('hideModal') from the component but I get the following error in the console:

Unhandled Promise Rejection: TypeError: null is not an object (evaluating 'r.Modal.getInstance(i).hide')

I have multiple modals on the page but only one visible.

Package Version: dev-master
Bootstrap Version: 5.2.2
Laravel Version: 9.40.1

Switch from one modal to another modal

Old modal can be closed but better could be configured to overlap.

Is there any good way to do this?