Ajax-Loader verschwindet nicht

Shopware 5 Programmierung
1

Hallo,

ich habe einen Ajax-Call zum Nachladen von Daten geschrieben.

Dazu möchte ich natürlich den obligatorischen Loader mit dunklem Overlay anzeigen.

ich nutze also vorm Ajax-Call ("body").setLoading(true);** und danach dann zum ausblenden wieder** („body“).setLoading(false);

 

leider bleibt der Loader aber trotz einem erfolgreichen Call oft stehen… was mach ich noch falsch?

 

ps: keine Fehlermeldungen in der Console.

 

EDIT:

 $(".js--loading-indicator, .js--overlay").fadeOut(300, function() { $(".js--loading-indicator, .js--overlay").remove(); });

 

so kann ich das Ding ausblenden… warum gehts auf dem normalen Weg nicht?

2

@FloC3 schrieb:

Hallo,

ich habe einen Ajax-Call zum Nachladen von Daten geschrieben.

Dazu möchte ich natürlich den obligatorischen Loader mit dunklem Overlay anzeigen.

ich nutze also vorm Ajax-Call $(„body“).setLoading(true); und danach dann zum ausblenden wieder** $(„body“).setLoading(false);**

 

leider bleibt der Loader aber trotz einem erfolgreichen Call oft stehen… was mach ich noch falsch?

 

ps: keine Fehlermeldungen in der Console.

 

EDIT:

$(„.js–loading-indicator, .js–overlay“).fadeOut(300, function() { $(„.js–loading-indicator, .js–overlay“).remove(); });

 

so kann ich das Ding ausblenden… warum gehts auf dem normalen Weg nicht?

 

Würde mich auch interessieren. Habe es auch auf diesem Wege mal probiert einzubinden, da der Loader aber nie Verschwand habe ich eine andere Lösunge gefunden. 

3

Das Overlay öffnest du über das entsprechende jQuery Plugin

$.overlay.open().then(function);

Bzgl. des Loaders: Was gibt der Ajax Request denn zurück? Was ist wenn du testweise mal setLoading bei der success & error Meldung rein packst - Schließt es sich dann? Du musst ja hier irgendwie debuggen. Was ist wenn du den loader direkt in der console killst?

Alternativ auch direkt über das jQuery Plugin

$.loadingIndicator.open().then(function(){
    console.log('blabla');
});

// close
$.loadingIndicator.close().then(function);

 

4

@Shopwareianer‍

H‍allo,

‍ich habe im Internet eben die Methode mit setLoading (true) gefunden. Wenn deine best Practise ist (wobei setLoading () eigentlich mehr best Practise klingt), kann ich auch gern das benutzen.

der Ajax-Request liefert JSON zurück. Ich hatte das setLoading(false) schon überall ausprobiert … in der Success-, Error-, Complete- und Always-Function.

Manchmal funktioniert es, manchmal nicht…

Wenn ich an gleicher Stelle meinen genannten Code einfüge, dann funktioniert es immer. Lässt für mich nur den Schluss zu, dass die setLoading irgendeinen Bug hat … 

bin ja wohl auch nicht der einzige.

 

Wenn ich es in der Console ausführe wenn der Loader hängt, dann schließt er sich.

5

Manchmal funktioniert es, manchmal nicht gibt es in der Programmierung nicht  Angry-Face

Da muss dann irgendwo was zwischen schießen, ein falsches Ergebnis zurück kommen oder sonstiges.

Da müsste man sich einfach mal den kompletten Code anschauen. Führst du das ganze bei einer EK aus oder dergleichen? Wie sieht denn der genaue Code aus?

Sonst kann man nur raten, vor allem ohne debugging.

6

Hallo @Shopwareianer‍

nein es ist eine ganz normale Seite, keine Einkaufswelt.

Es sollte doch davon unabhängig sein, welches Ergebnis zurückkommt vom Ajax-Call. Ist ja auch egal, hat mit dem Loader ja nichts zu tun.

Außerdem habe ich es wie gesagt in Success-, Error-, Complete- und Always-Callback eingebaut. Einer davon muss ja getriggert werden.

Ich habe natürlich getestet und parallel zum setLoading(false) auch noch eine console.log integriert. Der Consolen-Log funktioniert immer, das Ausblenden des Loaders NICHT.

 

ganz nebenbei: den Erhalt des korrekten Ergebnisses vom Ajax-Call sehe ich ja daran, dass er auf der Seite nachgeladen und angezeigt wird. Der geladene Content wird angezeigt, der Loader bleibt trotzdem stehen.

 

was soll ich da noch debuggen? Diese Funktion funktioniert offen bar nicht, und @Misengo‍ hat das Problem offenbar auch.

7

Da is nichts buggy.

Ich habe es gerade einmal getestet, funktioniert ohne Probleme:

$.loadingIndicator.open().then(function(){
    $.ajax({
        'dataType': 'jsonp',
        'url': 'https://jsonplaceholder.typicode.com/posts/1',
        'success': function (result) {
            setTimeout(function(){ 
                $.loadingIndicator.close();
            }, 3000);
        }
    });
});

Hier die Demo: https://sandbox.shopwareianer.com/lebensmittel/

Bzgl. der Einkaufswelt ist es so, dass du dich erst an das Event von der EK hängen musst, da ansonsten das Script nicht geladen wird, da jQuery & Co. nicht verfügbar ist.

8

@Shopwareianer‍

$.loadingIndicator.close(); ist ja auch nicht die Funktion die ich verwende.

Ich verwende $(“body”).setLoading(true/false)

 

es ist in keiner Einkaufswelt aber danke für den Hinweis.

9

Du kannst ja einfach $loadingIndicator verwenden.

bzgl. der EK: Hier ist es nur so, wenn du innerhalb der EK etwas machst. Bspw. ein Widget oder dergleichen.

Hier ist übrigens die Demo mit dem loadingIndicator: https://sandbox.shopwareianer.com/lebensmittel/

Wenn du es innerhalb einer EK machen würdest, wäre es dann:

$.subscribe('plugin/swEmotionLoader/onLoadEmotionFinished', function() {  
    $.loadingIndicator.open().then(function(){
        $.ajax({
            'dataType': 'jsonp',
            'url': 'https://jsonplaceholder.typicode.com/posts/1',
            'success': function (result) {
                setTimeout(function(){ 
                    $.loadingIndicator.close();
                }, 3000);
            }
        });
    });
}

Bei einem Modal ist es dasselbe wie ich letztens bemerkt habe. Da hängst du dich dann an plugin/swAjaxVariant/onRequestData

PS: Habe es nun auch mit $(“body”).setLoading(true/false) getestet. Funktioniert ebenfalls ohne Probleme, siehe Demo.

1 „Gefällt mir“