javascript - JavaScript/JQuery：停止脚本，直到提交模态表单

Question

好的，这可能是一个简单的问题，但我无法从网上的示例中了解如何做到这一点。

背景：我的代码显示了一个$("#multi_med_modal_form")要求用户输入的模态表单。来自模态表单的输入用于在$('#med_output')从 AJAX 响应移至下一行之前完成填充一些 html。

问题：模式显示后，代码继续执行 AJAX 响应的后续行，因此当用户提交模式表单时，变量已更改并且程序（可以理解）抛出错误。

问题：如何让 JavaScript/JQuery 在$("#multi-submit-btn").click()下面等待停止代码？

    $("#med_input_form").submit(function(event){
        console.log('Med Input Form Submitted');
        event.preventDefault();

        var serializedData = $(this).serialize();
        $.ajax({
            type: "POST",
            url: '{% url "medrec_v2:post_medrec" %}',
            data: serializedData,
            success: function(response) {
                $('#med_output').html("");

                var med_ajax = JSON.parse(response["med_output"]);

                med_ajax.line.forEach(line => {
                    console.log(line)
                    input_text = line[0]
                    med_list = line[1]
                    dose = line[2]            
                    if (med_list.length == 0) {
                        // <!---Need new Modal!-->
                        
                    } else if (med_list.length > 1){
                        input_name = modal_option_builder("multi", line);
                        $("#multi_med_modal").modal('show');
//!!!----------  WAIT FOR USER TO SUBMIT MODAL FORM HERE!! ------------------!!!//
                        $("#multi-submit-btn").click( () => { 
                            radio_id = $("input[name='" + input_name + "']:checked").val()
                            for (i = 1; i < med_list.length; i++) { 
                                if (med_list[i].id == radio_id) {
                                    radio_med = med_list[i];
                                    break;
                                }
                            };
                            radio_html_name = html_builder(radio_med)
                            $('#med_output').append("<tr><th scope='row'>"+radio_html_name+"</th><td>"+dose+"</td><td>"+ radio_med.med_commonuses+ "</td></tr>");
                            $("#multi_med_modal").modal('hide');
                        })
                    } else {
                        html_name = html_builder(med_list[0]);          
                        $('#med_output').append("<tr><th scope='row'>"+html_name+"</th><td>"+dose+"</td><td>"+ med_list[0].med_commonuses+ "</td></tr>");
                    }
                })
            }
        })
    });


    /*<------------Build title and body for Modal form----------->
    send to form to select correct medicaiton*/
    function modal_option_builder(modal_type, line) {
        if (modal_type =="multi") {
            $("#multi_med_modal_form").empty()

            input_text = line[0]
            med_list = line[1]
            $("#modaltitle").html('Multiple medications found for "'+input_text+'"!'); //set modal title to line string where multiple medications found

            form_lines=[]
            for (i = 0; i < med_list.length; i++) { 
                input_type = "radio";
                input_id = input_type +"_"+med_list[i].id;
                input_name = input_type+'-'+ input_text.replace(' ', '-');
                $("#multi_med_modal_form").append(`
                        <div class="form-check">
                            <input class="form-check-input" type="`+input_type+`" name="`+input_name+`" id="`+input_id+`" value="`+med_list[i].id+`">
                            <label class="form-check-label" for="`+input_id+`">`+med_list[i].display_name+`</label>
                        </div>`);
            };
            return input_name;
        } else if (modal_type = "no_match") {
            $("#modaltitle").html('No matches found for"'+med_list[0]+'"!');
            $("#multi_med_modal_form").html("");

        }
        
    };```

Like I said, this is probably easy, I just can't figure out how to do it.  Thank you!

标签： javascriptjquery

Answer 1

我想到了。没有办法像我描述的那样“阻止”代码执行（据我所知）。我只需要为id我创建的 html 元素分配一个，然后填充用户反馈。

这是代码：

    /*------------AJAX FUNCTION---------------------*/

    $("#med_input_form").submit(function(event){
        console.log('Med Input Form Submitted');
        event.preventDefault();

        var serializedData = $(this).serialize();
        $.ajax({
            type: "POST",
            url: '{% url "medrec_v2:post_medrec" %}',
            data: serializedData,
            success: function(response) {
                $('#med_output').empty();
                prevMedList = []
                var med_ajax = JSON.parse(response["med_output"]);
                line_no = 0
                med_ajax.line.forEach(line => {
                    console.log(line)
                    line_no += 1
                    input_text = line[0]
                    med_list = line[1]
                    dose = line[2]
                    sig = line[3]
                    $('#med_output').append("<tr id='output_"+line_no+"'></tr>");            
                    if (med_list.length == 0) {
                        
                        $("#no-med-modal").modal("show");
                        console.log("no-med-modal shown")
                        $("#multi-submit-btn").click( () => { 

                        });

                        
                    } else if (med_list.length > 1){
                        input_name = multi_modal_builder(line);
                        $("#multi-med-modal").modal('show');
                        //----------  WAIT FOR $("#multi-submit-btn").click() HERE!! -----------//
                        $("#multi-submit-btn").click( () => { 
                            radio_id = $("input[name='" + input_name + "']:checked").val()
                            for (i = 1; i < med_list.length; i++) { 
                                if (med_list[i].id == radio_id) {
                                    radio_med = med_list[i];
                                    break;
                                }
                            };
                            radio_html_name = html_builder(radio_med)
                            $('#output_'+line_no).append("<tr><th scope='row'>"+radio_html_name+"</th><td>"+dose+"</td><td>"+ sig+ "</td><td>"+radio_med.med_commonuses+ "</td></tr>");
                            $("#multi-med-modal").modal('hide');
                            prevMedList.append([radio_id,dose]);
                        })
                    } else {
                        for (i in prevMedList) {
                            if (med_list[0].id == prevMedList[0]){
                                prev="true";
                                break;
                        }}; 
                        if (prev=="true"){continue};
                        html_name = html_builder(med_list[0]);          
                        // console.log(html_name);
                        $('#output_'+line_no+'').append("<th scope='row'>"+html_name+"</th> <td>"+dose+"</td> <td>"+ sig+ "</td> <td>"+med_list[0].med_commonuses+ "</td>");
                        prevMedList.append([radio_id,dose]);
                    }
                })
            }
        })
    });