molily: Werte aus DB in PHP über javascript bei klick ausgeben

Beitrag lesen

Hallo,

Gibt es dazu ein vorgefertigtes Code-Schnipse was ich verwenden kann?

Das geht mit der Bibliothek jQuery sehr einfach.

HTML:

<ul class="liste">  
<li><a href="beschreibung.php?id=1">Foo</a></li>  
<li><a href="beschreibung.php?id=2">Foo</a></li>  
<li><a href="beschreibung.php?id=3">Foo</a></li>  
<li><a href="beschreibung.php?id=4">Foo</a></li>  
</ul>  
  
<section id="beschreibung"></section>

JavaScript:

$('.liste a').click(function(event) {  
  // [link:http://molily.de/js/event-handling-objekt.html@title=Unterdrücke Standardaktion] (der Browser soll dem Link nicht folgen, wir laden ihn per JS)  
  event.[link:http://api.jquery.com/event.preventdefault/@title=preventDefault]();  
  // href-Attribut des Links auslesen  
  var href = event.target.href;  
  // Die Adresse per XMLHttpRequest laden und die Serverantwort in  
  // das Element mit der ID »beschreibung« füllen  
  $('#beschreibung').[link:http://api.jquery.com/load/@title=load]( href );  
});

Der Server (das PHP-Script beschreibung.php) braucht nur ein HTML-Snippet zurückgeben, kein vollständiges Dokument. Kann also sofort mit <h2>Produkttitel</h2> <p>Beschreibung</p> usw. loslegen. (Zumindest wenn der Aufruf per JavaScript erfolgt; jQuery sendet zur Unterscheidung den HTTP-Header X-Requested-With: XMLHttpRequest).

Das Beispiel geht davon aus, dass die Inhalte bei Bedarf vom Server nachgeladen werden. Das dauert natürlich ein bisschen. Wenn es wichtig ist, dass die Inhalte sofort verfügbar sind, ist es auch möglich, alle Inhalte mit PHP ins Dokument zu rendern und sie nur wahlweise sichtbar zu machen. Dazu ist ebenfalls Event-Handling nötig und ferner DOM-Manipulation.

File Griese
Mathias