Teil einer Webseite automatisch laden

[Girl1986]

Guten Abend

ich habe eine Webseite (Radio) und möchte hier nun einen Teil der Webseite immer wieder aktualisieren lassen. Es handelt sich hierbei um die Anzeige des Shoutcast inkl. aktuellen Song.

Mein Problem ist nun folgendes:

Ich sehe den Shout und höre auch die aktuelle Musik, allerdings aktualisiert sich nicht der kleine Part "Ihr hört gerade ??".

Bislang ist die Seite mit HTML und PHP aufgebaut. Ich weiß nun aber nicht wie ich es anstellen soll, dass sich nur dieser "kleine" Part aktualisiert.

Kann mir jemand vielleicht weiter helfen?

Wenn ihr irgendwelche Daten benötigt, sagt bitte bescheid. Ich bin für jede Hilfe dankbar.

Danke für Eure Antworten.

Viele Grüße
Girly

 

[Arusiek]

Da wirst du um JS bzw. AJAX kaum rumkommen...

Kannst dir ja mal anschauen... Link

Gruß Aru

 

[QuArK007]

eine Option, für die mich wahrscheinlich jeder Coder TÖTEN wird, ist nen Iframe mit meta-reload (wobei das auch über nen http-header gehen würde). Ist aber eigentlich eine äußerst unschöne Variante die zwar funktioniert aber weder semantisch noch gern gesehen ist (gibt z.B. FF-Addons die iframes komplett sperren). Aber ist die einfachste und narrensicherste Variante.

ansonsten hat Arusiek Recht: wenn der Inhalt in der Seite selber stehen soll (also im HP Quelltext), dann kommst du um JS bzw Ajax net rum

 

[theHacker]

Da der Code auf der verlinkten Seite eh nicht lesbar und uralt is, werf ich mal noch das JS-Framework jQuery in den Raum:
https://jquery.com/

Damit sind AJAX-Spielchen nur einige wenige Zeilen (eigentlich nur Zeile) Code. Beispiele konkret zu AJAX findest du in der Doku direkt bei den AJAX-Methoden: https://api.jquery.com/jQuery.ajax/
Im Grunde musst du nur sagen, von welcher URL geholt werden soll und wohin das Ergebnis geladen werden muss.

Auf Serverseite musst du dann lediglich dafür sorgen, dass die besagte URL den Code generiert.

Willst du z.B. nur in einem

Ihr hört gerade: <div id="currentSong">Foobar - This Song rocks</div>

den Songtitel ändern, sagst du einfach nur

$.get('ajax/currentsong.php', function(data) {
  $('#currentSong').html(data);
});

Das wars.

 

[tleilax]

$.get('ajax/currentsong.php', function(data) {
  $('#currentSong').html(data);
});

Das wars.

Das geht sogar noch kürzer...

$('#currentSong').load('ajax/currentsong.php');

 

[Girl1986]

hallo,

danke für die antworten. Leider verstehe ich grad nur bahnhof. programmieren ist nicht meine stärke.

Muss ich bei ajax/currentsong.php zB folgendes angeben: radio/testpage.php ?

function(data) -> bleibt das oder muss das auch noch angepasst werden?

#currentSong -> Bleibt das oder muss das geändert werden?

Ich häng hier voll auf dem Schlauch

 

[theHacker]

programmieren ist nicht meine stärke.

Wird n bisschen schwer, wenn du was programmieren willst, aber nicht programmieren kannst

Muss ich bei ajax/currentsong.php zB folgendes angeben: radio/testpage.php ?

Müssen tust du gar nix. Du hast die freie Wahl, unter welche URL du das Script setzt. Du bist ja immerhin der Programmierer, der die Sache schreibst. Wie du das machst, ist deine freie Entscheidung.

function(data) -> bleibt das oder muss das auch noch angepasst werden?

Ein Schlüsselwort würde ich wohl nicht unbedingt ändern, außer, du hast Lust auf Syntaxfehler

#currentSong -> Bleibt das oder muss das geändert werden?

Weiß ich nicht. Deine Seite. Nur du kannst wissen, ob es Probleme geben kann, weil die ID schon vergeben is.

Mein Code is nur ein Beispiel, dass den Grundgedanken erklärt. Um kommst du natürlich nicht drumrum

 

[Girl1986]

ich komm net klar...

Was mich irritiert ist, dass mit der ID. Vielleicht sollte ich erwähnen, dass ich hier keine Datenbank habe, wo ich Daten auslesen kann...

Den Song erreiche ich mit "... $shoutcast_cursong = $numbers[6]; ... "

Und die Ausgabe später lautet <?php echo $shoutcast_cursong ;?>

Da habe ich kein Plan wie ich das nun schreiben soll. Zumal ich vor ner dicken wand steh bzw. umringt bin.

sicher ich muss auch lesen und so. aber ich weiß nicht wo und die seiten die ihr mir nun geschickt habt, da versteh ich noch mehr bahnhof als vorher

 

[theHacker]

Was mich irritiert ist, dass mit der ID.

Du musst den Container doch irgendwie identifizieren. Du kannst das mit jQuery auch über eine Klasse oder nur durch das Element machen. Alle Selektoren, die du auch in CSS verwendest, kannst du verwenden. Das gibt dir maximale Freiheit (z.B. mit einer Klasse an verschiedenen Stellen der Webseite den Song anzeigen).

Da habe ich kein Plan wie ich das nun schreiben soll.

Du kümmerst dich um zwei Sachen:

1. Zuerst ein Script, was die Ausgabe machst, die du später irgendwo auf deine Seite setzen willst.
2. Dann, wenn 1. erledigt is, verwendest du obiges JavaScript, um asychron, Inhalte nach zu laden. Du willst das dann vermutlich mit einem Timer versehen oder dir was anderes einfallen lassen, wann du eine Aktualisierung anfordern willst. Idealerweise sendet der Server (der evtl. weiß, wie lang der Song geht) schon mit, wann der Song endet und wann aktualisiert werden muss.

[...] und die seiten die ihr mir nun geschickt habt, da versteh ich noch mehr bahnhof als vorher

Das is die jQuery-Doku. Das is direkt die Quelle; bessere Infos gibt es nicht. Und außerdem is die jQuery-Doku sowas von einfach und benutzerfreundlich (jede Methode einzeln erklärt; meist mit Beispielcode und Live-Demo).

Wenn du vorher noch nie mit jQuery gearbeitet hast, ok, ne gewisse Einarbeitungszeit brauchst du. In 2 Minuten is das sicher ned erledigt.

 

[Girl1986]

danke. aber so komm ich erstmal net weiter...