Bootstrap generic modal с callbacks

Question

Я заменил функцию JS Confirm с помощью автозагрузки, этот модальный асинхронный, поэтому мне также пришлось изменить свой код и добавить обратные вызовы.

То, что я пытаюсь это:

псевдокоде

if `simApp["con1"]` then show first modal with 2 buttons 
    if return is clicked -> close modal. 
    if continue is clicked -> open second modal 
     if return is clicked -> close modal 
     if submit is clicked -> submit form (not included in code) 
else open second modal 
    if return is clicked -> close modal 
    if submit is clicked -> submit form (not included in code) 

Это все очень просто, когда вы не используете обратные вызовы, которые я довольно новыми для.

Итак, это то, что я сделал, его работая, я думаю, это как-то связано с общим использованием модального. - JSFIDDLE

HTML

<div class="modal fade" id="generalModalTwoButtons" role="dialog"> 
    <div class="modal-dialog modal-lg"> 
     <div class="modal-content"> 
      <div class="modal-header bg-primary"> 
       <button type="button" class="close" data-dismiss="modal">&times;</button> 
       <h4 class="modal-title"></h4> 

      </div> 
      <div class="modal-body"></div> 
      <div class="modal-footer"> 
       <button type="button" id="btn-return" class="btn btn-primary" data-dismiss="modal"></button> 
       <button type="button" id="btn-submit" class="btn btn-primary" data-dismiss="modal"></button> 
      </div> 
     </div> 
    </div> 
</div> 
<button id="go">GO</button> 

JS

simApp = {}; 
simApp["con1"] = true; //in this code I hard-coded the conditions to ture 
simApp["arr"] = [1]; 

$("#go").click(function() { 
    if (simApp["con1"] && simApp["arr"].length < 5) { 
     var msg = '<p>msg1</p>'; 

     updateGeneralTwoButtonsModal('#a94442', 'header1', msg, 'Return', 'Continue', function (result) { 
      if (result === true) { 
       confirmBeforeSubmit(submitFormApproved); 
      } 
     }); 
    } else { 
     confirmBeforeSubmit(submitFormApproved) 
    } 
}); 

function submitFormApproved(result) { 
    if (result === true) { 
     console.warn("submitted"); 
    } 
} 

function confirmBeforeSubmit(callback) { 
    var msg = '<p>msg2</p>'; 
    if (simApp["con1"]) msg = '<p>msg2-changed</p>'; 

    updateGeneralTwoButtonsModal('#31708f', 'header2', msg, 'Return', 'Submit', callback); 
} 

function updateGeneralTwoButtonsModal(color, title, body, btnReturn, btnSubmit, callback) { 
    var confirm = $('#generalModalTwoButtons'); 
    confirm.find('.modal-header').css('color', color); 
    confirm.find('.modal-title').text(title); 
    confirm.find('.modal-body').html(body); 
    confirm.modal('show'); 

    confirm.find('#btn-return').html(btnReturn).off('click').click(function() { 
     confirm.modal('hide'); 
     callback(false); 
    }); 
    confirm.find('#btn-submit').html(btnSubmit).off('click').click(function() { 
     confirm.modal('hide'); 
     callback(true); 
    }); 

} 

Любая идея, что я сделал не так?

P.S - В целях обучения я хотел бы избежать использования обещаний по этому решению.

Answer 1

Здесь вы пойдете, основная проблема, которую я обнаружил, заключается в том, что вы не блокируете распространение события щелчка, которое автоматически закрывает модальности. Я добавил обработчик события stopPropagation в случае кнопки continue/submit.

simApp = {}; 
 
simApp["con1"] = true; 
 
simApp["arr"] = [1]; 
 

 
$("#go").click(function() { 
 
    if (simApp["con1"] && simApp["arr"].length < 5) { 
 
     var msg = '<p>msg1</p>'; 
 

 
     updateGeneralTwoButtonsModal('#a94442', 'header1', msg, 'Return', 'Continue', function (result) { 
 
      if (result === true) { 
 
       confirmBeforeSubmit(submitFormApproved); 
 
      } 
 
     }); 
 
    } else { 
 
     confirmBeforeSubmit(submitFormApproved) 
 
    } 
 
}); 
 

 
function submitFormApproved(result) { 
 
    if (result === true) { 
 
     console.warn("submitted"); 
 
    } 
 
} 
 

 
function confirmBeforeSubmit(callback) { 
 
    var msg = '<p>msg2</p>'; 
 
    if (simApp["con1"]) msg = '<p>msg2-changed</p>'; 
 

 
    updateGeneralTwoButtonsModal('#31708f', 'header2', msg, 'Return', 'Submit', callback); 
 
} 
 

 

 
function updateGeneralTwoButtonsModal(color, title, body, btnReturn, btnSubmit, callback) { 
 
    var confirm = $('#generalModalTwoButtons'); 
 
    confirm.find('.modal-header').css('color', color); 
 
    confirm.find('.modal-title').text(title); 
 
    confirm.find('.modal-body').html(body); 
 
    confirm.modal('show') 
 
    
 

 
    confirm.find('#btn-return').html(btnReturn).off('click').click(function() { 
 
     confirm.modal('hide'); 
 
     
 
     callback(false); 
 
    }); 
 
    confirm.find('#btn-submit').html(btnSubmit).off('click').click(function (event) { 
 
     event.preventDefault(); 
 
     event.stopPropagation(); 
 
     if(btnSubmit != "Continue") { 
 
     \t confirm.modal('hide'); 
 
     } 
 
     callback(true); 
 
    }); 
 

 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> 
 
<div class="modal fade" id="generalModalTwoButtons" role="dialog"> 
 
    <div class="modal-dialog modal-lg"> 
 
     <div class="modal-content"> 
 
      <div class="modal-header bg-primary"> 
 
       <button type="button" class="close" data-dismiss="modal">&times;</button> 
 
       <h4 class="modal-title"></h4> 
 

 
      </div> 
 
      <div class="modal-body"></div> 
 
      <div class="modal-footer"> 
 
       <button type="button" id="btn-return" class="btn btn-primary" data-dismiss="modal"></button> 
 
       <button type="button" id="btn-submit" class="btn btn-primary" data-dismiss="modal"></button> 
 
      </div> 
 
     </div> 
 
    </div> 
 
</div> 
 
<button id="go">GO</button>