Unable to prevent modal displaying if form is not valid: problem with order sequence with ajax

Question

I have a Django app with a form (id = form_unblind_form) with valid button (id = unblind_edit). I want to display a modal with informations from database using ajax query. And it works but there is an anormal behavior.

The problem is that as modal.sow() is called in success ajax return, modal is displayed even if form is not valid and that is not a correct behavior

But I can find the right algo to do that

thanks for help

    //1. first form submission is prevented until OK button on modal is clicked
    $("#form_unblind_edit").submit(function (event) {
        if (!prevent_edit) {
            event.preventDefault();
        }

    });
    
    //2. I query database to recovered information for modal
    $("#unblind_edit").on("click", function (event) {
        var csrftoken = getCookie('csrftoken');
        var patient = $("#id_pat").val();
        var treatment = $("#id_unb_num").val();
        $.ajax({
            type: "POST",
            url: '/unblind/already_unblind/',
            data: {
                csrfmiddlewaretoken: csrftoken,
                'patient': patient,
                'treatment': treatment
            },
            dataType: 'html',
            success: function (data) {
                $("#popup").html(data);
                $('#unblindconfirm').modal('show');    //<- PROBLEM HERE as modal is always displayed
            },
  
        });

    });
     //3. If user click on OK button, form is finally submitted
     $("body")
        .on('click', '#edit_button_OK', function (event) {
            $('#edit_button_OK').attr("disabled", "disabled");
            prevent_edit = true;
            $("#form_unblind_edit").submit();
        })

score 0 · Accepted Answer · answered Jan 12 '21 at 13:56

you should not call ajax on unblind_edit button

make a function for ajax query that is called when form is submitted first and data are not yet available try to add a flag for ajax response successfully

    var ajax_success = false

    //1. first form submission is prevented until OK button on modal is clicked
    // ajax query is called if not yet succeded, else modal is show
    $("#form_unblind_edit").submit(function (event) {
        if (!prevent_edit) {
            event.preventDefault();
        }
        if (!ajax_success) {
            ajax(); //call ajax to recovered data 
        } else if (ajax_success) {
            $('#unblindconfirm').modal('show');
        }
    });

    function ajax() {
        ...
        $.ajax({
            ...
            success: function (data) {
            ...
                ajax_success = true;
                $("#form_unblind_edit").submit(); //form submission to display modal
            },
        });
    }

Unable to prevent modal displaying if form is not valid: problem with order sequence with ajax

1 Answers1