Lade-Animation vor AJAX-Call

[Chronos]

Hallo Forum,

ich weiß gerade nicht so richtig nach was ich suchen könnte um mir bei meinem Problem zu helfen ^^.
Ich lade über einen AJAX Call ein Bild auf einen Imagehoster, während dieses Vorgangs öffnet sich ein neuer Tab in dem ich mit

var w = window.open();
w.document.write('Wird hochgeladen...');

"Wird hochgeladen..." schreibe, wenn der Uploadvorgang fertig ist, wechsele ich auf die Seite mit dem hochgeladenen Bild:

var url = 'http://imgur.com/' + data.data.id;
w.location.href = url;

Jetzt ist mir aber
"Wird hochgeladen..." als reiner Text ein wenig zu hässlich und ich habe mir eine kleiner Ladeanimation über CSS gebaut, als extra Seite.

Jetzt die Frage, wie binde ich denn das ein?

Danke für eure Hilfe

 

[Tronjer]

Wie bindest du denn das document.write() ein?

Der einfachste Weg wäre doch, den beforeSend() Handler des AJAX-Calls zu verwenden. Aber ich würde keine extra Seite laden. Das könnte doch auch ein unsichtbarer Container sein.

 

[Chronos]

Okay danke, das ist schon mal nicht schlecht.

Bisher hatte ich es so:

var w = window.open();
w.document.write('Uploading to imgur.com...');

$.ajax({
    data: {
      
    },
    dataType: 'json',            
}).success(function(data) {                                 
    var url = 'http://imgur.com/' + data.data.id;       
    w.location.href = url;                                                                        
});

Also nur der relevante Part.

Jetzt habe ich wie von dir vorgeschlagen, die Box einfach auf der "Startseite" versteckt und eine Funktion zum ein- und ausblenden geschrieben:

function hideAndShowLoadingAnimation() {              
    box_loading.fadeToggle( "slow", "linear" );
};

Dazu in dem AJAX-Call das beforeSend:

beforeSend : function(){
    hideAndShowLoadingAnimation();
}

So...

jetzt noch die Frage, wenn der Aufruf durch ist und das Bild hochgeladen ist, sprich wir im success sind,
würde ich das Laden wieder ausblenden wollen und den Tab mit dem Bild öffnen.

Also würde ich ja oben genanntes

var w = window.open();

mit meiner Ausblend-Funktion zusammen ins success schreiben, also so:

.success(function(data) {              
    hideAndShowLoadingAnimation();
              
     var url = 'http://imgur.com/' + data.data.id;      
     var w = window.open();
     w.location.href = url;                                                           
});

Das öffnet jetzt allerdings ein neues Fenster, nicht mehr wie in meiner ersten Variante einen Tab.

Hast du noch eine Idee wie man das macht? Ein neues Fenster geht halt mal gar nicht :/


Edit:

Habe herausgefunden, dass das wohl so nicht ohne weitere geht weil ein Tab durch einen AJAX-Call aufzurufen keine "Trusted"-Action mehr ist, also nicht vom User kommt, darum öffnet sich auch nur auf Zustimmung im Popup. hm hm hm.

Wenn man den Call Synchron ausführt öffnet es sich zwar in einem Tab aber ich sehe die Ladeanimation nicht, weil man direkt zu dem Tab kommt.

 

[Tronjer]

Wieso eigentlich window.open? Der User soll beim Upload ein Feedback erhalten, um zu wissen, dass sein Browser nicht abgestürzt ist. Anschließend wird er auf eine andere Seite redirected und darüber unterrichtet, dass sein Bild hochgeladen wurde.

Erste Frage: Gibt es dafür ein Plugin? Falls ja: return true.
Anderenfalls baut man es manuell. Das Feedback könnte eine einfache Funktion sein, die vor dem Ajax Call aufgerufen oder eben dem beforeSend Handler übergeben wird. Dafür würde sich das Einblenden eines zuvor unsichtbaren Containers oder ein Modal anbieten. Die Nachricht nach dem Redirect wird per PHP über $_POST oder eine gesetzte Session auf der neuen Seite ausgegeben.

 

[Chronos]

Na häh ^^? Ich glaube du verstehst mich bissl falsch?
Nein es gibt kein Plugin würde ich auch gar nicht wollen, ich will an dem Beispiel nur etwas üben mit der API umzugehen.

Der User aka. sowieso nur ich, bekommt doch ein Feedback, sieht dann so aus während des Hochladens:

Der Container in dem der Ladekreis ist, ist ja ausgeblendet - diesen blende ich, wie schon gesagt dann ein.
Wenn der AJAX-Call durch ist, wird dieser ausgeblendet und das Feedback das es geklappt hat,
ist einfach nur das sich die Imgur Seite mit dem hochgeladenen Bild öffnet.
Vollkommen ausreichend.

Mit PHP wird da auch schon mal gar nichts passieren, brauche ich auch nicht, wird nicht eingesetzt.

Das sieht dann Live so aus:
http://wdlmaster.de/TonyS/dev/web/imgur_upload/0.0.1/imgur_upload.html

(es wird gefragt ein Popup zuzulassen).

So und wenn ich den Aufruf nun synchron mache, öffnet es sich zwar in einem Tab aber man sieht nichts mehr von der Ladeanimation

Danke für die Zeit :)

 

[Tronjer]

Nur zur Info: der Safari auf meinem Macbook Pro fragt weder, noch öffnet er ein Popup. Aber wenn du den User bei success auf eine fremde Seite weiterleitest, kannst du dort natürlich nicht machen.