Mit Javascript Session-Variablen ändern

Informationen werden auf einer Seite via Accordion übersichtlich dargestellt. Auf Knopfdruck können die einzelnen Abschnitte komplett ein- oder ausgeklappt werden. Soweit, sogut. Allerdings soll nun diese Einstellung dauerhaft beibehalten werden. Der Weg zur Lösung könnte daher eine Session-Variable sein. Nur, wie soll der Wert via Javascript an php übergeben werden?

Beginnen wir bei der php-Session-Variable, nennen wie sie showTabs. Damit kann schon einmal die Schaltfläche zum Auf- und Zuklappen gesteuert werden:

<?php
 if($_SESSION["showTabs"] == "closed") {
 echo '<p><a href="#" onclick="expand();">Alles anzeigen</a></p>';
 echo '<p style="display: none;"><a href="#" onclick="closed();">Alles schlie&szlig;en</a></p>';
 } else {
 echo '<p style="display: none;"><a href="#" onclick="expand();">Alles anzeigen</a></p>';
 echo '<p><a href="#" onclick="closed();">Alles schlie&szlig;en</a></p>';
 }
 ?>

Nun das eigentliche Problem: Die Übergabe des neuen Wertes an PHP ohne Seitenreload. Was für ein Glück, dass mittels jQuery und Ajax schnelle Posts übergeben werden können. Der neue Sessionwert wird einfach an ein PHP-Skript geschickt:

$.post("session.php", { new_session:"expand"} );

Im Einzelnen werden also in den JS-Funktionen zunächst alle Inhaltsbereiche angezeigt (show) oder verborgen (hide) und die entsprechende Schaltfläche ein- bzw. ausgeblendet. Im Anschluss erfolgt die Übergabe des neuen Sessionwertes. Die Javascript-Funktionen lauten somit:

function expand() {
$('#accordion .ui-accordion-content').show();
$('.accordion-expand-closer').show();
$('.accordion-expand-opener').hide();
$.post("session.php",{ new_session:"expand"} );
}
function closed() {
$('#accordion .ui-accordion-content').hide();
$('.accordion-expand-closer').hide();
$('.accordion-expand-opener').show();
$.post("session.php",{ new_session:"closed"} );
}

Das PHP-Skript macht nun nichts anderes, als den Übergabewert in die Session zu schreiben:

<?php
session_start();
$_SESSION["showTabs"] = $_REQUEST["new_session"];
?>

Bleibt noch eine Sache: Nach Wiederaufruf der Seite wird bislang nur die Schaltfäche angepasst. Die Komplettanzeige muss also nun noch via Javascript gesteuert werden, d.h. mit PHP wird eine entsprechende Zeile ergänzt:

<?php
if($_SESSION["showTabs"] == "expand")
echo "$('#accordion .ui-accordion-content').show();";
?>

Fertig!

Schwerpunkt: ,

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.