2016-12-07 37 views
0

我期待了解最佳过程而不是使用代码。处理使用jQuery加载可变数量的模态的最佳方法是什么?

我有不同数量的基于第一个答案动态生成的模态,每个模态都有一个问题。我的问题是:

什么是最好的方式来处理当前的模态,然后加载下一个给定的可变数量的模态,也知道什么时候该过程已经完成。我收集某种循环?

我将使用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(); 
}); 

感谢

回答

相关问题