Skip to content
Tags

, , , , ,

AJAX-Request mit FadeOut und FadeIn

von Alex an Februar 28th, 2008

In meinem Artikel Inhalte mit jQuery und AJAX aktualisieren beschreibe ich eine von wahrscheinlich vielen Varianten, den Inhalt eines Div-Layers per AJAX-Request zu tauschen. Dabei benutze ich das Javascript-Framework jQuery.

Toni schrieb mir in den Kommentaren, das es bei langsameren Server zu Unsynchronität der verschiedenen Vorgänge kommt, was wohl an dem setTimeout in Kombination mit dem Fade-Out-Effekt liegt. Hier ein neues Snippet in dem das Problem gefixt sein sollte. Toni greift einfach auf die Callback-Funktion des FadeOut-Effekts zurück und braucht somit den setTimeout nicht mehr.

1
2
3
4
5

...
<a href="javascript:void(0);" id="id_des_href">Inhalt aktualisieren</a>
 
<div id="container">Mein Inhalt</div>
...

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

$(document).ready(function(){
 
  $('#id_des_href').click(function(){
    $('#container').fadeOut(500, function(){ change('test.html') } );
  });
 
  function change(loc){
    $.ajax({
      url: loc,
      type: 'POST',
      success: function( neueDaten ) {
        $('#container').html( neueDaten );
      },
      complete: function(){
        $('#container').fadeIn(500);
      }
    });
  }
 
});

Zur Erklärung:
In Zeile 3-5 setzen wir das OnClick-Event des a-Tags mit der Id id_des_href. Bei Klick auf den Link wird dann der Div-Layer mit der Id container (innerhalb von 500ms) ausgeblendet und anschließen die Javascript-Funktion change() aufgerufen.

In Zeile 7-18 wird die Funktion change() definiert. Beim Aufrufen der Funktion übergibt man eine Datei als Parameter, welche dann für den AJAX-Request benutzt wird. Konnte die Datei aufgerufen und geladen werden, wird der Inhalt des Div-Layers mit der Id container mit dem Inhalt der Datei (loc) ausgetauscht. (Zeile 12) Der Container ist in diesem Moment ausgeblendet, so bekommt man von dem Wechseln nichts mit. Ist der AJAX-Request beendet (complete) dann wird der Div-Layer mit der Id container wieder eingeblendet.

Von → Allgemein

13 Kommentare →
  1. Jay Permalink

    Hallo und danke für dieses super Script! Ich würde gerne wissen, ob das Script so zu modifizieren ist, dass in der Adressleiste des Browser auch jeweils die korrekte URL der geladenen HTML-Datei angezeigt wird. Geht das?

  2. Jay Permalink

    …und gleich noch eine andere Frage: Ich habe etwas mit dem obigen Script herumgespielt, wobei mir aufgefallen ist, dass im zugeladenen html andere jQuery-Scripte, z.B. die “thickbox”-Lightbox nicht mehr funktionieren :-( Woran liegt das und wie kann man dieses Problem lösen?

  3. Alex Permalink

    Für die Adressleiste wäre eine ModRewrite Lösung möglich. Allerdings geht dann deine Ajax-Funktionalität flöten, da du die Seite ja neu laden musst, um die Adresszeile zu ändern.

    Was das laden der anderen jQuery-Scripte angeht: Die HTML-Datei die über diese Funktion ( change(…) ) geladen wird, liest den Inhalt nur aus. Ausgeführt wird dabei nichts. Damit die anderen Scripte funktionieren, musst du diese nach dem Laden neu initialisieren.

    1
2
3
4
5

    ...
complete: function(){
        $('#container').fadeIn(500, init());
      }
...

    und dann

    1
2
3
4

    function init() {
  // andere Scripte laden (z.B. die Lightbox)
  load_lightbox();
}

    Ich kenne die Funktion zum aufrufen der Lightbox jetzt gerade nicht, aber ich denke du weisst was ich meine…

  4. Jay Permalink

    Danke für die schnelle Antwort und die Hilfe! Schon mal gut zu hören, dass es eine Lösung geben könnte.

    Was mir an der “function init()” noch Schwierigkeiten breitet, ist
    1. Wo genau füge ich die Funktion ein? (Einfach hinter der “complete: function()”?)
    2. Zu “load_lightbox()”: Das thickbox-Script besteht ja aus mehreren Funktionen – kann ich nicht das komplette Script laden lassen? Also z.B.:
    “load_Pfad-zur-thickbox-Datei.js()” ;-)

  5. Alex Permalink

    Zu 1.
    Einfach irgendwo außerhalb der $(document).ready(function(){ … }

    Zu 2.
    Die Datei neu laden bringt dir nicht viel. Du musst schon die Initialisierung der Thickbox starten. Die Funktion heisst: tb_init()

    Guck einfach mal in die thickbox.js ab Zeile 13. Da werden ein paar Sachen aufgerufen, wenn die Seite geladen ist.

    Versuchs mal damit:

    1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

    $(document).ready(function(){
 
  $('#id_des_href').click(function(){
    $('#container').fadeOut(500, function(){ change('test.html') } );
  });
 
  function change(loc){
    $.ajax({
      url: loc,
      type: 'POST',
      success: function( neueDaten ) {
        $('#container').html( neueDaten );
      },
      complete: function(){
        $('#container').fadeIn(500, function(){ re_init() } );
      }
    });
  }
 
});
 
function re_init() {
   tb_init('a.thickbox, area.thickbox, input.thickbox'); // reinit thickbox
}
  6. Jay Permalink

    Großartig – vielen Dank! So klappt es tatsächlich :-D

    Bleibt mir nur noch die Frage, wie man Scripte initialisiert, die über keinen init-”Aufruf” verfügen, wie z.B. “localScroll” von Ariel Flesler:
    http://flesler.blogspot.com/2007/10/jquerylocalscroll-10.html

  7. Alex Permalink

    Ganz einfach. Im Falle von localScroll ist es dann so:

    1
2
3
4
5

    function re_init() {
  tb_init('a.thickbox, area.thickbox, input.thickbox'); // reinit thickbox
 
  $('#navigation').localScroll(); // reinit localscroll
}

    Im Prinzip machst du das selbe nochmal, was du auch beim Laden der Seite schon gemacht hast. Und alle anderen Scriptaufrufe, die auch auf den neuen Inhalt angewendet werden sollen, kommen da auch mit rein.

  8. Jay Permalink

    Vielen Dank ein weiteres mal! So hat es jetzt funktioniert :-)

  9. Me Permalink

    Hmm….
    warum tut das nur lokal…. was mach ich falsch?
    Hab den gleichen code benutzt und lokal geht das wunderbar.
    Auf’m server jedoch nicht.

  10. Me Permalink

    Also er mag nur den POST nicht. Mit GET tuts.

  11. psybermoon Permalink

    Hallo Zusammen…

    erst mal Danke für das kleine, aber feine jQ script. Um Daten einer php Datei auzulesen ist folgendes nötig.

    In Zeile 4 habe ich eine php angesprochen:

    1

    $('#container').fadeOut(500, function(){ change('test.php?') } );

    Um frische Daten zu erhalten muss das ‘?’ mitgesendet werden. Selbstverständlich lassen sich auch Variablen übertragen.
    Z.B.:

    1

    $('#container').fadeOut(500, function(){ change('test.php?variable1=wert1&amp;variable2=wert2') } );

    Zum Abschluss noch was kosmetisches. Mit einer kleinen Änderung am div, in dem der dynamische Inhalt erscheint. Damit das darunterliegende Elemente nicht springt, da ein leeres div 0 Pixel hoch ist im Moment wenn der neue Wert mittels jQuery übermittelt wird, bin ich zu folgender Lösung gekommen:

     Mein Inhalt

    Ahoi!

    …zum Abschluss der komplette Code in der neuen Version:

    1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

    #### in den Body Bereich ############################

<a href="javascript:void(0);" id="id_des_href" rel="nofollow">Inhalt aktualisieren</a>
 
<div id="irgendwas">&nbsp;<span id="container">Mein Inhalt</span></div>
 
##### in den Head Bereich ###########################

$(document).ready(function(){
 
  $('#id_des_href').click(function(){
    $('#container').fadeOut(500, function(){ change('test.php?') } );
  });
 
  function change(loc){
    $.ajax({
      url: loc,
      type: 'POST',
      success: function( neueDaten ) {
        $('#container').html( neueDaten );
      },
      complete: function(){
        $('#container').fadeIn(500);
      }
    });
  }
});
  12. Tim Permalink

    Hallo bin total anfänger mit solchen sachen…muss ich nur die oben genannte code in meine html datei tun und das wars schon?

    Oder muss ich noch was machen?

  13. Rix Permalink

    Hallo habe folgendes Problem…
    das Script läuft wunderbar…
    aber…

    ich klicke auf den link um den inhalt zu aktualisieren…
    die neue seite lädt sich in der das gleiche script steht um wieder zurück zur vorherigen seite zu gelangen…

    funktioniert jedoch nciht…

    würde mich über schnelle lösung sehr freuen…

    LG Rix

Einen Kommentar hinterlassen

Beachte: XHTML ist erlaubt. Ihre E-Mail-Adresse wird nie angezeigt.

Abonniere diese Seite via RSS