Details aus Tabelle mit AJAX/jQuery nachladen

Push-Nachrichten von MacTechNews.de

Würden Sie gerne aktuelle Nachrichten aus der Apple-Welt direkt über Push-Nachrichten erhalten?

Forum>Entwickler>Details aus Tabelle mit AJAX/jQuery nachladen

Pineapps01.11.1212:54

Da ich kaum Ahnung von AJAX oder jQuery habe, und ich, sowie noch ein anderen Programmierer einer anderen Website, vor einem Ähnlichen stehen, dachte ich, ich bitte mal hier im Forum um Hilfe, nachdem wir in einem PHP Forum keine Hilfreichen Antworten bekommen haben.

Wir stehen beide vor dem Problem, dass wir eine Website Dynamisch aufbauen wollen, und dass nur die benötigten Teile der Website auch wirklich gleich zum Anfang geladen werden.

Mein Problem ist folgendes:
Ich habe eine Website (da noch in Programmierung noch nicht an kleine Bildschirme angepasst!) welche wie eine Tabelle mit mehreren Zeilen aufgebaut ist. Wenn man nun auf den Pfeil zum vergrößern einer Zeile klickt, werden Details zu dieser Zeile angezeigt. Da diese Details auch Bilder enthalten, sollten diese Sinnvollerweise nicht wie jetzt gleich zum Anfang geladen werden, sondern nur die, die auch tatsächlich angeklickt werden.
Ich habe gehört, dass kann man am besten mit AJAX umsetzen. Wir hatten auch schon so unsere ersten Versuche, aber funktioniert hat dies nie wirklich.

Ich fände es super, wenn ihr mir an Codebeispielen erklären könntet, wie ich AJAX am besten einbaue und nicht wie im PHP Forum nur sinnfreie Antworten gebt.

Hier ein paar Code Schnipsel um das ganze etwas deutlicher zu machen:

//in einer while Schleife
$sql="SELECT * FROM Apps";
$res=mysql_query($sql)or die(mysql_error());
$daten=mysql_fetch_array($res);
// Das war die Datenbankabfrage (eigentlich nur ein Teil davon)
// Aus weiteren Abfragen werden z.B. noch $daten4 oder $daten3 ausgespuckt.

echo"<div id='AppsReihe".$Num."' style='margin-bottom:-574px;'>";
    echo"<div>".$Num."</div><div><img src='".$daten['Bild']."'></div><div>".substr($daten['Name'], 0, 25).$Punkt."</div>";

//Preis ermitteln:
    echo"<div class='myprice' name='".$daten['Name']."' onclick=\"window.location.href='".$daten['Link']."'\"></div>";

echo"<div><img src='Pfeilunten.png' id='mehr".$Num."' onclick=\"window.location = '#AppsReihe".$Num."';document.getElementById('AppsReihe".$Num."').style.marginBottom = '0px';document.getElementById('AppsInhalt".$Num."').style.visibility = 'visible';document.getElementById('weniger".$Num."').src = 'Pfeilobenbunt.png';document.getElementById('mehr".$Num."').style.visibility = 'hidden';document.getElementById('weniger".$Num."').style.visibility = 'visible';\"></div>
<div><img src='Pfeiloben.png' id='weniger".$Num."' onclick=\"window.location='#Top';document.getElementById('AppsReihe".$Num."').style.marginBottom = '-574px';document.getElementById('AppsInhalt".$Num."').style.visibility = 'hidden';document.getElementById('mehr".$Num."').style.visibility = 'visible';document.getElementById('weniger".$Num."').style.visibility = 'hidden';document.getElementById('weniger".$Num."').src = 'Pfeiluntenbunt.png';\"  style='visibility:hidden;margin-right:-38px;'></div>
</div>";

// Ausgeklappter Bereich

echo"<div style='visibility:hidden;margin-top:0px;z-index:-1;'>";
echo"<div>Entwickler: ".$daten['Firma']." &nbsp Version: ".$daten['Version']." &nbsp Größe: ".$daten['Groesse']."   Datum: ".$daten['Datum']."   Autor: ".$daten3['Vorname']." ".$daten3['Nachname']."";echo"</div>";

echo"<div>Beschreibung:</div>";
echo"<div>".$daten['Beschreibung']."</div>";
echo"<div>Pro: ".$daten['Pro']."</div>";
echo"<div>Contra: ".$daten['Contra']."</div>";
echo"<div>Fazit: ".$daten['Fazit']."</div>";
// Die Screenshots (Bilder)
echo"<div id='AppsInhaltScreenshots'><img src='".$daten4['Thumb']."'>";
//Datenbankabfrage wurde schon ausgeführt. Jetzt soll das nächste Bild in der Tabelle gezeigt werden.
$daten4=mysql_fetch_array($res4);echo"<img src='".$daten4['Thumb']."'>";
$daten4=mysql_fetch_array($res4);echo"<img src='".$daten4['Thumb']."'>";
$daten4=mysql_fetch_array($res4);echo"<img src='".$daten4['Thumb']."'>";
$daten4=mysql_fetch_array($res4);echo"<img src='".$daten4['Thumb']."'>";
echo"</div>";
echo"</div>";

Ob der ganze Code sauber ist, können wir uns wann anders streiten... zu beachten ist nur, dass der Code ziemlich gekürzt ist und somit auf das wichtigste begrenzt wurde.
Im Original funktioniert der Code soweit ganz gut, der gekürzte Code dürfte allerdings nicht ohne weiteres funktionieren. (Wenn ich den ganzen Code anhängen würde, würde dies nur den Rahmen sprengen).

Im Anhang noch ein Bild, wie die Website aussehen sollte. Die Website wurde noch für zu wenig Geräte optimiert, also kann es gut sein, dass es bei euch anders aussieht.

Vielen Dank für eure Hilfe!!!

„Click. Boom. Amazing! - Steve Jobs“

Kommentare

Es sind keine Einträge vorhanden.
Diese Diskussion ist bereits mehr als 3 Monate alt und kann daher nicht mehr kommentiert werden.

Kurz: Trump unterstützt Musk als TikTok-Besitze...

PIN-Code erraten: Dauer

Parallels führt x86-Windows auf M-Macs aus – Te...

2 TByte für 259 US-Dollar: Erste Upgrade-SSDs f...

Platzgründe: Apple begründet modulare SSD und P...

Kurztest MacBook Pro M4

iPad Pro M4 wird grün – Displayfehler bei immer...

Tim Cooks Jahresgehalt – und die Vergütung der ...