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.

UPDATE 28.02.2008 // Überarbeitete Version (Danke Toni)

Möchte man einen bestimmten Bereich auf seiner Seite per AJAX aktualisieren, so ist das mit Hilfe von jQuery leicht gemacht. Einfach einen AJAX-Aufruf über $.ajax starten und in der success-Funktion die aktuellen Daten per jQuery mit den alten austauschen. Read the rest of this entry »