Icons im Client ändern

[Lukas]

Hallo,

Ich habe eine HTML Tabelle, die in einer Spalte je nach Datenbankeintrag verschiedene Icons enthalten kann.

Nun kann ich den Datenbankeintrag ändern, was ich über ein Iframe mache. Soweit, sogut.

Gibt es eine Möglichkeit, die Icons im Client an die neuen Datenbankeinträge anzupassen, ohne einen neuen Request auslösen zu müssen?

Oder anders nachgefragt (weil schon klar ist, wie es grundsätzlich funktioniert), wie gehe ich nun vor?

Ich habe im Iframe die IDs (also quasi die betroffenen Zeilen) und ich weiß, welche neuen Icons angezeigt werden müßten.

Und geändert werden sollen in der Hauptseite die Icons der betroffenene zeilen, sobald ich im Iframe die ein Formular absende.

Wie gehe ich nun weiter vor?

Gruß, Lukas

[Der Martin]

Hi,

Ich habe eine HTML Tabelle, die in einer Spalte je nach Datenbankeintrag verschiedene Icons enthalten kann.
Nun kann ich den Datenbankeintrag ändern, was ich über ein Iframe mache. Soweit, sogut.
Gibt es eine Möglichkeit, die Icons im Client an die neuen Datenbankeinträge anzupassen, ohne einen neuen Request auslösen zu müssen?

du hast die Frage im Themenbereich HTML eingestellt, und darum ist die Antwort zunächst: Nein, nicht mit HTML.

Oder anders nachgefragt (weil schon klar ist, wie es grundsätzlich funktioniert), wie gehe ich nun vor?

Die Hauptseite mit der Tabelle neu zu laden, ist die Triviallösung. Aber die willst du ja anscheinend vermeiden. Also muss vermutlich Javascript ins Spiel kommen. Dazu brauchst du eine Möglichkeit, den korrespondierenden Eintrag (z.B. das tr-Element) im DOM des parent-Dokuments zu finden, darin das Bild zu identifizieren und den Wert von dessen src-Attribut auszutauschen (und vermutlich auch den beschreibenden Text dazu, falls es einen gibt). Im Prinzip nicht schwierig, aber es kommt drauf an, welche Informationen im Markup verfügbar sind und wie leicht sie auszuwerten sind.

Ich habe im Iframe die IDs (also quasi die betroffenen Zeilen) und ich weiß, welche neuen Icons angezeigt werden müßten.

Ja. Weißt du auch, an welcher Stelle im Hauptdokument?

Und geändert werden sollen in der Hauptseite die Icons der betroffenene zeilen, sobald ich im Iframe die ein Formular absende.

Nein, besser: Sobald die Antwort vom verarbeitenden Script kommt und daraus hervorgeht, dass die Änderung in der DB erfolgreich war.

Wie gehe ich nun weiter vor?

Zeig mal den bisherigen Ansatz, so dass man von da aus weiter "spinnen" kann.

Ciao,
 Martin

[Lukas]

Hi Martin,

Die Hauptseite mit der Tabelle neu zu laden, ist die Triviallösung. Aber die willst du ja anscheinend vermeiden. Also muss vermutlich Javascript ins Spiel kommen. Dazu brauchst du eine Möglichkeit, den korrespondierenden Eintrag (z.B. das tr-Element) im DOM des parent-Dokuments zu finden, darin das Bild zu identifizieren und den Wert von dessen src-Attribut auszutauschen (und vermutlich auch den beschreibenden Text dazu, falls es einen gibt). Im Prinzip nicht schwierig, aber es kommt drauf an, welche Informationen im Markup verfügbar sind und wie leicht sie auszuwerten sind.

Ja, korrekte Beschreibung.

Ich habe im Iframe die IDs (also quasi die betroffenen Zeilen) und ich weiß, welche neuen Icons angezeigt werden müßten.

Ja. Weißt du auch, an welcher Stelle im Hauptdokument?

Ja, prinzipiell schon. Im Zweifel könnte ich dem tr-tag eine ID verpassen, dann weiß ich es auch ganz genau.

Und geändert werden sollen in der Hauptseite die Icons der betroffenene zeilen, sobald ich im Iframe die ein Formular absende.

Nein, besser: Sobald die Antwort vom verarbeitenden Script kommt und daraus hervorgeht, dass die Änderung in der DB erfolgreich war.

Ja, wenn das ginge, wär das natürlich die perfekte Lösung.

Zeig mal den bisherigen Ansatz, so dass man von da aus weiter "spinnen" kann.

Na, der bisherige Ansatz beruht noch darauf, daß die Seite komplett neu geladen wird. Das ist natürlich eher etwas unglücklich gelöst, weil hierdurch jedesmal die Stelle in der Hauptseite neu gesucht werden muß, an der man zuletzt war.

Wir müssen also quasi bei Null "mit dem spinnen" beginnen.

Lukas

[Lukas]

Nein, besser: Sobald die Antwort vom verarbeitenden Script kommt und daraus hervorgeht, dass die Änderung in der DB erfolgreich war.

Ja, wenn das ginge, wär das natürlich die perfekte Lösung.

Hi,

liest hier noch jemand mit?

Lukas

[Der Martin]

Hallo,

liest hier noch jemand mit?

natürlich, wir warten gespannt auf einen Anfang von dir.
Du erwartest doch nicht, dass jemand die Aufgabe für dich erledigt, während du dich mit einem kühlen Bier in der Hand zurücklehnst und auf die Lösungen wartest - noch dazu ohne die nötigen Hintergrundinfos?

Ciao,
 Martin

[Lukas]

Hi Martin,

natürlich, wir warten gespannt auf einen Anfang von dir.

Na, wenns so einfach wäre.

Du erwartest doch nicht, dass jemand die Aufgabe für dich erledigt, während du dich mit einem kühlen Bier in der Hand zurücklehnst und auf die Lösungen wartest - noch dazu ohne die nötigen Hintergrundinfos?

Nein, da hast Du natürlich recht.

Ich versuch mal, etwas vorzulegen. Bin aber nicht sicher, ob ich es schaffe.

Mir ist nämlich absolut überhaupt nicht klar, wie das Iframe mit der Hauptseite kommunizieren kann.

Lukas

[Lukas]

Ich versuch mal, etwas vorzulegen. Bin aber nicht sicher, ob ich es schaffe.

Hi Martin,

scheint irgendwie wie mit einem Brief zu sein. Der erste Satz ist immer am schwierigsten ;)

Ich überlege gerade, wie ich ein  Gerüst inkl. Iframe auf das nötigste reduzieren kann, damit wir etwas zum "spinnen" haben.

Frage: Macht das eigentlich einen Unterschied, ob es ein normales Frame ist oder ein Iframe?

Lukas

[Lukas]

Hi,

Mein Lösungsvorschlag ist

Iframe:

  
  
<script type=\"text/javascript\">  
top.document.getElementById('zeile_12').innerHTML ='neues_icon';  
</script>  
  

Haupseite:

<td id='zeile_12'>...

Der Rest ist im Prinzip hauptsächlich php.

Aber ich habe ein ganz anderes Problem hierbei. Es gibt im Iframe keine Stelle, an der ich das Iframe-Javascript aufrufen kann, da es immer entweder VOR einem header... stehen würde und somit das Script "killt" oder aber HINTER dem besagten header... und somit nicht mehr ausgeführt wird.

Die Architektur ist wie folgt:

Link auf der Hauptseite ruft Iframe auf. Iframe enthält php-script inkl. Formular, in dem die betreffenden Zeilen gewählt werden können. Formular ruft dasselbe php-script auf und nach Formulardaten-Prüfung gehts per header("Location:.."); zu einem weiteren Script, das ein pdf erstellt. Aber auch nur dann, wenn keinerlei weitere Ausgaben (außer dem pdf selber) durch das Script gemacht werden.

Was tun?

Noch ein Zwischen-Script einbauen, daß nur das JS ausführt und danach auf das pdf-Erstell-script weiterleitet?

Lukas

[Der Martin]

Hallo Lukas,

<script type="text/javascript">

top.document.getElementById('zeile_12').innerHTML ='neues_icon';
</script>

  
das ist doch schon mal ein Ansatz. Ich hätte zwar "parent" anstatt "top" genommen, aber das ist nur in mehrfach verschachtelten Framesets wirklich ein Unterschied.  
  

> Aber ich habe ein ganz anderes Problem hierbei. Es gibt im Iframe keine Stelle, an der ich das Iframe-Javascript aufrufen kann, da es immer entweder VOR einem header... stehen würde und somit das Script "killt" oder aber HINTER dem besagten header... und somit nicht mehr ausgeführt wird.  
  
Das verstehe ich leider überhaupt nicht. Warum solltest du das nicht beispielsweise mit dem onsubmit-Handler des Formulars aufrufen können?  
  

> Link auf der Hauptseite ruft Iframe auf. Iframe enthält php-script inkl. Formular, in dem die betreffenden Zeilen gewählt werden können. Formular ruft dasselbe php-script auf und nach Formulardaten-Prüfung gehts per header("Location:.."); zu einem weiteren Script, das ein pdf erstellt. Aber auch nur dann, wenn keinerlei weitere Ausgaben (außer dem pdf selber) durch das Script gemacht werden.  
  
Klingt verdammt umständlich. Geht das nicht einfacher?  
  
Ciao,  
 Martin  

-- 
Zwei Dinge sind unendlich: Das Universum und die menschliche Dummheit. Beim Universum bin ich mir aber nicht ganz sicher.  
  (Albert Einstein, deutscher Physiker)  
Selfcode: fo:) ch:{ rl:| br:< n4:( ie:| mo:| va:) de:] zu:) fl:{ ss:) ls:µ js:(

[Lukas]

Hi,

Ich hätte zwar "parent" anstatt "top" genommen, aber das ist nur in mehrfach verschachtelten Framesets wirklich ein Unterschied.

verstehe.

<script type="text/javascript">

top.document.getElementById('zeile_12').innerHTML ='neues_icon';
</script>

>   
> das ist doch schon mal ein Ansatz.  
  
Aber nicht ganz der, den ich möchte. Mir wäre viel lieber, es wäre mir gelungen, über das Iframe eine Funktion des parent-frames aufrufen zu können. Dann gäbe es nämlöich auch das anschließend beschriebene Header-Problem nicht mehr und Du hättest recht mit Deiner onsubmit-Idee.  
  
Ist das denn möglich?  
  

> Das verstehe ich leider überhaupt nicht. Warum solltest du das nicht beispielsweise mit dem onsubmit-Handler des Formulars aufrufen können?  
>   
  
siehe vorherige Frage...  
  
  

> > Link auf der Hauptseite ruft Iframe auf. Iframe enthält php-script inkl. Formular, in dem die betreffenden Zeilen gewählt werden können. Formular ruft dasselbe php-script auf und nach Formulardaten-Prüfung gehts per header("Location:.."); zu einem weiteren Script, das ein pdf erstellt. Aber auch nur dann, wenn keinerlei weitere Ausgaben (außer dem pdf selber) durch das Script gemacht werden.  
>   
> Klingt verdammt umständlich. Geht das nicht einfacher?  
>   
  
  
Ja, wenn man sowas beschreibt, klingt es tatsächlich umständlich. In der Praxis ist das gar nicht so umständlich und folgt normalen Programmierstrukturen.  
  
Lukas

[Lukas]

Ist das denn möglich?

Ich glaub, ich habs.

  
onSubmit="top.MeineFuntkion();"  

scheint zu funktionieren.

[Der Martin]

Hallo,

Ich glaub, ich habs.

onSubmit="top.MeineFuntkion();"

scheint zu funktionieren.

ja, genau so. Im Prinzip war dein Aufruf von top.document.getElementById(...) ja schon das gleiche.
Übrigens schreibt sich der Eventhandler in Kleinbuchstaben, also onsubmit. Solange er im HTML als Attribut notiert wird, ist das nicht tragisch, denn HTML ist nicht case-sensitive (XHTML aber schon). Sobald der Handler aber innerhalb von Javascript selbst gesetzt wird, ist Kleinschreibung Pflicht - Javascript ist da streng. Beispiel:

formularobjekt.onsubmit = Meinefunktion;

formularobjekt und Meinefunktion müssen natürlich konsequent so geschrieben werden, wie du sie selbst definierst.

Ciao,
 Martin

[Lukas]

Ciao,
Martin

Danke für die Hilfe und die weitergehenden Erläuterungen, Martin.

Lukas