• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Scroll to top in PHP

D

Dsimon24

Mitglied
Hallo zusammen,

ich habe eine PHP-Seite mit Formularen und einiges mehr.
Wenn ich das Formular über die action-Methode an eine andere PHP-Datei versende,
wird von dieser anschließend wieder auf die ursprüngliche PHP-Seite zurückverlinkt
- mittels folgendem Code:

Code: 
<script language="javascript">
        javascript:history.back()
</script>

So, wenn ich dann wieder auf die ursprüngliche Seite zurückgeleitet werde,
sehe ich einen weißen Screen, da er nicht mehr nach oben scrollt,
sondern sich in der Mitte befindet, wo kein Inhalt steht.

Wie kann ich es realisieren, dass nach der Funktion 'history.back'
die ursprüngliche Seite direkt nach oben gescrollt wird?

Ich weiß, dass 'history.back' vielleicht nicht die Ideale Lösung ist, für
mein Vorhaben aber ausreichend - oder welche Alternative gibt´s?

VG, David
 
Dsimon24 schrieb:
Hallo zusammen,

ich habe eine PHP-Seite mit Formularen und einiges mehr.
Wenn ich das Formular über die action-Methode an eine andere PHP-Datei versende,
wird von dieser anschließend wieder auf die ursprüngliche PHP-Seite zurückverlinkt
- mittels folgendem Code:

Code: 
<script language="javascript">
        javascript:history.back()
</script>

So, wenn ich dann wieder auf die ursprüngliche Seite zurückgeleitet werde,
sehe ich einen weißen Screen, da er nicht mehr nach oben scrollt,
sondern sich in der Mitte befindet, wo kein Inhalt steht.

Wie kann ich es realisieren, dass nach der Funktion 'history.back'
die ursprüngliche Seite direkt nach oben gescrollt wird?

Ich weiß, dass 'history.back' vielleicht nicht die Ideale Lösung ist, für
mein Vorhaben aber ausreichend - oder welche Alternative gibt´s?

VG, David
Zum Vergrößern anklicken....

Du kannst entweder die ursprüngliche Seite in der Session speichern.
PHP: 
$_SESSION['referer'] = 'Seite1.php';
Oder als hidden Input mitsenden:
HTML: 
<input type="hidden" name="_referer" value="Seite1.php">

Und anschließend:
PHP: 
header('Location: '.$_SESSION['referer']);
bzw.
PHP: 
header('Location: '.$_POST['_referer']);
 
Das hilft mir in einer Sache schonmal sehr weiter - vielen Dank!

In einer anderen Sache habe ich allerdings noch das Problem,
das die Seite (bspw. 'site.php') mehrere Tabs beinhaltet:

HTML: 
<input type="radio" name="tabs" id="<?php echo $row1->tab_no; ?>" checked />
<label for="<?php echo $row1->tab_no; ?>"><?php echo $row1->time ?></label>

Wenn ist bspw. aus Tab 2 eine neue php aufrufe und mich anschließend wieder
zurückleiten lasse, dann komme ich wieder in Tab 2 an. Mit deiner Methode lande
ich dann aber wieder in Tab 1. Gibt es da ne andere Möglichkeit, zum top zu scrollen -
möglichst direkt nach der rückleitung?
 
Dsimon24 schrieb:
Das hilft mir in einer Sache schonmal sehr weiter - vielen Dank!

In einer anderen Sache habe ich allerdings noch das Problem,
das die Seite (bspw. 'site.php') mehrere Tabs beinhaltet:

HTML: 
<input type="radio" name="tabs" id="<?php echo $row1->tab_no; ?>" checked />
<label for="<?php echo $row1->tab_no; ?>"><?php echo $row1->time ?></label>

Wenn ist bspw. aus Tab 2 eine neue php aufrufe und mich anschließend wieder
zurückleiten lasse, dann komme ich wieder in Tab 2 an. Mit deiner Methode lande
ich dann aber wieder in Tab 1. Gibt es da ne andere Möglichkeit, zum top zu scrollen -
möglichst direkt nach der rückleitung?
Zum Vergrößern anklicken....

Du könntest dem referer eine entsprechende Information als URL-Parameter anhängen:
PHP: 
Seite1.php?tab=xyz
 
Wie das ist? Blöd würde ich sagen. :D:D

Vielleicht möchtest du deine Frage ja mal verständlich schreiben.
 
Du kannst den aktuellen Tab der von PHP zurückgegeben wird mit JavaScript auslesen und den entsprechenden Tab öffnen.
Wenn du nach dem "history.back" wieder den selben Scrollstand wie vorher haben möchtest, kannst du auch diesen erst mit JS an PHP geben und bei der Rückgabe mit JS zum angegebenen Punkt scrollen
 
bdt600 schrieb:
Vielleicht möchtest du deine Frage ja mal verständlich schreiben.
Zum Vergrößern anklicken....

Ich versuche es nochmal genauer zu erklären, da ich gerade am verzweifeln bin.

Mit dem folgenden Code:
HTML: 
<input type="radio" name="tabs" id="<?php echo $row1->tab_no; ?>" checked />
<label for="<?php echo $row1->tab_no; ?>"><?php echo $row1->time ?></label>

Habe ich mehrere Tabs erstellt (Radio-Button, die mittels CSS zu Tabs designt wurden.
Je nachdem, welcher Tab gerade aktiv ist, erhalte ich einen bestimmten Inhalt darunter.
In jedem Tab ist ein separates Formular, welches ich über action an php übersende.

Auf der PHP habe ich anschließend die folgende Funktion eingebaut:
Code: 
<script language="javascript">
        javascript:history.back()
</script>

Damit werde ich dann auf die ursprüngliche Seite mit dem Formular zurückgeleitet.
Leider nicht an den Top, sondern an der Position, an der ich in etwa auf den Button
zum Übersenden der Formulardaten an PHP geklickt habe.

Oben in der URL wird mit nicht die Adresse des aktiven Tabs angezeigt, da es sich ja
quasi nur um Radio-Button handeln, die je nach check einen anderen Inhalt ausgeben.

Ich möchte nun nach der Rückleitung durch die oben angegebene Funktion auf die
ursprüngliche Seite an den Top der Site geleitet werden. Das bekomme ich leider
einfach nicht realisiert.
 
Dsimon24 schrieb:
Wie ist das, wenn der offene Tab oben in der URL nicht angezeigt wird?
Zum Vergrößern anklicken....

Hier nochmal meine PHP-only Lösung

Tabs:
PHP: 
<input type="radio" <?php if (!$_GET['tab'] || $_GET['tab'] == 1): ?>checked<?php endif ?>>
<input type="radio" <?php if ($_GET['tab'] && $_GET['tab'] == 2): ?>checked<?php endif ?>>
<input type="radio" <?php if ($_GET['tab'] && $_GET['tab'] == 3): ?>checked<?php endif ?>>

Formular:
PHP: 
<input type="hidden" name="_referer" value="tabs.php?tab=1">

Weiterleitung
PHP: 
header('Location: '.$_POST['_referer']);
 
Bis auf das erste Tab sind die Tabs in einer Schleife geschaltet.
Setze ich deine Idee so um, komme ich immer wieder auf das erste Tab.
EInmal habe ich es geschafft, dass er fast korrekt funktioniert, dann kam
aber kein Inhalt zum Tab mehr zum Vrschein und nichts anderes
funktionierte.

Ich weiß, der Code ist was verzettelt, aber ich schicke ihn mal mit...
PHP: 
<?php
    session_start();
    require_once("inc/config.inc.php");
    require_once("inc/functions.inc.php");

    //Überprüfe, dass der User eingeloggt ist
    //Der Aufruf von check_user() muss
    //in alle internen Seiten eingebaut sein
    $user = check_user();

    include("static/header.php");
?>

<div class="container main-container">
  
<!-- header.php: für body-Darstellung -->
<?php //include 'header.php'; ?>
<!-- -------------------------------- -->
  
<div class="main">
    <div class="contentWrapper">
    <meta charset="utf-8">
  
    <style type="text/css"> .tabs .completed + label { background-color: red;} </style>
          
    <?php
    include 'vja/connection.php';

    $abfrage = "SELECT * FROM events WHERE id > 1 ORDER BY rang ASC";
    $ergebnis = mysqli_query($mysqli, $abfrage);

    $abfrage1 = "SELECT * FROM events WHERE id = 1 ORDER BY rang ASC";
    $ergebnis1 = mysqli_query($mysqli, $abfrage1);      
    //#########################################################  
    // Speicherung der Datensätze in Variable
    $row1 = mysqli_fetch_object($ergebnis1);
    $row = mysqli_fetch_object($ergebnis);
    //#########################################################
    ?>    

    <section class="content content--80">
          
        <ul class="tabs">
            <ul class="tabs">            
            
                <!-- ------------------------------------------------------------------ -->      
                <li>
                    <input type="radio" name="tabs" id="<?php echo $row1->tab_no; ?>"checked/>
                    <label for="<?php echo $row1->tab_no; ?>"><?php echo $row1->time ?></label>
                      
                    <?php
                    $todo_rang = "todo".$row1->rang;
                    $userid = htmlentities($user['id']);
                    $startcodeID = htmlentities($user['startcode']);
                    $todo_abfrage = "SELECT $todo_rang FROM users WHERE id = $userid";
                    $todo_ergebnis = mysqli_query($mysqli, $todo_abfrage);
                    $todo_row1 = mysqli_fetch_object($todo_ergebnis);
                    ?>
                  
                    <?php if ($todo_row1->$todo_rang == 0) { ?>

                            <div id="<?php echo $row1->tab_content; ?>" class="tab-content">
                                <div class="productHeader">
                                    <div class="productHeader-main">
                                        <h1  class="hl-alpha"  data-ng-cloak><?php echo $row1->event_head ?></h1>
                                    </div>
                                </div>
                                <h2><?php include 'vja/home_go.php'; ?><h2>
                                <!-- <p> & <p> entfernt...-->
                            </div>

                    <?php } else if ($todo_row1->$todo_rang == 1) { ?>  
                                          
                            <div id="<?php echo $row1->tab_content; ?>" class="tab-content">
                                <div class="productHeader">
                                    <div class="productHeader-main">
                                        <h1  class="hl-alpha"  data-ng-cloak><?php echo $row1->event_head ?></h1>
                                    </div>
                                </div>
                                <h2>Ereignis abgeschlossen!</h2>
                                <!-- <p> & <p> entfernt...-->
                            </div>
                  
                    <?php }; ?>      
              
                </li>
                <!-- ------------------------------------------------------------------ -->          
            

                <?php do { ?>            

                    <?php
                    $todo_rang = "todo".$row->rang;
                    $userid = htmlentities($user['id']);
                    $startcodeID = htmlentities($user['startcode']);
                    $todo_abfrage = "SELECT $todo_rang FROM users WHERE id = $userid";
                    $todo_ergebnis = mysqli_query($mysqli, $todo_abfrage);
                    $todo_row = mysqli_fetch_object($todo_ergebnis);
                    ?>
                      
                  
                    <?php if ($todo_row->$todo_rang == 0) { // Tab Status abfragen? ?>
              
                        <li>
                            <input type="radio" name="tabs" id="<?php echo $row->tab_no; ?>"/>
                            <label for="<?php echo $row->tab_no; ?>"><?php echo $row->time ?></label>

                  
                                                  
                                <div id="<?php echo $row->tab_content; ?>" class="tab-content">
                                    <div class="productHeader">
                                        <div class="productHeader-main">
                                            <h1 class="hl-alpha"  data-ng-cloak><?php echo $row->event_head ?></h1>
                                        </div>
                                    </div>
                                    <h2><?php echo $row->event_body; ?></h2>
                                    <form action="submit.php" method="post">
                                        <input type="hidden" name="uid" value="<?php echo htmlentities($user['id']); ?>">
                                        <input type="hidden" name="rang" value="<?php echo $row->rang; ?>">
                                    </form>
                                </div>
                        </li>
                  
                    <?php } else if ($todo_row->$todo_rang == 1) { // Tab Status abfragen? ?>  
                      
                        <li>
                            <input type="radio" name="tabs" class="completed" id="<?php echo $row->tab_no; ?>" <?php if ($_GET['tab'] && $_GET['tab'] == $row->tab_no): ?>checked<?php endif ?> />
                            <label for="<?php echo $row->tab_no; ?>"><?php echo $row->time ?></label>
                                                                      
                            <div id="<?php echo $row->tab_content; ?>" class="tab-content">
                                <div class="productHeader">
                                    <div class="productHeader-main">
                                        <h1  class="hl-alpha"  data-ng-cloak><?php echo $row->event_head ?></h1>
                                    </div>
                                </div>
                                <h2>Ereignis abgeschlossen!</h2>
                                <p></p>
                            </div>

                            <?php }; ?>  
                                          
                        </li>
                  
                <?php } while ($row = mysqli_fetch_object($ergebnis)) ?>            
            </ul>                        
        </ul> <!-- Andere zugehörigkeit -->
    </div>

<?php
include("static/footer.php");
?>
/PHP]

In der Zeile:
<input type="radio" name="tabs" class="completed" id="<?php echo $row->tab_no; ?>" <?php if ($_GET['tab'] && $_GET['tab'] == $row->tab_no): ?>checked<?php endif ?> />

ziemlich weit unten, habe ich das Vorhaben versucht zu realisieren und der URL ?tab=3 bspw. mitgegeben.
 
Dsimon24 schrieb:
ch weiß, der Code ist was verzettelt, aber ich schicke ihn mal mit
Zum Vergrößern anklicken....

Der ganze Ansatz ist verzettelt, dabei ist die Problem gar nicht so wild. Da hier mit: data-ng-cloak eine wenn auch veraltete Version von Angular eingebunden ist, frage ich mich, warum du überhaupt PHP verwendest.

Aber fangen wir mal einfach an: Wie sieht deine Seite im initialen Zustand aus? Eine Tabbed Nav, von der nur das erste Tab geladen wird, oder lädst du alle gleichzeitig und hidest die nicht-aktiven?

Poste doch mal einen Link oder wenigstens einen Screenshot.
 
Also, es werden alle Tabs geladen und nur das Tab mit 'checked' angezeigt.
EIgentlich müsste ich ja nur auf die eigentliche seite 'internal.php' leiten und dann das Tab,
welches aktiv angezeigt werden soll über PHP auf 'checked' setzen, fällt mir gerade so ein.
Aber dabei habe ich nun auch Probleme, dies zu realisieren.
 

Anhänge

  • screenPHP.PNG
    screenPHP.PNG
    11,1 KB · Aufrufe: 4
Dsimon24 schrieb:
EIgentlich müsste ich ja nur auf die eigentliche seite 'internal.php' leiten und dann das Tab,
welches aktiv angezeigt werden soll über PHP auf 'checked' setzen
Zum Vergrößern anklicken....

Nö, eben genau das nicht. PHP würde die Seite neu laden, und das wäre hier nicht zielführend.

Du hast initial eine einzige URL à la: meine-domain.de/meine-seite. Man spricht in dem Kontext auch von Route. Auf dieser Seite befinden sich 9 Tabs mit unterschiedlichen Inhalten. Warum hier überhaupt eine Checkbox notwendig ist, erschließt sich mir nicht.

Wenn die Aufgabenstellung lautet, beim Klick auf einen Tab dessen Inhalt anzuzeigen und außerdem der Back Button funktionieren soll, muss die Route den aktiven Tab reflektieren. Alles andere wäre Pfusch. Du hast also zwei Möglichkeiten:

- Per PHP für die einzelnen Tabs Routen zu simulieren à la: /meineseite?tab=1. Dabei würde beim Klick auf einen Tab die Seite komplett neu geladen, was unnötig ist.

- Per JavaScript/AJAX bim Klick nur den jeweiligen Inhalt des Tabs nachzuladen dabei und etwas wie history.pushState(null, null, 'tab1'); anzustoßen. Damit bleibt die Seite erhalten, aber die URL ändert sich zu /meine/seite/tab1
 
Das hört sich gerade etwas kompliziert an, für mich.

Ich denke mal, ich würde versuchen, Möglichkeit 1 umzusetzen.
Aber wie simuliere ich die Routen zu den einzelnen Tabs am besten?
Das ist ja quasi so, wie ich es mir gedacht habe, vorzugehen...

EIgentlich müsste ich ja nur auf die eigentliche seite 'internal.php'
leiten und dann das Tab, welches aktiv angezeigt werden soll
über PHP auf 'checked' setzen
Zum Vergrößern anklicken....

Nach Auswertung des Formulars via PHP wird per header die Seite internal.php
aufgerufen, wo sich alle Tabs drin befinden und dann durch ?tab=6 z.B. das
Tab 6 auf checked gesetzt. Ich das nicht der gleiche Ansatz in etwa?

LG
 
Kommuniziere die Fragen doch mal verständlicher. Aus dem ganzen Beiträgen erschließt sich mir nicht, worum es eigentlich geht, und ob nun ein einziges Formular oder für jeden Tab eines abgeschickt wird.

Vereinfachtes Beispiel: Ein zweiseitiger Bestellprozess.

meine-bestellung/seite1
meine-bestellung/seite2

Auf der ersten Seite gibt der User Name und Adresse ein und kann anschließend auf einen 'Abbrechen' oder 'Weiter' Button klicken.

Funktionen Seite 1:
- 'Abbrechen' entspricht history.back() oder verlinkt zu einer anderen Seite
- 'Weiter' hängt davon ab, ob du es mit Ajax oder PHP machst. Bei Ajax veränderst du die URL per history.pushState() und blendest den Inhalt der ersten Seite aus und den der zweiten Seite ein. Mit PHP hast du einen Link zu /seite2 und kompletten Reload; und musst die Daten per Session zwischenspeichern, weil sie sonst nicht übernommen werden können.

Auf der zweiten Seite soll der User deine AGB per Checkbox bestätigen und kann dann entweder 'Abbrechen', 'Zurück' oder 'Bestellen' klicken.

Funktionen Seite 2:
- 'Abbrechen': redirected zu einer anderen Seite
- 'Zurück': entweder history.back() oder Link zu /seite1
- 'Bestellen': erst hier sendest du den POST Request an die Datenbank. Du überprüfst, ob die AGB Checkbox checked ist. Falls ja, schickst du die gesammelten Daten von /seite1 und /seite2 zusammen mit dem Request. Bei Ajax wären die Daten von /seite1 mangels Reload noch vorhanden. Bei PHP musst du sie aus der Session ziehen.
 
Ich versuche es nochmal ein wenig ausführlicher zu erklären.

Ich habe eine Seite internal.php. Auf dieser Seite sind sagen wir mal
10 Tabs drin. Tag 1 ist beim Start der Seite automatisch auf checked gesetzt.
Tab 2 bis 10 sind in einer Schleife, alle Tabs werden somit beim Laden der
Seite internal.php geladen, aber nur der Tab, auf den ich mich aktiv
befinde, wird mir angezeigt.

In jeden Tab gibt es ein include.Befehl, der ein Formular läd.
Also außer im ersten Tab befindet sich jeweils ein Formular.
Diese Formulare sind unabhängig voneinander.

Gehe ich auf Tab 6 bspw. und fülle das Formular aus,
versende ich es bspw. an auswertung_tab6.php.
In dieser Datei wird das Formular ausgewertet und
der Inhalt in eine Datenbank gespeichert.
Anschließend möchte ich wieder zurück auf Tab 6.

Da ich das Formular da ungefähr in der Mitte abgeschickt habe,
scrollt der nicht wieder ganz nach oben, sondern bleibt in der Mitte
der Seite dann auch stehen, nachdem ich mich wieder auf der
internal.php auf Tab6 befinde.

Ich möchte nun quasi, dass er statt in der Mitte stehen zu bleiben,
wieder an den Anfang scrollt, sodass ich den Anfang von Tab6 sehen
kann. Ein Neuladen der Seite sollte da eigentlich egal sein, sobald
ich hinterher wieder auf Tab6 komme - bspw.

Ich hoffe, man kann ein wenig nachvollziehen, was ich genau vor habe!?
 
Meine Güte, warum verlinkst du die Seite nicht einfach? So wird das nichts.

Oben zeigst du einen Screenshot, bei dem Tabs nebeneinander stehen. Während es im letzten Beitrag so klingt, als stünden Container untereinander.

Dsimon24 schrieb:
aber nur der Tab, auf den ich mich aktiv
befinde, wird mir angezeigt.
Zum Vergrößern anklicken....
Heißt was? Die anderen Tabs (Container) werden, per display: none ausgeblendet, befinden sich nicht im Viewport des Browsers, oder was meinst du?

Dsimon24 schrieb:
Gehe ich auf Tab 6 bspw. und fülle das Formular aus
Zum Vergrößern anklicken....
Wie kommst du zu Tab6? Durch scrollen des Browsers, durch einen seiteninternen Ankerlink, durch ein JS Click-event?

Dsimon24 schrieb:
Anschließend möchte ich wieder zurück auf Tab 6.
Zum Vergrößern anklicken....

Also landet der User nach versenden des Formulars auf einer neuen Seite. Warum ersparst du dir den ganzen Trödel nicht, schickst das Formular per Ajax und blendest anschließend eine Bestätigungsnachricht per Modal oder eine Flash Message ein?

Dsimon24 schrieb:
Da ich das Formular da ungefähr in der Mitte abgeschickt habe, scrollt der nicht wieder ganz nach oben
Zum Vergrößern anklicken....

Jo, ist klar. Der Back-Button bringt dich an die Stelle von der du gekommen bist. Du könntest in deiner internal.php ein ScrollTop Event per JS, einbinden, das beim Laden immer an den Seitenanfang scrolled.

So, und ein Tipp zum Schluss. Wenn du deine Seite nicht verlinkst, sondern das Problem lediglich beschreibst und die Begriffe dabei nicht im Kontext der Web-Terminologie verwendest, redet man aneinander vorbei. Das führt dich nicht zum Ziel und irgendwann antwortet dir auch keiner mehr.

Das hier versteht man unter Tabs:
http://getbootstrap.com/javascript/#tabs
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben