Warum macht JS hier einen Unterschied?

[Jörg]

Hallo,

ich möchte, dass per JS die aktuelle Seite erneut geladen wird.

Hierzu habe ich einen Button, der eine ID hat und habe einen Klick auf diesen Button wie folgt belegt:

    $('#refresh').on('click', function(){
               window.location = './';
    });

Funktioniert einwandfrei.

Nun habe ich eine Statuszeile, die immer da, aber ausgeblendet ist (display:none).
Bei einem bestimmten Ereignis wird sie eingeblendet (display:block). Die Statuszeile hat eine ID.

Sobald diese Statuszeile nun sichtbar ist, wird beim Klick auf den Refreshbutton aber nun die Hauptseite geladen, nicht die Seite, in der der User sich tatsächlich befindet.

Wie komme ich dem Fehler, der dahinter steckt, auf die Schliche?

Jörg

[Der Martin]

Hallo Jörg,

ich möchte, dass per JS die aktuelle Seite erneut geladen wird.

Hierzu habe ich einen Button, der eine ID hat und habe einen Klick auf diesen Button wie folgt belegt:

    $('#refresh').on('click', function(){
               window.location = './';
    });

Funktioniert einwandfrei.

das glaube ich nicht.

Nun habe ich eine Statuszeile, die immer da, aber ausgeblendet ist (display:none).
Bei einem bestimmten Ereignis wird sie eingeblendet (display:block). Die Statuszeile hat eine ID.

Sobald diese Statuszeile nun sichtbar ist, wird beim Klick auf den Refreshbutton aber nun die Hauptseite geladen, nicht die Seite, in der der User sich tatsächlich befindet.

Das eine hat aber mit dem anderen nichts zu tun. In deinem Javascript-Schnipsel tust du doch genau das: Du lädst das Default-Dokument (in der Regel sowas wie index.html) aus dem aktuellen Verzeichnis.

Wie komme ich dem Fehler, der dahinter steckt, auf die Schliche?

Ich vermute, du suchst eher location.reload().

Einen schönen Tag noch
 Martin

[Jörg]

Hallo Martin,

Funktioniert einwandfrei.

das glaube ich nicht.

Ist aber so.

Nun habe ich eine Statuszeile, die immer da, aber ausgeblendet ist (display:none).
Bei einem bestimmten Ereignis wird sie eingeblendet (display:block). Die Statuszeile hat eine ID.

Sobald diese Statuszeile nun sichtbar ist, wird beim Klick auf den Refreshbutton aber nun die Hauptseite geladen, nicht die Seite, in der der User sich tatsächlich befindet.

Das eine hat aber mit dem anderen nichts zu tun. In deinem Javascript-Schnipsel tust du doch genau das: Du lädst das Default-Dokument (in der Regel sowas wie index.html) aus dem aktuellen Verzeichnis.

Es handelt sich um einen Kalender.
Dort kann ich die Wochen über next und prev blättern.
Wenn ich nun 2 Wochen weiter (als heute) bin und den Refresh-Button drücke, bleibe ich beim Stand "2 Wochen weiter".
Die Buttons selber werden per onclick-ereignis ausgelesen und der Value verrät Javascript, was der User grad will.
So verhalten sich die Buttons: Next, Prev und current (immer bezogen auf die Woche).

Der Refresh-Button hat keinen Value, nur eine ID.
Und doch, wenn ich mich in iner beliebigen Woche aufhalte, wird der Refresh mich derzeit wieder auf diese Woche bringen.
Mit Deiner location.reload()-Funktion habe ich das Problem, dass der Browser mich fragt, ob ich Formulatdaten erneut senden will, wenn ich zuvor auf next oder prev geklickt habe. Das nützt mir also leider nicht.

Aber warum funktioniert der Refresh-Button nicht mehr, nachdem ich die Statusleiste einblende.

Ah, ok, ich habs gefunden, glaube ich.

Um die Statusleiste ein zublenden, muss ich über ein anderes Brwoserfenster einen Termin eingeben. Danach wird in Browserfenster1 dann die Statuszeile eingeblendet, dass sich Termine geändert haben.

Das Problem besteht nur, wenn ich das dann alles im FF mache. Wenn ich die 2. Aktion hingegen in Chrome mache, dann funktioniert mein Refreshbutton im FF nach wie vor. Soll heißen, ich habe quasi einen Fall getestet, der in wirklichen leben selten bis gar nicht vorkommen sollte.

Jörg

[Rolf B]

Hallo Jörg,

Problem, dass der Browser mich fragt, ob ich Formulatdaten erneut senden will, wenn ich zuvor auf next oder prev geklickt habe.

Das ist dann falsche Formulatprogrammierung.

Wenn man nach einem POST Request sofort die Antwort anzeigt und stehen lässt, dann passiert genau das. Weil der Refresh dann den POST wiederholen würde. Wenn man den POST Request so verarbeitet, dass man die Änderung in die DB einpflegt und den Request mit einem Statuscode 303 und einem Redirect zur gleichen Seite beantwortest, passiert das nicht. Content braucht dieser Redirect nicht. Der kommt, wenn nach dem Redirect die Seite neu anzeigt.

Rolf

[Jörg]

Hallo Rolf,

Das ist dann falsche Formulatprogrammierung.

Wenn man nach einem POST Request sofort die Antwort anzeigt und stehen lässt, dann passiert genau das. Weil der Refresh dann den POST wiederholen würde. Wenn man den POST Request so verarbeitet, dass man die Änderung in die DB einpflegt und den Request mit einem Statuscode 303 und einem Redirect zur gleichen Seite beantwortest, passiert das nicht. Content braucht dieser Redirect nicht. Der kommt, wenn nach dem Redirect die Seite neu anzeigt.

Geile Idee, aber wer macht das denn?
Habe ich noch nie irgendwo gesehen.
Ok, ich fange natürlich auch dopplet abgesendete Formulare ab, damit man keine Formulare über Reload doppelt versenden kann. Aber so wie von Dir beschrieben hätte man natürlich noch nen zusätzlichen Effekt.

Gruß, Jörg

[Der Martin]

Hallo,

[...] dass man die Änderung in die DB einpflegt und den Request mit einem Statuscode 303 und einem Redirect zur gleichen Seite beantwortest, passiert das nicht. Content braucht dieser Redirect nicht. Der kommt, wenn nach dem Redirect die Seite neu anzeigt.

Geile Idee, aber wer macht das denn?

jeder, der dieses Problem schon mal hatte. POST, Redirect, GET.

Habe ich noch nie irgendwo gesehen.

Wird aber regelmäßig auch hier im Forum empfohlen.

Einen schönen Tag noch
 Martin

[Gunnar Bittersmann]

@@Jörg

ich möchte, dass per JS die aktuelle Seite erneut geladen wird.

Hierzu habe ich einen Button

Wozu der Button? Wozu JavaScript?

Alle Browser haben bereits einen Reload-Button. Schon vorhandene Browserfunktionen auf Webseiten nochmals nachzubauen ist i.A. keine so gute Idee.

Wie komme ich dem Fehler, der dahinter steckt, auf die Schliche?

Indem du in MDN über window.location nachliest.

“See Location for all available properties.”

Und dort findest du auch die passende Methode für einen Reload.

🖖 Живіть довго і процвітайте

[Jörg]

Hallo Gunnar,

Wozu der Button? Wozu JavaScript?

Alle Browser haben bereits einen Reload-Button. Schon vorhandene Browserfunktionen auf Webseiten nochmals nachzubauen ist i.A. keine so gute Idee.

In meinem Fall schon, weil der Reloadbutton des Browsers nicht das macht, was ich gerne hätte.

Gruß, Jörg

[Gunnar Bittersmann]

@@Jörg

    $('#refresh').on('click', function(){
               window.location = './';
    });

Gibt es einen Grund, warum du nicht JavaScript schreibst, sondern eine Bibliothek draufstülpst, die man heutzutage nicht mehr braucht?

document.querySelector('#refresh').addEventListener('click', () => {
  window.location = './';
});

🖖 Живіть довго і процвітайте

[Rolf B]

Hallo Gunnar,

ich habe ca 30 gezählt (je nach gewünschter Lesbarkeit...).

Jeder einzelne ist nicht wirklich relevant 😉

Aber ehrlich, wenn man ein größeres, hystorisch gewachsenes jQuery-Projekt hat, kann man die Lib auch benutzen. Raus kriegt man sie mit vertretbarem und bezahlbarem Aufwand eh nicht mehr.

Sie in ein neues Projekt rein zu bringen wäre dagegen Unsinn. Auch nicht, um jQueryUI zu nutzen. Da gibt's sicherlich besseres, wenn einem Plain Vanilla JS nicht reicht.

Rolf

[Gunnar Bittersmann]

@@Rolf B

Aber ehrlich, wenn man ein größeres, hystorisch gewachsenes jQuery-Projekt hat, kann man die Lib auch benutzen. Raus kriegt man sie mit vertretbarem und bezahlbarem Aufwand eh nicht mehr.

Doch. jQuery rauszuschmeißen ist Performance-Optimierung. Und optimierte Performance kann sich in barer Münze auszahlen: niedrigere Absprungraten, bessere UX, mehr Gewinn. Der Aufwand kann sich mitunter durchaus lohnen.

🖖 Живіть довго і процвітайте