jQuery - unbekannte ID zuweisen

[medium22]

Hallo,


Ich versuche mich seit ein paar Tagen an jQuery was bisher im einfachen Stil auch soweit ganz gut funktioniert. Ziel ist es, bei einem Klick auf einen Link weitere Daten aus einer MySQL-Datenbank zu laden. Das ist auf die schnelle eigentlich auch nichts schwieriges, wenn man den nachzuladenden Inhalt immer an der selben Stelle ausgeben will - in meinem Falle wäre das nun oberhalb einer HTML-Tabelle.

Das Problem an der Geschichte ist nun, dass diese Tabelle mitunter doch schonmal etwas länger werden kann (schätze mal bis zu max. 100 Zeilen à jeweils 5 Spalten). Und genau da finde ich das 'oberhalb nachladen' dann unschön, weil der Benutzer, falls er zB. etwas aus Zeile 80 nachlädt, erstmal hochscrollen muss um die Inhalte zu sehen. Ich würde also gerne den jeweiligen Inhalt direkt unter der angeklickten Zeile ausgeben. Das ist ja mittels "<td colspan='5'>" auch machbar. Dann müsste ich jQuery aber zusätzlich zum div (wo der Inhalt reingeladen wird) auch noch eine bis dahin unbekannte ID zuweisen - und genau da fangen meine Probleme an.

JS-Funktion zum laden:

function getContent(url){
 $('#inhalt').html('<img src="i/ajax-loader.gif" width="32" height="32" 
alt="Laden..."><br />Daten werden geladen');
 $('#inhalt').load(url);
};

Aufruf jener Funktion:

echo "<td class=\"Q\"><a href=\"#\" ";
echo "onclick=\"getContent('antrag_detail.php?id=".$row['Id']."');\">Details</a></td>\n"; 

Ort / Position des nachzuladenden Inhaltes:

echo "<div id=\"inhalt\"></div>\n"; 

Man kann die Position ja nun sicherlich in jede Zeile einmal schreiben, aber dann wird beim klick nicht jenes div geöffnet welches man will sondern nur das erste. Man müsste also dem div noch eine ID (am sinnvollsten wohl die ID die aus PHP kommt und beim klick mitgegeben wird) mitgeben welche durch die Funktion erkannt und dementsprechend an der richtigen Stelle ausgegeben wird.
Das heisst im Klartext: Bei einem klick müsste eine neue Zeile an der richtigen Stelle eingefügt und der Inhalt nachgeladen werden.
Eine Lösung dafür habe ich bisher noch nicht gefunden.


Für Tips und Ratschläge danke ich schon im Voraus.

[AmicaNoctis]

Hallo,

du brauchst keine ID. Du kannst es doch auch dort einfügen, wo man geklickt hat. Ich sehe zwar noch nicht ganz durch, aber document.elementFromPoint() könnte dir helfen. Das ermittelt zu Dokument-relativen Koordinaten das dort befindliche Element. Du kannst aber (wenn du sowieso mit Links) arbeitest, auch einfach onclick von event.currentTarget (bzw. window.event.srcElement) aus navigieren.

Alles in allem ist dein Vorhaben aber noch etwas undurchsichtig geblieben.

Gruß,

Amica

[mephisto111]

Hallo medium22,

hier ein weiterer Vorschlag:

1. Alle Zeilen Deiner Tabelle erhalten eine Id.
2. Wenn Du jetzt Inhalte nachladen willst, übergibst Du nicht nur die URL sondern auch die Id an die Funktion "getContent".
3. Jetzt fügst Du (vor Deiner Zeile $('#inhalt').load(url);") mit "insertAfter" eine neue Tabellenzeile zusammen mit einer eingeschlossenen Tabellenzelle (mit "colspan=5") im Anschluss an die Tabellenzeile mit der übergebenen Id ein. Diese Tabellenelemente kannst Du dann z.B. per "attr" noch mit weiteren Attributen versehen (etwa einer Id).
4. Dann packst Du den Inhalt, den Du per Ajax besorgt hast, in die neue Tabellenzelle.

[medium22]

Hallo,


Danke für die Ideen.

@ AmicaNoctis: Ziel ist es, bei einem Klick auf einen Link sozusagen den nachgeladenen Inhalt innerhalb der HTML-Tabelle (in einer neuen Zeile mit colspan=5) "auszuklappen" - ähnlich wie bei den toggle-Dingern, aber halt erst nach dem nachladen (spart massig Resourcen, wie ich finde bzw. behaupte). Ist so mein Vorhaben verständlicher?

@ mephisto111: Klingt interessant. Auf dem Gebiet jQuery bin ich aber noch neu, daher klappt das nicht auf anhieb - wie zu erwarten. ;D
Daher nun mal mein Versuch, wie ich das von dir beschriebene umzusetzen versucht habe (ohne Erfolg *g*)

Der Aufruf (mit url und ID):

echo "<td class=\"Q\"><a href=\"#\" ";
echo "onclick=\"getContent('uc/antrag_detail.php?id=".$row['Id'].", ";
echo $row['Id']."');\">Details</a></td>\n"; 

Die Funktion dazu:

function getContent(url, data){
 $('#inhalt').html('<img src="i/ajax-loader.gif" width="32" height="32" 
alt="Laden..."><br />Daten werden geladen');
 $('#inhalt').attr(tr.data)
 $('#inhalt').insertAfter('<tr><td class="Q" colspan="5" rowspan="1">
<div id="inhalt"></div></td></tr>');
 $('#inhalt').load(url);
};

Ich war der Meinung, ich hätte mal irgendwo gelesen, dass man das tr-Attribut so direkt ansprechen kann, daher auch so geschrieben.

Irgendwie denke ich, dass ich irgendwo einen bösen Denkfehler habe, nur wo der ist will mir nicht auffallen. Vermutlich aber in der zweiten Anweisung der Funktion, welcher ja auf den 'Inhalt' referenziert obwohl er wo anders sein müsste?!

[mephisto111]

Hallo medium22,

wolltest Du die neue Tabellenzeile nicht hinter der Tabellenzeile mit der uebergebenen Id positionieren? So packst Du sie hinter den "div" mit der Id Inhalt. Dann erzeugst du den "div" mit der Id Inhalt moeglicherweise zweimal (einmal per PHP, dann erneut per JavaScript). Das geht alles ein bisschen durcheinander.

Das Prinzip von jQuery ist uebrigens ganz einfach: "Such was und tu was damit." Wenn Du nicht genau weisst, wie eine Funktion funktioniert, kannst Du auch auf der jQuery-Seite nachgucken. (Zum Beispiel: .insertAfter() – jQuery API.)

[medium22]

Hallo,


Irgendwie steh ich nun total auf dem Schlau.
Gehen wir mal die logische Reihenfolge durch, damit ich auch den Sinn dahinter verstehen kann und vielleicht eher auf eine Lösung komme.

Die Funktion:
1. Übergabe (bzw. annahme) der url und ID
2. Anhand der übergebenen ID die entsprechende Zeile in der Tabelle suchen
3. Im Anschluss an die gefundene Zeile (also eine neue danach) eine neue Zeile mit eingeschlossenen Tabellenzellen (colspan=5) ausgeben
4. In der neuen Zeile das Ladesymbol ausgeben
5. Inhalt nachladen und in der neuen Zeile ausgeben

Ich denke mal, die reihenfolge dürfte so richtig sein, oder?

Im Detail also:

1.

function getContent(url, data) {

2. & 3.

$('tr').eq(data).insertAfter('<div id="inhalt"><tr>
<td class="Q" colspan="5" rowspan="1"></td></tr></div>');

4.

$('#inhalt').html('<img src="i/ajax-loader.gif" width="32" 
height="32" alt="Laden..."><br />Daten werden geladen');

5.

$('#inhalt').load(url);

Da das aber nicht funktioniert (beim klick passiert genau gar nichts), dürften hier auch noch Fehler sein - nur wo sind diese genau?

[h3ll]

$('tr').eq(data).insertAfter('<div id="inhalt"><tr>
<td class="Q" colspan="5" rowspan="1"></td></tr></div>');

Was ist das bitte? Ein <tr> in einem <div>? Das geht nicht.

[wahsaga]

Vielleicht solltest du dich erst mal von der Annahme frei machen, dass man auf Elemente nur über ihre ID zugreifen könnte.

[medium22]

@ h3ll: Das div drum herum ist für das einfügen des Rest's gedacht, etwas anderes fiel mir da nicht ein.

@ wahsaga: Wie denn in diesem Fall sonst noch?

[wahsaga]

Wie denn in diesem Fall sonst noch?

Na wenn die Aktion „in Zeile 80“ ausgelöst wird, dann hast du doch an dieser Stelle bereits die Referenz auf diese Zeile vorliegen (bzw. auf eines ihrer Nachfahrenelemente).

Mal ein bisschen mit den Grundlagen des DOM beschäftigen, und wie man darin „navigieren“ kann - Stichworte wie parentNode, previousSibling/nextSibling etc. sollten eigentlich ein Begriff sein.

[h3ll]

Vor allem erleichtert jQuery eh sehr viel:

Tree Traversal – jQuery API