Close Modal bootstrap after saving changes?

#1

I have an edit modal ( bootstrap ) everything is ok but I don’t find any event to close my modal after saving changes?

    <!-- Modal -->
    <div class="modal fade" id="editPost{{ $post->id }}">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <livewire:posts.post-modal :post="$post" :key="$post->id">
            </div>
        </div>
    </div>

php code:

public $post; 
public $name;
public $desc;

public function mount($post)
{
    $this->post = $post;
    $this->name = $post->name;
    $this->desc = $post->desc;
}

public function editPost($id)
{

    $validatedData = $this->validate([
        'name' => 'required|unique:posts,name,'.$id,
        'desc' => 'required',
    ]);
    
    auth()->user()->posts()->where('id',$id)->update($validatedData);

    session()->flash('message', 'Post successfully Added.');
    
    $this->emit('postUpdated');
    
}

Is there any event to close the modal in livewire?

#2

If you can close the Bootstrap model using Javascript then you could listen for the livewire event and then close the modal using javascript. You would need to pass the postId with the event too:

 <script>
 window.livewire.on('postUpdated', (postId) => {
     $('#editPost' + postId).modal('hide');
 })
 </script>

Your PHP would need to look like this:

$this->dispatchBrowserEvent('postUpdated', "$id");

2 Likes
#3

I don’t use Bootstrap (I’m a Tailwind/AlpineJS convert :wink:) but the Livewire event system doesn’t dispatch the event as a JS window event.

You will need to create a listener in JS for a custom event that can then execute a callback that would toogle/hide the Bootstrap modal. Then in Livewire component use the $this->dispatchBrowserEvent('custom-event); method to dispatch the event on the JS window scope.

Here is some code I use with AlpineJs and Livewire:

Livewire component

class Create extends Component
{
    public $name = '';

    public function submit()
    {
        $this->validate([
            'name' => 'required|unique:companies|min:3',
        ]);

        Company::create([
            'name' => $this->name,
        ]);

        $this->reset();
        $this->dispatchBrowserEvent('company-added');
    }

    public function render()
    {
        return view('livewire.company.create');
    }
}

Livewire view

<div x-data="{ open: false }" x-cloak class="relative">
    <form
        x-on:company-added.window="open = false"
        wire:submit.prevent="submit"
    >
        @csrf

        <x-form.text-field
            wire:model="name"
            label="Company name"
        />

        <button type="submit" class="focus:outline-none text-white py-2 px-4 rounded">
            <i class="fas fa-building"></i> {{ __('Create') }}
        </button>
    </form>
</div>
2 Likes
#4

Hi, brentvardy

Where should put this:

$this->dispatchBrowserEvent('postUpdated', "$id");

After editPost method or in the $listeners property?

#5

In your PHP to replace:

$this->emit('postUpdated');