So rufen Sie bootstrap modal in einer Schleife mit jquery

Question

Ich habe einen Code hier, der Daten in die Datenbank einfügen wird, wird es zuerst filtern, wenn die Daten bereits vorhanden sind und Benutzer fragen, ob er fortsetzen möchte, Daten mit Bootstrap modal einzufügen. Jetzt ist das Problem nur am Ende der Schleife zu sehen, was ich will, ist jedes Mal, wenn Daten in der Datenbank gefunden wurden, wird ein Popup-Modal angezeigt.

$.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> 

Benötigen Sie mit diesem helfen.

Answer 1

Das Hauptproblem ist, dass Ihre ConfirmYesNo Funktion die Ausführung der Schleife nicht pausiert. Es macht nur das bisschen HTML (das Modal) sichtbar und geht dann weiter. Bevor der Benutzer also die Möglichkeit erhält, auf das Modal zu reagieren, wird die Schleife immer wieder fortgesetzt, überschreibt jedoch fast sofort die modalen Inhalte und Event-Handler mit dem nächsten Satz von Inhalten, bis sie zu Ende geht. Aus diesem Grund scheinen Sie nur den letzten Gegenstand zu sehen. Die anderen Elemente werden zwar angezeigt, aber sie werden so schnell überschrieben, dass Sie sie kaum sehen können und die älteren Versprechen werden nie gelöst.

Ein weiterer Hinweis: async: false ist eine schlechte Idee. Es führt zu einer schlechten Benutzererfahrung (der Browser ist für die Dauer der Ajax-Anfrage gesperrt und es kann nichts angeklickt werden) und ist auch schon veraltet, so dass der Browser das Feature wahrscheinlich in Zukunft entfernen wird.

Hier ist eine alternative Lösung, die vollständig auf Versprechungen basiert und die Verwendung einer Schleife überhaupt vermeidet. Ich habe es leicht modifiziert, damit es in diesem Snippet lauffähig ist, aber ich habe die Teile Ihres ursprünglichen Codes, die ich nicht auskommentieren konnte, übrig gelassen, so dass Sie sehen können, wo Sie sie wiederherstellen können. Ich musste auch die Struktur Ihrer Personenobjekte erraten, so dass Sie diese möglicherweise ändern müssen, um sie Ihren realen Daten anzupassen.

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>