jquery ajax / django - present form in a bootstrap modal and re-show if validation was not successful

Question

my use case is:

a) Present a form loaded via ajax in a bootstrap modal, the fancy overlay effect stuff.. . I followed these instructions.

This works fine. (s

Answer 1

I wrote this simple AJAX that did the trick for me, hope it helps:

$(document).on('submit', 'div.modal-body form', function(e) {
        var form_el = $(this);
        e.preventDefault();
        $.ajax({
            type: $(this).attr('method'),
            url: $(this).attr('action'),
            data: $(this).serialize(),
            success: function (xhr, ajaxOptions, thrownError) {
                if ( $(xhr).find('.errorlist').length > 0 ) {
                    form_el.parents('.modal-body').html(xhr);
                } else {
                    form_el.parents('.modal-body').html('
Formulario enviado correctamente
');
                }
            },
            error: function (xhr, ajaxOptions, thrownError) {
                form_el.parents('.modal-body').html(xhr);
            }
        });
});

Oh btw, you will also need something like this in order to load your form into the modal:

$('.modal-class').on('click',function(){
    let dataURL = $(this).attr('data-href');
    $('.modal-body').load(dataURL,function(){
        $('#modal_crear').modal({show:true});
    });
});