jQuery fadeIn arbeitet nur manchmal

[Sprint]

Hallo zusammen,

bei meinem aktuellen Projekt sind ein paar Teile dabei, die nicht innerhalb von Millisekunden erledigt sind, z.B. umfangreiche DB Suchen oder PDF Erstellungen. Damit der User nicht nervös wird und irgendwas unüberlegtes tut, soll eine kleine CSS Animation eingeblendet werden. Das funktioniert auch überall, außer auf einer Seite. Da nur manchmal und es ist auch kein Muster zu erkennen.

Insgesamt läuft das ganze so ab. Das Formular wird per jQuery überprüft und bei Erfolg an eine DB Änderung geschickt. Wenn es von da zurückkommt, soll u.U. eine PDF Erstellung eingeleitet werden.

$(document).ready(function () {

    $('#fin').focus(function () {
        $(this).removeClass('error_class');   // Feldmarkierung entfernen
    });

    $('.daten_form').submit(function () {

        $("#loader-wrapper").fadeIn(10);
        hasError = false;

        if ($('#delkfz').prop('checked',false)){    // wenn Datensatz nicht gelöscht werden soll
            if ($('#fin').val() == '') {   // Fehleingabe festgestellt
                $('#fin').addClass('error_class');
                hasError = true;
            }
        }

        if (hasError == true) {
            $("#loader-wrapper").fadeOut("normal");
            $('.error_box').show();
        } else {
            var einzelfz = false;
            var weiter = false;
            if ($('#einzelfz').val() == '1')
                einzelfz = true;   // PDF sofort erzeugen
            if ($("#weiter").prop('checked') == true)
                weiter = true;   // weiteren Datensatz ändern
            var kvid = $('#kvid').val();
            $.ajax({
                type: 'POST',
                url: 'kvc_write.php',
                cache: false,
                data: $(".daten_form").serialize(),
                success: function (data) {
                    if (data == "error") {
                        $("#loader-wrapper").fadeOut("normal");
                        $('.success_box').hide();
                        $('.error_box').show();
                    } else if (data == "logout") {   // Session abgelaufen
                        var url = "index.php?ablauf=1";
                        $(location).attr('href',url);
                    } else if (data == "success" && (einzelfz || !weiter)) { // PDF erstellen
                        var url = "prepkvpdf.php?kvid="+kvid;
                        $(location).attr('href',url);
                    } else {
                        $("#loader-wrapper").fadeOut("normal");
                        $('.error_box').hide();
                        $('.success_box').show();
                    }
                }
            });
        }
        return false;
    });
});

Immer ein- und ausgeblendet wird die Animation, wenn entweder eine Fehleingabe gefunden wird oder wenn "weiter" gesetzt war um einen weiteren Datensatz zu bearbeiten.

Wenn aber die PDF Erstellung aufgerufen wird, kommt die Animation nur in max. 10% aller Aufrufe. Gelegentlich ist auch zu erkennen, daß das fadeIn zwar anfängt, aber nach ein paar Prozent stehenbleibt, so daß die Animation dann hauchdünn zu erkennen ist.

Zuerst hatte ich gedacht, daß das PHP Script zu schnell zurück käme, aber auch eine Verzögerung um mehrere Sekunden brachte kein Ergebnis.

Auch eine Umstellung auf das neueste jQuery 3.2.0 brachte nur eine kurzfristige Besserung. Nach ein paar Erfolgen fing das Spielchen wieder an.

Auf allen anderen Seiten, auf denen die Animation in der selben Weise genutzt wird, funktioniert es problemlos. Warum nicht hier? Hat jemand eine Idee?

 

[SpiceLab]

Auch eine Umstellung auf das neueste jQuery 3.2.0 brachte nur eine kurzfristige Besserung. Nach ein paar Erfolgen fing das Spielchen wieder an.

Mein erster Gedanke: Browsercache.

Weil

       ...
            $.ajax({
                type: 'POST',
                ...
                cache: false,

und das Zitat von http://api.jquery.com/jquery.ajax/ bzgl. cache:

Note: Setting cache to false will only work correctly with HEAD and GET requests.

Wenn's tatsächlich daran liegen sollte, könnte dieser Artikel hilfreich sein:

• https://gosukiwi.svbtle.com/the-right-way-of-caching-ajax-requests-with-jquery

 

[Sprint]

Wenn ich den Artikel richtig verstehe, geht es darin aber darum, Ajax Requests zu cachen. Andererseits habe ich mal Versuche gemacht, indem ich vor jeder Abfrage den Chache geleert habe bzw. ganz abgeschaltet habe. Auch kein Unterschied.

Wenn ich den ganzen Teil, in dem die prepkvpdf.php aufgerufen wird, auskommentiere, läuft die Animation einwandfrei. Dieses Script läuft aber immer mehrere Sekunden und auch wenn ich es gleich als allererstes mit sleep() anhalte, läuft die Animation nicht ab. Oder nur ganz schwach, weil fadeIn zu früh aufgehört hat.

Für mein Verständnis dürfte aber beim Client nichts passieren, da keine Rückmeldung mehr kommt und das Script, erst wenn alle PDFs erstellt sind, eine neue Seite sendet und somit die alte mit der Animation ablöst.

Natürlich geht es auch so, aber es weiß niemand, wie die DAUs, die später damit arbeiten sollen, reagieren, wenn sekundenlang nichts passiert.

Könnte das was bringen, wenn ich anstelle dieses Aufrufs einen weiteren Ajax Request absetze und die Erstellung und Anzeige der PDF auftrenne?