HTML Seiten-Zustand bei Aktualisierung beibehalten

Heimwerker · 13. Juni 2012

Hallo zusammen,

Ich habe ein Auf- und Zuklappen von Zeilen in einer Seite.
Der Inhalt der Seite wird von einem anderen Programm ständig neu geschrieben.
Diese Seite wird öffter mit "META HTTP-EQUIV=Refresh" aktualisiert.
Bei der Aktualisierung wird die Seite jedoch zurückgesetzt und zugeklapte Inhalte somit wieder geöffnet.
Kann dies geändert oder umgangen werden?

Beispielcode:

<html>
<body>
<table border="0">
<tr id="Reiter1" onclick="document.getElementById('Reiter2').style.display='block';
document.getElementById('z1').style.display='block';
document.getElementById('z2').style.display='block';
this.style.display='none'" style="display:none;">
<td>+ Reiter</td>
</tr>
<tr id="Reiter2" onclick="document.getElementById('Reiter1').style.display='block';
document.getElementById('z1').style.display='none';
document.getElementById('z2').style.display='none';
this.style.display='none'">
<td>- Reiter</td>
</tr>
<tr id="z1">
<td>test1</td>
</tr>
<tr id="z2">
<td>test2</td>
</tr>
<META HTTP-EQUIV=Refresh CONTENT='5; URL=file:///c:/diese_Datei.htm'>
</body></html>

file:///c:/diese_Datei.htm bitte anpassen!

MfG
Heimwerker

izak · 13. Juni 2012

AW: [ HTML ] Seiten-Zustand bei Aktualisierung beibehalten

Ich würde den IST-Zustand einfach in eine PHP-Session schreiben! Oder darfste/willste kein PHP benutzen?

Unknown-Error · 13. Juni 2012

AW: [ HTML ] Seiten-Zustand bei Aktualisierung beibehalten

so ganz kommt der Anwendungsfall noch nicht rüber..

..beim ersten Laden soll alles "zu" sein, dann kann der User was öffnen, Content nachladen lassen (hierbei keine Schließung) und dann soll der User bestimmt trotzdem jederzeit öffnen/schließen können?

A) ..ich würde einen Schließmechanismus mit CSS nehmen (hide/show) .. (kein muss

)

Für diesen würde ich dann bzg. der erweiterten Logik (dein Erneuern) mit javascript steuern. Gegenüber dem von dir beschriebenen Phänomen bräuchtest du dann also (egal wie) eine weitere Bedingung, die prüft ob Content geladen wurde. Z.B. könntest du nach jedem Refresh abfragen, ob spezifischer Inhalt vorhanden ist und dann für diesen Fall ein Öffnen erzwingen bzw. vorgeben.

Yuuri · 13. Juni 2012

AW: [ HTML ] Seiten-Zustand bei Aktualisierung beibehalten

Internet + Speichern = Cookie

Heimwerker · 13. Juni 2012

AW: [ HTML ] Seiten-Zustand bei Aktualisierung beibehalten

soory, verstehe nicht wie das im code aussehen soll.
Ob css oder php... egal. css nutze ich bereits, wäre also von vorteil. php bin ich mir nicht sicher, ob das so ohne weiteres auf unix läuft.
Beim aktualisieren soll der letzte Zustand beibehalten werden. Ob geöffnet oder bene nicht. Ich benötige auch keine umschreibung, wie ich es machen könnte, da ich diese nicht in code umsetzen kann. Ich kenne mich nur etwas im HTML aus!

Kann ich eventuell mit HTML etwas im Browserspeicher speichern und abfragen (Cookis/-SessionID etc..)? Wenn ja wie?

Danke, für die Antworten.

chris2603 · 13. Juni 2012

AW: [ HTML ] Seiten-Zustand bei Aktualisierung beibehalten

Hi,

mit HTML kannst du gar nix was das angeht. Wenn du nicht mit PHP arbeiten willst gibt es nur noch die Möglichkeit via JavaScript Cokies auszulesen bzw. zu setzen.

Gruß

chris2603

Heimwerker · 13. Juni 2012

AW: [ HTML ] Seiten-Zustand bei Aktualisierung beibehalten

Hat eventuell jemand ein beispiel, wie ich das Javaskript mit cookies dort einbauen kann?

chris2603 · 13. Juni 2012

http://de.selfhtml.org/javascript/objekte/document.htm#cookie

Daaron · 13. Juni 2012

Das Zauberwort heißt hier, wie so oft, AJAX.
Solche Nachlade-Aktionen sind perfekte Anwendungsfälle für asynchrone Abfragen. Es mag zwar dann nicht barrierefrei sein, dafür ist es performant (sowohl für den Server als auch für den User) und bequem.

Heimwerker · 13. Juni 2012

DANKE, auf SELFHTML bin ich recht oft :-)
mit AJAX kann ich leider nichts anfangen.

Ich habe es nun soweit, dass der Zustend ins cookie geschriben wird.
Leider verstehe ich nicht wie ich den Zustand in "<dt...>" auslese, abfrage und dementsprechend handle. Ich kenne dort nur "onclick". gibt es etwas bei Seitenaufbau?

jetziger code:

<html>

<script type="text/javascript">
function zu() {
document.cookie="zu";
}
function auf() {
document.cookie="auf";
}
</script>

<body>
<table border="0">
<tr id="Reiter1" onclick="document.getElementById('Reiter2').style.display='block';
document.getElementById('z1').style.display='block';
document.getElementById('z2').style.display='block';
auf();
this.style.display='none'" style="display:none;">
<td>+ Reiter</td>
</tr>
<tr id="Reiter2" onclick="document.getElementById('Reiter1').style.display='block';
document.getElementById('z1').style.display='none';
document.getElementById('z2').style.display='none';
zu();
this.style.display='none'">
<td>- Reiter</td>
</tr>
<tr id="z1">
<td>test1</td>
</tr>
<tr id="z2">
<td>test2</td>
</tr>
<META HTTP-EQUIV=Refresh CONTENT='5; URL=file:///c:/design.htm'>
</body></html>

Yuuri · 13. Juni 2012

Code:

<body onload="...javascript...">

Wieso aber nicht per jQuery/prototype und Co.?

chris2603 · 13. Juni 2012

In JQuery müsste er sich ja auch erst reinfuchsen.

http://de.selfhtml.org/javascript/objekte/document.htm#get_element_by_id

dort kannst du ein objekt über seine id finden und über die id kannst du dann auch die eigenschaften des elements prüfen z.b. ob

Code:

display:none;

Das setzt aber einwenig javascript verständnis vorraus.

Yuuri · 13. Juni 2012

Mag sein, er muss sich aber nicht um Attribute wie onload im body scheren, sondern kann einfach

Code:

$(function() { ... });

nutzen.

Daaron · 13. Juni 2012

Es geht schneller, sich in ein Framework einzuarbeiten, als ohne jeglichen Plan ein Projekt ohne Framework umzusetzen.

Heimwerker · 13. Juni 2012

Jetzt schaut es schon gut aus. Es Funktioniert zu mindest. Damit sollte ich weiter kommen.
Mal schaun wie weit ich mit dem cookie komme, da einige witere Reiter/Blöcke ein und ausgeblendet werden können müssen.

<html>

<script type="text/javascript">
function zu()
{ document.cookie="zu";
}
function auf()
{ document.cookie="auf";
}
function start()
{
if (document.cookie)
{
zustand = document.cookie;
if ( zustand == "zu" )
{
document.getElementById('Reiter1').style.display='block';
document.getElementById('Reiter2').style.display='none';
document.getElementById('z1').style.display='none';
document.getElementById('z2').style.display='none';
}
else
{
document.getElementById('Reiter1').style.display='none';
document.getElementById('Reiter2').style.display='block';
document.getElementById('z1').style.display='block';
document.getElementById('z2').style.display='block';
}
}
}

</script>

<body onload='start()'>
<table>
<tr id="Reiter1" onclick="document.getElementById('Reiter2').style.display='block';
document.getElementById('z1').style.display='block';
document.getElementById('z2').style.display='block';
auf();
this.style.display='none'" style="display:none;">
<td>+ Reiter</td>
</tr>
<tr id="Reiter2" onclick="document.getElementById('Reiter1').style.display='block';
document.getElementById('z1').style.display='none';
document.getElementById('z2').style.display='none';
zu();
this.style.display='none'">
<td>- Reiter</td>
</tr>
<tr id="z1">
<td>test1</td>
</tr>
<tr id="z2">
<td>test2</td>
</tr>
<META HTTP-EQUIV=Refresh CONTENT='5; URL=design.htm'>
</body></html>

chris2603 · 13. Juni 2012

Du kannst ja deinem Cookie dann ein array mit geben oder einen string geben wo die ganzen einstellungen gespeichert sind;

z.B. document.cookie="r1=zu,r2=auf,r3=zu,z1=zu,z2=auf";

Für arrays: http://de.selfhtml.org/javascript/objekte/array.htm

Heimwerker · 13. Juni 2012

Ja genau, so wird's was. Vielen Dank. :-)

Yuuri · 13. Juni 2012

Code:

$.cookie( 'name', 'wert' );

Heimwerker · 13. Juni 2012

also arrays mag das cookie nicht...
z.B.:

zustand = new Array("test1","test2");
document.cookie=zustand;

zustand=document.cookie;
zustand[0] = "test3";
alert(zustand);

anstatt test3,test2 spuckt er test1,test2

und cookie('name','wert'); funktioniert nicht:

document.cookie('reiter1','test1');
alert(document.cookie('reiter1'));

da kommt nix zurück, scheint der IE syntacktisch nicht zu können.

Yuuri · 13. Juni 2012

Ein Cookie ist auch nur ein String und kann mit Arrays nichts anfangen. Lies dich am besten erst Mal ein, wir können dir hier nur sagen, was woanders schon 100 Mal steht.

$.cookie() funktioniert auch nicht, dazu musst du jQuery einbinden. Dadurch und durch Plugins, bekommst du aber weitaus mehr Möglichkeiten, die zudem noch viel einfacher anzuwenden sind.

HTML Seiten-Zustand bei Aktualisierung beibehalten

Lt. Junior Grade

Cadet 4th Year

Cadet 4th Year

Fleet Admiral

Lt. Junior Grade

Lieutenant

Lt. Junior Grade

Lieutenant

Fleet Admiral

Lt. Junior Grade

Fleet Admiral

Lieutenant

Fleet Admiral

Fleet Admiral

Lt. Junior Grade

Lieutenant

Lt. Junior Grade

Fleet Admiral

Lt. Junior Grade

Fleet Admiral