Скрытие модала после успешной отправки формы

<

Этот модал в шаблоне:

<!-- Start modal -->
<button type="button" hx-get="{% url 'events:create' %}" hx-target="#eventdialog" class="btn btn-primary">
    Add an event
</button>
<div id="eventmodal" class="modal fade" tabindex="-1">
    <div id="eventdialog" class="modal-dialog" hx-target="this">
    </div>
</div>
<!-- End modal -->

А это Javascript, который заставляет его показывать модальное окно:

;(function(){
    const modal = new bootstrap.Modal(document.getElementById('eventmodal'))

    htmx.on('htmx:afterSwap', (e) => {
        if (e.detail.target.id == "eventdialog")
        modal.show()
    })

Я пытался добавить это в код Javascript, но это не работает:

htmx.on('htmx:beforeSwap', (e) => {
    if (e.detail.target.id == 'eventdialog' && !e.detail.xhr.response)
    modal.hide()
})

Как сделать так, чтобы модальное окно скрывалось после отправки формы? Вот мой вид:

class CreateEvent(LoginRequiredMixin, CreateView):
    model = Event
    form_class = EventForm
    template_name = 'events/events_form.html'
    success_url = reverse_lazy('events:index')

def form_valid(self, form):
    form.instance.author = self.request.user
    event_obj = form.save(commit=True)
    image = self.request.FILES.get('image')
    if image:
        EventImage.objects.create(title=event_obj.title, image=image, event=event_obj)
    return super(CreateEvent, self).form_valid(form)

Вернуться на верх