jqueryを使用してループ内でブートストラップ・モーダルを呼び出す方法

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> 

は、この1とが必要です。

Answer 1

主な問題は、ConfirmYesNo機能がループの実行を一時停止しないことです。それはちょうどそのHTML（モーダル）のビットを目に見えるようにして、次に続けます。したがって、ユーザーがモーダルに応答する前に、ループは何度も何度も繰り返されますが、モーダルコンテンツとイベントハンドラを次のコンテンツセットで瞬時に上書きして終了します。このため、最後のアイテムのみが表示されるように見えます。他のアイテムは表示されますが、実際に上書きされることはなく、実際には見えない可能性があります。古いものは決して解決されません。

もう1つのアドバイス：async: falseは悪い考えです。それは悪いユーザエクスペリエンスを引き起こします（ブラウザはajaxリクエストの間ロックされ、何もクリックすることはできません）。また、既に非推奨になっています。

ここでは、ループの使用をまったく避けて、約束事に基づく代替ソリューションを紹介します。私はこのスニペットで実行可能にするために少し修正しましたが、私が使用できなかったオリジナルコードのビットを残しておいて、どこに復元するかを確認することができます。私はあなたの人物オブジェクトの構造を推測しなければならなかったので、実際のデータに合わせてそのオブジェクトを変更する必要があるかもしれません。

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>