Anker ohne Klick

[Clark]

Hallo,

wie der Betreff schon sagt, würde ich gerne einen Anker ausführen ohne dass der User klicken muss. Hintergrund ist folgender: Es werden ca. 120 Datensätze untereinander ausgegeben. Jede Zeile stellt einen Datensatz dar. Der User kann innerhalb jeden Datensätzes z.B. Notizen erfassen. Wenn er also bei Datensatz 51 (als Beispiel) eine Notiz hinterlassen möchte, klickt er auf das Notiz-Symbol, was das erneute aufrufen der der PHP zur Folge hat. Es erscheint das Notiz-Eingabefeld. Der User erfasst seine Notiz und speichert diese ab. Erneut wird die PHP ausgeführt und wieder die Liste angezeigt. Allerdings von vorne und nicht bei Datensatz 51, sodass der User erstmal scrollen muss. Dieses Scrollen will ich vermeiden.

Meine Idee war nun einen Anker zu setzen, da ich ja die Datensatz-ID weiß. Ich finde im Netz leider immer nur Beispiele, in denen der User auf etwas klicken muss, damit der Anker ausgeführt wird.

Ich hoffe es kann mir hier jemand helfen.

Besten Dank und Gruß

[Robert B.]

Hallo Clark,

wie der Betreff schon sagt, würde ich gerne einen Anker ausführen ohne dass der User klicken muss. Hintergrund ist folgender: Es werden ca. 120 Datensätze untereinander ausgegeben. Jede Zeile stellt einen Datensatz dar. Der User kann innerhalb jeden Datensätzes z.B. Notizen erfassen. Wenn er also bei Datensatz 51 (als Beispiel) eine Notiz hinterlassen möchte, klickt er auf das Notiz-Symbol, was das erneute aufrufen der der PHP zur Folge hat. Es erscheint das Notiz-Eingabefeld. Der User erfasst seine Notiz und speichert diese ab. Erneut wird die PHP ausgeführt und wieder die Liste angezeigt. Allerdings von vorne und nicht bei Datensatz 51, sodass der User erstmal scrollen muss. Dieses Scrollen will ich vermeiden.

Meine Idee war nun einen Anker zu setzen, da ich ja die Datensatz-ID weiß. Ich finde im Netz leider immer nur Beispiele, in denen der User auf etwas klicken muss, damit der Anker ausgeführt wird.

Ohne es getestet zu haben:

<div id="ds51">
    <form action="<?= htmlspecialchars($_SERVER['PHP_SELF']) ?>#ds51" method="post">
        <!-- Formular-Felder für die Notiz -->
        <button type="submit">Speichern</button>
    </form>
</div>

Viele Grüße
Robert

[Clark]

Ne, funzt leider nicht… Könnte es daran liegen, dass bei dem Aufruf der php zunächst mittels Suchkriterien die Datenbankabfrage erfolgt und die Datensätze halt ersteinmal ausgegeben werden und erst dann die Ankeraktion ausgeführt werden kann/sollte? Zu Beginn der PHP existiert quasi noch garkein Datensatz... 😕 Entsprechend versucht das Script ja zu einem Punkt zu springen, den es noch garnicht gibt…

[MudGuard]

Hi,

Könnte es daran liegen, dass bei dem Aufruf der php zunächst mittels Suchkriterien die Datenbankabfrage erfolgt und die Datensätze halt ersteinmal ausgegeben werden und erst dann die Ankeraktion ausgeführt werden kann/sollte?

Nein, mit dem Anspringen des Ankers hat PHP überhaupt nix zu tun.

PHP findet auf dem Server statt, das Anspringen des Ankers im Browser.

cu,
Andreas a/k/a MudGuard

[Gunnar Bittersmann]

@@Robert B.

Ohne es getestet zu haben:

Hätteste mal.

Test (auf die Icons clicken)

Allerdings kann auch da die Seite etwas springen.

    <form action="<?= htmlspecialchars($_SERVER['PHP_SELF']) ?>#ds51" method="post">

<?= htmlspecialchars($_SERVER['PHP_SELF']) ?> brauchst du nicht; action="#ds51" genügt.

Test 2

😷 LLAP

[Robert B.]

Hallo Gunnar,

vielen Dank!

Viele Grüße
Robert

[Clark]

Hallo Gunnar,

wenn ich mir Deine Test-Verlinkungen anschaue muss der User doch trotzdem noch auf das Symbol drauf klicken, bevor er zum jeweiligen Artikel springt. Wenn ich auf Deinen Link klicke möchte ich z.B. sofort bei Artikel 1 landen und nicht erst bei der Präambel landen.

@Dedlfix: Das klingt alles sehr gut und logisch - nur leider habe ich mit Javascript absolut 0 Erfahrung 😟

Sich sort einzuarbeiten steht dazu nicht im Verhältnis, aber sicherlich hast Du mit Deinen Ausführungen recht.

[Robert B.]

Hallo Clark,

wenn ich mir Deine Test-Verlinkungen anschaue muss der User doch trotzdem noch auf das Symbol drauf klicken, bevor er zum jeweiligen Artikel springt. Wenn ich auf Deinen Link klicke möchte ich z.B. sofort bei Artikel 1 landen und nicht erst bei der Präambel landen.

Der Click auf das Symbol ist das Absenden des Formulars mit dem Button. Das ist also die Aktion, die der Nutzer ausführt, um die Änderung im Datensatz zu speichern.

Viele Grüße
Robert

[dedlfix]

Tach!

Wenn er also bei Datensatz 51 (als Beispiel) eine Notiz hinterlassen möchte, klickt er auf das Notiz-Symbol, was das erneute aufrufen der der PHP zur Folge hat. Es erscheint das Notiz-Eingabefeld. Der User erfasst seine Notiz und speichert diese ab. Erneut wird die PHP ausgeführt und wieder die Liste angezeigt. Allerdings von vorne und nicht bei Datensatz 51, sodass der User erstmal scrollen muss. Dieses Scrollen will ich vermeiden.

Meine Idee war nun einen Anker zu setzen, da ich ja die Datensatz-ID weiß.

Mit einem Anker holst du zwar eine bestimmte Stelle ins Blickfeld, in deinem Fall also den Datensatz, aber das ist vielleicht auch nicht das, was du (oder der Anwender) haben möchtest. Angenommen der Datensatz steht in Bildmitte, so steht er nun nach der Aktion am oberen Bildrand. Damit ist er zwar im Sichtfeld, aber er ist dem Anwender aus dem Fokus weggesprungen. Er muss zwar nicht scrollen, aber trotzdem die Maus an eine andere Stelle positionieren, als der nachfolgende Datensatz gestanden hat, wenn er mit selbigem fortfahren möchte.

Eigentlich müsste die aktuelle Scrollposition ermitteln und wiederhergestellt werden. Das geht nur mit Javascript. Aber wenn du mit Javascript eine Lösung baust, wäre es vermutlich sinnvoller, sie gleich komplett in Javascript auszuführen. Die Eingabe erfolgt in einem eingeblendeten und überlagernden Eingabefeld und wird zum Beispiel per Fetch API zum Server übertragen. Dann rollt überhaupt nichts. Dein Anwendungsfall liest sich für mich nach administrativer Tätigkeit, bei der der Anwenderkreis bekannt ist und man Javascript voraussetzen kann.

dedlfix.

[Robert B.]

Moin dedlfix,

Aber wenn du mit Javascript eine Lösung baust, wäre es vermutlich sinnvoller, sie gleich komplett in Javascript auszuführen. Die Eingabe erfolgt in einem eingeblendeten und überlagernden Eingabefeld und wird zum Beispiel per Fetch API zum Server übertragen. Dann rollt überhaupt nichts. Dein Anwendungsfall liest sich für mich nach administrativer Tätigkeit, bei der der Anwenderkreis bekannt ist und man Javascript voraussetzen kann.

dieser Ansatz hat zudem den Vorteil, dass nur die Datenänderung und nicht die ganze noch einmal übertragen werden muss. Das spart massiv Bandbreite und Performance.

Viele Grüße
Robert