Inhalte mit jQuery und AJAX aktualisieren

von Alex an Oktober 19th, 2007

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.

Nehmen wir mal an, wir haben folgenden DIV-Container, dessen Inhalt wir aktualisieren möchten.

1
2
3

...
<div id="container">Mein Inhalt</div>
...

Der entsprechende AJAX-Aufruf über jQuery würde dann so aussehen.

$.ajax({
  url: 'script.php',
  type: 'POST',
  success: function( neueDaten ) {
    $('#container').html( neueDaten );
  }
});

Erklärung des AJAX-Aufrufs:
url – Hier geben wir an, welches Datei aufgerufen werden soll.
type – Welche Methode soll zur Übergabe der in “data” angegebenen Daten an das Script benutzt werden (Wir übergeben keine Daten, deshalb gibt es auch kein “data”)
success – Diese Funktion wird aufgerufen, wenn der AJAX-Aufruf erfolgreich war. An den Parameter der Funktion (hier: “neueDaten”) werden die vom Script zurückgegebenen Daten übergeben.

Jetzt wird der Inhalt des DIV-Containers ausgetauscht. Das ganze funktioniert mehr oder weniger unspektakulär. Ich möchte jetzt allerdings noch zusätzlich, dass der alte Inhalt erst ausgeblendet wird und dann der neue geladene Inhalt eingeblendet wird. Wir ändern unseren AJAX-Aufruf also noch ein wenig ab.

$.ajax({
  url: 'script.php',
  type: 'POST',
  beforeSend: function(){
    $('#container').fadeOut(500);
  },
  success: function( neueDaten ) {
    window.setTimeout( function() {
      $('#container').html( neueDaten );
    },500);
  },
  complete: function(){
    $('#container').fadeIn(500);
  }
});

Was haben wir geändert?
beforeSend – Als erstes habn wir die Funktion “beforeSend” hinzugefügt. Diese wird aufgerufen (wie der Name schon sagt) bevor der AJAX-Aufruf abgschickt wird. Hier blenden wir nun also erstmal unsere DIV-Container aus. Die 500 gibt an, mit welcher Geschwindigkeit (ms) das ganze ausgeblendet wird.
success – Hier haben wwir unseren Austausch-Vorgang in ein JavaScript-Timeout gepackt, damit der Inhalt erst ausgetauscht wird, wenn der Container auch wirklich ausgeblendet ist. Hier ist es wichtig, dass die angegebene Zeit mindestens so groß ist, wie die Ausblende-Zeit in der fadeOut-Funktion.
complete – Diese Funktion wird aufgerufen, wenn der AJAX-Aufruf beendet ist. Wir nutzen also diese möglichkeit um unseren DIV-Container wieder einzublenden.

Das ist mir Sicherheit nur eine von vielen Möglichkeiten einen Inhalt sauber auszutauschen und wenn ihr andere Lösungen kennt, bin ich sehr daran interessiert…

Von → Allgemein

10 Kommentare →

toni Permalink

hallo, tolles script danke dir! leider funktioniert es bei mir zwar offline sehr gut online je nach server geschwindikeit leider nicht. hier kommt es zu einem ungewünschten effekt. der alte inhalt wird ausgeblendet, wieder eingeblendet und mit einem sprung ist dann der neugeladene inhalt zu sehen. aus diesem grund hier mal eine version die den callback von fadeout benutz. vielleicht bringts dem einen oder anderen ja was

grüße,

toni

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

Alex Permalink

Cool. Danke für den Hinweis Toni. Ich habe eine überarbeitete Version ins Netz gestellt. Hier die neue Variante.
Alien Permalink

Hi,
suche sowas ähnliches – hab eine php seite die nach x-sekunden ständig neu geladen werden soll. die daraus neuen daten dann auf der main seite eingeblendet werden

Ne lösung wäre echt supi

thx der Alien
Alex Permalink

Hast du es mal mit nem Meta-Refresh versucht?

http://en.wikipedia.org/wiki/Meta_refresh
Internetagentur Permalink

Hallo,

ich brauche die Möglichkeit, dass eine PHP-Datei automatisch alle x Sekunden neu aufgerufen wird. Kennt da jemand ne Lösung oder ein brauchbares Tutorial?
Alex Permalink

Hej “schleichwerbung”,

versuch es doch mal mit setInterval. Google ist dein Freund. Wenn du garnicht zurecht kommst, schreibe ich dir gerne ne Anleitung.

PS: Ich bin in Gelsenkirchen geboren. Witzig oder?

Florian Permalink

Hallo!

Danke für das tolle Script. Es läuft bei mir soweit auch super, aber jetzt möchte ich gerne das Script um einen Reload ergänzen (mit setInterval?). Meine Versuche aus dem Script eine Function zu machen und diese mit setInteval aufzurufen sind kläglich gescheitert. Liegt wohl an meinen erbärmlichen JavaScript-Kenntnissen. Hier mein Code. Vielleicht findet ihr ja den Fehler. Schon jetzt vielen Dank!

setInterval(change('test.php'),3000);
 
function change(loc){
$.ajax({
  url: loc,
  type: 'POST',
  beforeSend: function(){
    $('#container').fadeOut(500);
  },
  success: function( neueDaten ) {
    window.setTimeout( function() {
      $('#container').html( neueDaten );
    },500);
  },
  complete: function(){
    $('#container').fadeIn(500);
  }
});
}

klara Permalink

hi@all
also ich habe das problem versuche auch schon woanders zu klären nur sind wir nicht weiter gekommen.
also mit normalen links funktioniert das ganze super toll, danke an dieser stelle, NUR sobald ich den link so gestallten MUSS:

$.ajax({
url: ‘\\\\link\test.php’, # man beachte die \
type: ‘POST’,
…………

geht es nicht. als fehlermeldung kommt: zugriff verweigert.
das kann aber nicht sein weil wenn ich den link so im IE einfüge geht es direkt.
ich denke inzwischen das es ein bug in jquery ist aber vielleicht irre ich ja und einer weiss was da los ist?!?

thx4help!
Joe Permalink

Moin,

vielen Dank für das Snippet, habe den ganzen Tag gesucht und bin jetzt hier endlich fündig geworden. Funktioniert alles sehr gut. Allerdings funktioniert deine erste Version bei mir deutlich homogener als die zweite, auch das Timing ist besser (merkwürdig, weil deswegen ja das Update).

Funktioniert auch verschachtelt mit diversen Jquery-Plugins wie dem LoopedSlider!

Also, mercí!