如果表单无效，则无法阻止模态显示：ajax 的订单顺序有问题

Question

我有一个带有表单 (id = form_unblind_form) 和有效按钮 (id = unblind_edit) 的 Django 应用程序。我想使用 ajax 查询显示包含来自数据库的信息的模式。它有效，但存在异常行为。

问题在于，由于 modal.sow() 被成功调用 ajax return，即使表单无效，也会显示模态，这不是正确的行为

但我可以找到合适的算法来做到这一点

感谢帮助

    //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();
        })

Answer 1

你不应该在 unblind_edit 按钮上调用 ajax

为 ajax 查询创建一个函数，该函数在表单首次提交且数据尚不可用时调用尝试为 ajax 成功响应添加标志

    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
            },
        });
    }

如果表单无效，则无法阻止模态显示：ajax 的订单顺序有问题

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

django

ajax

bootstrap-modal