Bootstrap Modal close when form submits

user_14225775 0
Viewed 1432

I have a bootstrap modal in livewire, I want to have a behavior that closes the modal when the form submit is success but don't know how to do it, I can't put data-dismiss because the form has validations and the user can't see it and needs to open it again even when the user fails the validation.

        <div class="modal fade" tabindex="-1" id="modal-create" wire:ignore.self>
          <div class="modal-dialog modal-lg">
            <div class="modal-content">
              <div class="modal-header">
                <h4 class="modal-title" id="exampleModalLabel">Create FAQ</h4>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
              </div>
              <div class="modal-body">
                <form wire:submit.prevent="create">
                  <div class="form-group">
                    <label for="name">Title</label>
                    <input type="text" wire:model="title" class="form-control @error('title') is-invalid @enderror" id="title" name="title"
                    placeholder="Enter title">
                    @error('title') <span class="text-red">{{ $message }}</span> @enderror
                  </div>
                  <div class="form-group">
                    <label for="address">Short Description</label>
                    <input type="text" wire:model="description" class="form-control  @error('description') is-invalid @enderror" id="description"  name="description"
                    placeholder="Enter description">
                    @error('description') <span class="text-red">{{ $message }}</span> @enderror
                  </div>
                  <div class="form-group">
                    <label for="filter">Filter Type</label>
                    <select class="form-control @error('filter') is-invalid @enderror" wire:model="filter">
                        <option>Select one</option>
                        <option value="app">App</option>
                        <option value="card">Card</option>
                        <option value="web">Web</option>
                    </select>
                    @error('filter') <span class="text-red">{{ $message }}</span> @enderror
                  </div>
                  <div class="form-group">
                    <label for="image">Portfolio Image</label>
                    <br/>
                    <input wire:model="image" type="file" id="image" name="image">
                    @error('image') <span class="text-red">{{ $message }}</span> @enderror
                  </div>
                    </div>
                    <div class="modal-footer justify-content-between">
                      <button type="button" class="btn btn-sm btn-warning mx-2" data-dismiss="modal">Cancel</button>
                      <button type="submit" class="btn btn-sm btn-success">Create</button>
                    </div>
                </div>
                </form>
                </div>
              </div>
bootstrap-modal bootstrap-4 laravel-livewire laravel
3 Answers

in component

public function create()
{
   //...create
    
   $this->dispatchBrowserEvent('closeModal');
}

and in blade script section

<script>
  window.addEventListener('closeModal', event=> {
     $('#modal-create').modal('hide')
  })
user_148806560

In most cases you would just wrap the modal code in a blade @if($openModal) based on the Livewire property. Then trigger the change of the property, e.g. <button wire:click="$set('openModal', false)">...</button>. This way you utilizing the power of Livewire.

user_39050020

Use

wire:model.defer

...
<input type="text" wire:model.defer="title" class="form-control @error('title') is-invalid @enderror" id="title" name="title" placeholder="Enter title">
...
user_26119550
Related