Question

我希望了解最佳流程，而不是使用代码。

我根据第一个答案动态生成不同数量的模态，每个模态都有一个问题。我的问题是：

处理当前模态然后加载下一个给定可变数量的模态的最佳方法是什么，也知道过程何时完成。我收集了某种循环？

我将使用AJAX提交数据并使用jQuery加载模态。我目前在HTML中加载了所有模态，其中包含个人ID和第一个模式显示。

    //Form 1 Submit- Home Page (Sumbits home form and displays diagnosis form)

$('.close').on('click', function () {
    window.location.reload(true);
})

$('#continue_btn').on('click', function () {
$('#enq_2').remove();
  var form = $("#form_1");
  var app = $("[name='appliance']", form).val();


var a = $('#form_1').serialize();
var url = $('#form_1').attr('action');
var type = $('#form_1').attr('method');
console.log(a);
    $('#form_1').submit(function(event) {

        event.preventDefault();
        var formElem = $(event.currentTarget);

        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                        }
                    });

                    $.ajax({
                        type        : type,
                        url         : url,
                        data        : a,
                        dataType    : 'json'


                            })
                            .done(function(response){
                                console.log("Done!");
                            //    $('#myModal').modal('show'); //Show Type
                                var enquiry_number = response.enquiry;
                                var questions = response.questions;
                                var question_title = response.question_title;
                                var answ = response.answers;
                                console.log(questions[0].question);

                               $('#customer_enquiry_id').attr('value', enquiry_number)

                                $.each(questions, function (index, value) {
                                    $( ".modals" ).append('<div id="myModal_'+index+'" class="modal" role="dialog" data-backdrop="static" data-keyboard="false"><div class="modal-dialog"><div class="modal-content"><div class="modal-header"><button type="button" class="close" data-dismiss="modal">&times;</button><h4 class="modal-title" id="myModal_title">'+value.question+'</h4></div><div class="modal-body"></div><div id="form_2_check"><div class="modal-footer"><button type="button" class="btn btn-success" id="close_modal_1">Next</button></div></div></div></div></div>');

                                });

                               $('#myModal_0').modal('show'); //Show Type

                                })

                                   .fail(function(jqXHR, textStatus, errorThrown){
                                    console.log("Fail!", jqXHR, textStatus, errorThrown);
                                });
                            });
$('#form_1').submit();
});

由于

Answer 1

如果您愿意使用第三方库 - 您可以查看SweetAlert2库，它可以让您做得很好;

https://limonte.github.io/sweetalert2/

使用jQuery处理加载可变数量模态的最佳方法是什么？

1 个答案: