- Ad -
php-resource



Zurück   PHP-Scripte PHP-Tutorials PHP-Jobs und vieles mehr > Entwicklung > HTML, JavaScript, AJAX, jQuery, CSS, Bootstrap, LESS
 

Login

 
eingeloggt bleiben
star Jetzt registrieren   star Passwort vergessen
 

 

 

 


HTML, JavaScript, AJAX, jQuery, CSS, Bootstrap, LESS Probleme mit HTML5, Bootstrap oder jQuery ?

Antwort
 
LinkBack Themen-Optionen Bewertung: Bewertung: 1 Stimmen, 5,00 durchschnittlich.
  #1 (permalink)  
Alt 05-05-2011, 20:50
medium22
 Registrierter Benutzer
Links : Onlinestatus : medium22 ist offline
Registriert seit: Mar 2006
Beiträge: 308
medium22 zeigte ein beschämendes Verhalten in der Vergangenheit
Standard jQuery - unbekannte ID zuweisen

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:
HTML-Code:
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:
PHP-Code:
echo "<td class=\"Q\"><a href=\"#\" ";
echo 
"onclick=\"getContent('antrag_detail.php?id=".$row['Id']."');\">Details</a></td>\n"
Ort / Position des nachzuladenden Inhaltes:
PHP-Code:
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.
Mit Zitat antworten
  #2 (permalink)  
Alt 05-05-2011, 21:39
AmicaNoctis
  Moderatorin
Links : Onlinestatus : AmicaNoctis ist offline
Registriert seit: Jul 2009
Beiträge: 5.709
Blog-Einträge: 9
AmicaNoctis sorgt für eine eindrucksvolle AtmosphäreAmicaNoctis sorgt für eine eindrucksvolle Atmosphäre
Standard

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
__________________
Hast du die Grundlagen zur Fehlersuche gelesen? Hast du Code-Tags benutzt?
Hast du als URL oder Domain-Beispiele example.com, example.net oder example.org benutzt?
Super, danke!
Mit Zitat antworten
  #3 (permalink)  
Alt 05-05-2011, 22:02
mephisto111
 Registrierter Benutzer
Links : Onlinestatus : mephisto111 ist offline
Registriert seit: Nov 2003
Beiträge: 52
mephisto111 befindet sich auf einem aufstrebenden Ast
Standard

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.
Mit Zitat antworten
  #4 (permalink)  
Alt 06-05-2011, 08:07
medium22
 Registrierter Benutzer
Links : Onlinestatus : medium22 ist offline
Registriert seit: Mar 2006
Beiträge: 308
medium22 zeigte ein beschämendes Verhalten in der Vergangenheit
Standard

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):
PHP-Code:
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:
Code:
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?!
Mit Zitat antworten
  #5 (permalink)  
Alt 06-05-2011, 09:19
mephisto111
 Registrierter Benutzer
Links : Onlinestatus : mephisto111 ist offline
Registriert seit: Nov 2003
Beiträge: 52
mephisto111 befindet sich auf einem aufstrebenden Ast
Standard

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.)
Mit Zitat antworten
  #6 (permalink)  
Alt 06-05-2011, 18:18
medium22
 Registrierter Benutzer
Links : Onlinestatus : medium22 ist offline
Registriert seit: Mar 2006
Beiträge: 308
medium22 zeigte ein beschämendes Verhalten in der Vergangenheit
Standard

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.
Code:
function getContent(url, data) {
2. & 3.
Code:
$('tr').eq(data).insertAfter('<div id="inhalt"><tr>
<td class="Q" colspan="5" rowspan="1"></td></tr></div>');
4.
Code:
$('#inhalt').html('<img src="i/ajax-loader.gif" width="32" 
height="32" alt="Laden..."><br />Daten werden geladen');
5.
Code:
$('#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?
Mit Zitat antworten
  #7 (permalink)  
Alt 06-05-2011, 18:20
h3ll
 Registrierter Benutzer
Links : Onlinestatus : h3ll ist offline
Registriert seit: Mar 2008
Beiträge: 3.364
h3ll befindet sich auf einem aufstrebenden Ast
Standard

Code:
$('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.
Mit Zitat antworten
  #8 (permalink)  
Alt 06-05-2011, 18:23
wahsaga
  Moderator
Links : Onlinestatus : wahsaga ist offline
Registriert seit: Sep 2001
Beiträge: 25.209
wahsaga befindet sich auf einem aufstrebenden Ast
Standard

Vielleicht solltest du dich erst mal von der Annahme frei machen, dass man auf Elemente nur über ihre ID zugreifen könnte.
__________________
I don't believe in rebirth. Actually, I never did in my whole lives.
Mit Zitat antworten
  #9 (permalink)  
Alt 06-05-2011, 18:27
medium22
 Registrierter Benutzer
Links : Onlinestatus : medium22 ist offline
Registriert seit: Mar 2006
Beiträge: 308
medium22 zeigte ein beschämendes Verhalten in der Vergangenheit
Standard

@ 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?
Mit Zitat antworten
  #10 (permalink)  
Alt 06-05-2011, 18:43
wahsaga
  Moderator
Links : Onlinestatus : wahsaga ist offline
Registriert seit: Sep 2001
Beiträge: 25.209
wahsaga befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Zitat von medium22 Beitrag anzeigen
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.
__________________
I don't believe in rebirth. Actually, I never did in my whole lives.
Mit Zitat antworten
  #11 (permalink)  
Alt 06-05-2011, 18:50
h3ll
 Registrierter Benutzer
Links : Onlinestatus : h3ll ist offline
Registriert seit: Mar 2008
Beiträge: 3.364
h3ll befindet sich auf einem aufstrebenden Ast
Standard

Vor allem erleichtert jQuery eh sehr viel:

Tree Traversal – jQuery API
Mit Zitat antworten
Antwort

Lesezeichen


Aktive Benutzer in diesem Thema: 1 (Registrierte Benutzer: 0, Gäste: 1)
 

Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Unbekannte Zeichen ausfiltern Laire PHP Developer Forum 9 19-08-2008 23:32
Unbekannte Technologie vitalinka HTML, JavaScript, AJAX, jQuery, CSS, Bootstrap, LESS 4 17-10-2006 15:25
unbekannte fehlermeldung! -=Taipan=- SQL / Datenbanken 16 03-07-2003 15:21
unbekannte Funktion ? Honny PHP Developer Forum 2 19-05-2003 09:14
unbekannte Spaltennamen novara SQL / Datenbanken 4 28-02-2003 13:49

Themen-Optionen
Thema bewerten
Thema bewerten:

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are an


PHP News

Zeit ist Geld, PC einfach selbst reparieren!
Zeit ist Geld, PC einfach selbst reparieren!Wenn der PC nicht richtig läuft, wirft sie das in Ihrem Arbeitsalltag meist zurück. Dabei können Sie einige Probleme mit relativ wenig Aufwand und ohne intime Kenntnisse Ihres Rechners selbst lösene

18.04.2016 | Berni

Die wichtigsten Rahmenbedingungen für das Hosting
Die wichtigsten Rahmenbedingungen für das HostingGuter Webspace wird in der heutigen Zeit immer wichtiger. Die Scripte werden moderner und fordern höhere Leistung, der allgemeine Traffic im Internet nimmt zu.

17.08.2015 | Berni


 

Aktuelle PHP Scripte

Onlineshop mit CSV Artikel import

Wir erstellen nach Ihren Wünschen Ihren Onlineshop.

11.07.2016 ISD-Genthin | Kategorie: PHP/ Shops
Newsletter PRO SQL V4

Nutzen Sie unser Newsletter-System und halten Sie Ihre Kunden mit neuen Informationen stets auf dem Laufenden. Die benutzerfreundliche Oberfläche bietet sowohl Anfängern als auch Profis, die Erstellung von eleganten bis frechen Newslettern ...

11.07.2016 virtualsystem | Kategorie: PHP/ News
LEPTON CMS ansehen LEPTON CMS

LEPTON CMS ist eine weiterentwickelte Ableitung (Fork) des CMS „WebsiteBaker“ der Version 2.8.1. Das Entwicklerteam hat den ursprünglichen „Geist” erhalten, der dieses Content Management System und seine damalige Community unter Leitung des Gründers Ryan

27.06.2016 erpe | Kategorie: PHP/ CMS
 Alle PHP Scripte anzeigen

Alle Zeitangaben in WEZ +2. Es ist jetzt 19:43 Uhr.