Ich hab mir bei meinen letzten AJAX-Artikeln (hier und hier)sprichwörtlich "einen Wolf geschrieben"; dabei könnte man sich auch viel kürzer fassen. Also mal ein ganz kurzes Beispiel: wir wollen von einer anderen Seite oder einem Script Inhalte auslesen und den Content dann in ein DIV schreiben.
Zunächst einmal der (gekürzte) HTML-Code (den Rest bitte ergänzen):
<body>
<div id="inhaltscontainer">alter Inhalt</div>
<p>
<a href="#" title="laden" id="testlink"
onclick="getContent('foo.html');return false;">test</a>
</p>
</body>
Das ist nun der Inhaltscontainer. Hier möchten wir nun den Inhalt austauschen gegen das, was wir per AJAX woanders auslesen. Eine sehr einfache Variante erreicht man mit jQuery. Zunächst muss man also das jQuery-Framework im Head-Bereich einbinden. Anschließend kann man dessen Funktionalitäten nutzen und ein Script wie so eines schreiben:
function getContent(url){
$('#inhaltscontainer').html('<div class="ajaxloader">
<img src="img/ajax-loader.gif" width="32" height="32" alt="Lade">
<br />Lade Inhalt</div>');
//$('#inhaltscontainer').load(url + " #content");
$('#inhaltscontainer').load(url);
};Wir ersetzen in der ersten Zeile mit der html()-Funktion den Inhalt des Elements mit der Id 'inhaltscontainer' mit einer Ladegrafik. Jetzt können wir beruhigt die Inhalte nachladen, ohne dass sich der Besucher wundert, was sich da tut. Der eigentliche Austausch der Inhalte ist dagegen schon unspektakulär und wird über die Funktion load() erledigt. Die letzte Zeile im Detail: wir sprechen über das Element "inhaltscontainer" die Funktion load() an. Dieser geben wir die zu ladende Adresse mit. Optional (siehe auskommentierte Zeile) ist es auch möglich, nur ein bestimmtes Element aus der Zielseite zu extrahieren und das dann in den Inhaltscontainer zu laden (bitte auf das Leerzeichen vor dem Quellcontainernamen achten).
PS: achtet bitte beim Copy&Paste des Beispielcodes darauf, dass hier möglicherweise ein paar Zeilenumbrüche zu viel drin sind, da das hier sonst nicht reinpasst. Die müssen beim Ausprobieren wieder korrigiert werden.
1 Kommentar:
Hi Wagii,
ok dass ist einfach. Danke!
Was mir an der Lösung von deinem anderen Artikel "Mit AJAX HTML nachladen" wirklich gefällt ist, dass man keine JavaSkript-Codes ins HTML Markup einfügen muss und alle Links in einem Container geajaxt werden. Das ist schon "Unobtrusive Ajax" mit Fallback und ziemlich hip.
Das macht schon Spaß!!
Kommentar veröffentlichen