如何在使用jquery的循環中調用bootstrap模式

Question

我在這裏有一個代碼將數據插入到數據庫中，如果數據已經存在，它將首先進行過濾，並詢問用戶是否要繼續使用引導模式插入數據。現在問題是它只顯示在循環結束時，我想要的是每次在數據庫中找到一個彈出窗口模式將顯示的數據。

$.each(person, function(index, value){ 
    var existing = DisticntVal(value); 

    if(existing == 0){ 
     InsertPerson(value); 
    }else{ 
     var a = ConfirmYesNo(value['person'] + " already exist. Do you want to continue?"); 
     a.then(function (b) { 
      if(b == 1){ 
       InsertPerson(value); 
      } 
     }); 
    } 

}); 

function ConfirmYesNo(msg) { 
    var dfd = jQuery.Deferred(); 
    var $confirm = $('#exampleModal'); 
    $confirm.modal('show'); 
    $('#message').html(msg); 

    $('#btnyes').off('click').click(function() { 
     $confirm.modal('hide'); 
     dfd.resolve(1); 
     return 1; 
    }); 
    $('#btnno').off('click').click(function() { 
     $confirm.modal('hide'); 
     return 0; 
    }); 
    return dfd.promise(); 
} 

function DisticntVal(person) { 
    var returncount; 
    var nperson = JSON.stringify(person); 

    $.ajax({ 
     url: 'chckdistinct.php', 
     type: 'post', 
     data: {person: nperson}, 
     async: false, 
     success: function(response) { 
      returncount = response; 
     }, 
     error: function(xhr, desc, err) { 
      console.log(xhr); 
      console.log("Details: " + desc + "\nError:" + err); 
     } 
    }); 
    return returncount; 
} 

<!-- Modal --> 
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true"> 
    <div class="modal-dialog" role="document"> 
    <div class="modal-content"> 
     <div class="modal-header"> 
     <h5 class="modal-title" id="exampleModalLabel">Modal title</h5> 
     <button type="button" class="close" data-dismiss="modal" aria-label="Close"> 
      <span aria-hidden="true">&times;</span> 
     </button> 
     </div> 
     <div class="modal-body"> 
     <p id="message"></p> 
     </div> 
     <div class="modal-footer"> 
     <button type="button" class="btn btn-secondary" data-dismiss="modal" id="btnno">No</button> 
     <button type="button" class="btn btn-primary" id="btnyes">Yes</button> 
     </div> 
    </div> 
    </div> 
</div> 

需要幫助的這一個。

Answer 1

主要問題是您的ConfirmYesNo函數不會暫停執行循環。它只是讓這一點HTML（模態）可見，然後繼續。因此，在用戶有機會響應模態之前，循環會一次又一次地繼續，但幾乎立即用下一組內容覆蓋模態內容和事件處理程序，直到它結束。這就是爲什麼你看起來只看到最後一個項目。其他項目會顯示出來，但它們被覆蓋的速度太快了，您不可能真正看到它們，舊的承諾永遠不會得到解決。

另一條建議：async: false是一個壞主意。它會導致不良的用戶體驗（瀏覽器在ajax請求期間被鎖定，並且沒有任何內容可以被點擊），並且已經被棄用，所以瀏覽器將來可能會刪除該功能。

這是一個完全基於promise的替代解決方案，完全避免了使用循環。我稍微修改了一下，使它在這段代碼中可運行，但我遺留了原來的代碼中我無法使用的部分，因此您可以看到它們的恢復位置。我還必須猜測你的人物對象的結構，所以你可能需要改變它以適應你的真實數據。

var people = [{ 
 
    "id": 1, 
 
    "name": "A" 
 
    }, { 
 
    "id": 2, 
 
    "name": "B" 
 
    }, { 
 
    "id": 3, 
 
    "name": "C" 
 
    }, 
 
    { 
 
    "id": 4, 
 
    "name": "D" 
 
    } 
 
]; 
 

 
$(function() { 
 
    $("#begin").click(processInserts); 
 
}); 
 

 
function processInserts() { 
 
    processIndividualInsert(0); 
 
} 
 

 
function processIndividualInsert(index) { 
 
    if (index < people.length) { 
 
    var person = people[index]; 
 

 
    return distinctVal(person).then(function(existing) { 
 
     if (existing == 0) { 
 
     console.log(person.name + " doesn't exist"); 
 
     insertPerson(person); 
 
     return processIndividualInsert(index + 1); 
 
     } else { 
 
     return ConfirmYesNo(person.name + " already exists. Do you want to continue?").then(function(b) { 
 
      if (b == 1) { 
 
      console.log(person.name + " already exists. User opted to continue with the insert anyway"); 
 
      insertPerson(person); 
 
      return processIndividualInsert(index + 1); 
 
      } else { 
 
      console.log(person.name + " already exists. User opted not to continue with the insert"); 
 
      return processIndividualInsert(index + 1); 
 
      } 
 
     }); 
 
     } 
 

 
    }); 
 
    } else { 
 
    console.log("All completed"); 
 
    return false; 
 
    } 
 
} 
 

 
function distinctVal(person) { 
 

 
    //generate arbitrary dummy response data: 
 
    var response = 0; 
 
    if (person.id % 2 == 0) response = 1; 
 
    //dummy promise for testing: 
 
    var prom = $.Deferred(); 
 
    prom.resolve(response); 
 
    return prom.promise(); 
 

 
    //this would be your real code instead of the dummy code: 
 
    /* 
 
    return $.ajax({ 
 
    url: 'chckdistinct.php', 
 
    type: 'post', 
 
    data: { 
 
     person: JSON.stringify(person); 
 
    }, 
 
    error: function(xhr, desc, err) { 
 
     console.log(xhr); 
 
     console.log("Details: " + desc + "\nError:" + err); 
 
    } 
 
    });*/ 
 
} 
 

 
function ConfirmYesNo(msg) { 
 
    var dfd = jQuery.Deferred(); 
 
    //dummy code to avoid bootstrap 
 
    $('#exampleModal').show(); 
 

 
    //your real code would be: 
 
    /*var $confirm = $('#exampleModal'); 
 
    $confirm.modal('show');*/ 
 
    $('#message').html(msg); 
 

 
    $('#btnyes').off('click').click(function() { 
 
    //dummy code to avoid bootstrap 
 
    $('#exampleModal').hide(); 
 
    //your real code would be: 
 
    /*$confirm.modal('hide'); */ 
 
    dfd.resolve(1); 
 
    }); 
 
    $('#btnno').off('click').click(function() { 
 
    //dummy code to avoid bootstrap 
 
    $('#exampleModal').hide(); 
 
    //your real code would be: 
 
    /*$confirm.modal('hide'); */ 
 
    dfd.resolve(0); 
 
    }); 
 
    return dfd.promise(); 
 
} 
 

 
function insertPerson(person) { 
 
    //don't know what's supposed to go in here, but presumably another async ajax call which will insert the person data 
 
    return true; 
 
}

.modal { 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<button type="button" id="begin"> 
 
    Click to Begin 
 
</button> 
 
<!-- Modal --> 
 
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true"> 
 
    <div class="modal-dialog" role="document"> 
 
    <div class="modal-content"> 
 
     <div class="modal-header"> 
 
     <h5 class="modal-title" id="exampleModalLabel">Modal title</h5> 
 
     </div> 
 
     <div class="modal-body"> 
 
     <p id="message"></p> 
 
     </div> 
 
     <div class="modal-footer"> 
 
     <button type="button" class="btn btn-secondary" data-dismiss="modal" id="btnno">No</button> 
 
     <button type="button" class="btn btn-primary" id="btnyes">Yes</button> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>