jQuery Bootstrap-Modal während Dataload anzeigen/ausblenden

Question

Ich versuche, eine modale Bootstrap-Meldung anzuzeigen, während jQuery Daten in ein paar meiner DIVs (und dann wieder ausblenden). Die Daten aktualisieren ist OK. Das Modal blinkt jedoch sofort.

Dies ist auch der Fall, wenn ich einfach ein einfaches Lade-GIF-Bild anstelle des modalen verwenden. Nicht sicher, was ich falsch mache. Das Modal (oder GIF) muss beibehalten werden, bis die Daten vollständig aktualisiert sind.

Vielen Dank im Voraus für jede Hilfe!

JS Code:

$('.container').on('click', '.markAttend', function(event, ui) { 
    myApp.showPleaseWait(); //this calls the modal to display 
    event.preventDefault(); 
    var contactID = $(this).attr('contactID'); 
    var eid = <?php echo $eid ?>; 

    $.ajax({ 
     url: 'functions-ajax.php', 
     type: 'post', 
     data: 'action=markAttend&contactID=' + contactID + "&eid=" + eid, //send a value to make sure we want to destroy it. 
     success: function(data){ 
     $("#searchlist").load(location.href + " #searchlist"); //Refresh list 
     $("#attendanceTotal").load(location.href + " #attendanceTotal"); //Refresh list 
     $("#searchinput").val(''); //clear out search input field 
     myApp.hidePleaseWait(); //this calls the modal to hide 
     }    
    }); 
}); 

Answer 1

Nun, müssen Sie warten, bis load() Funktionen fertig sind.

Dafür benötigen Sie einen Rückruf wie folgt hinzuzufügen:

$("#searchlist").load(location.href + " #searchlist", function(){ 
    myApp.hidePleaseWait(); 
}); 

ABER, da Sie 2 load Funktionen haben, müssen einige komplexere Logik. Versuchen Sie es mit dieser:

$('.container').on('click', '.markAttend', function(event, ui) { 
    myApp.showPleaseWait(); //this calls the modal to display 
    event.preventDefault(); 
    var contactID = $(this).attr('contactID'); 
    var eid = <?php echo $eid ?>; 
    var counter = 0; 

    $.ajax({ 
     url: 'functions-ajax.php', 
     type: 'post', 
     data: 'action=markAttend&contactID=' + contactID + "&eid=" + eid, //send a value to make sure we want to destroy it. 
     success: function(data){ 
     $("#searchlist").load(location.href + " #searchlist", function(){ 
      counter++; 
      if(counter === 2) myApp.hidePleaseWait(); //this calls the modal to hide 
     }); //Refresh list 
     $("#attendanceTotal").load(location.href + " #attendanceTotal", function(){ 
      counter++; 
      if(counter === 2) myApp.hidePleaseWait(); //this calls the modal to hide 
     }); 
     $("#searchinput").val(''); //clear out search input field 

     }    
    }); 
}); 

ich nicht in der Lage bin, es zu testen, so lassen Sie mich kwow