Hallo,
ich habe ein div "eingabe_container" und ein div "ausgabe_container":
<div id="eingabe_container">
<?php
include 'eaneingabe.php';
?>
</div>
<div id="ausgabe_container">
<?php
if(isset($_SESSION['filme'])) {
include 'liste.php';
}
else {
include 'vorgang.php';
}
?>
</div>
Alles anzeigen
Im ersten div wird eaneingabe.php geladen. Es enthält ein Texteingabefeld und einen Button "Los":
<div id="eingabe">
<input type="text" id="textfeld" class="eaneingabeelement" value="" placeholder="EAN eingeben..." size="60">
<button id="losbutton" class="eaneingabeelement"" value="Los">Los</button>
<button id="loeschenbutton" class="eaneingabeelement" value="Löschen">Löschen</button>
</div>
Bei Klick auf den Button "Los" wird in das erste div film.php und in das zweite div liste.php geladen:
$(document).ready(function() {
$('#losbutton').click(function() {
$('#eingabe_container').load('film.php', {
buttonGedrueckt: true,
textfeldwert: $('#textfeld').val()
});
$('#ausgabe_container').load('liste.php', {});
});
});
film.php enthält ein div "film" und einen Button "Hinzufügen":
<div id="film">
<?php
include 'filmerstellen.php'
?>
</div>
<div id="filmbuttons">
<p class="textfilmelement"><button id="hinzufuegenbutton" class="button" value="Hinzufügen">Zur Liste hinzufügen</button></p>
<p class="textfilmelement"><button id="zurueckzureaneingabebutton" class="button" value="Zurück">Zurück</button> </p>
</div>
Im div "film" wird filmerstellen.php geladen. Diese verarbeitet die in das Textfeld von eaneingabe.php eingegebenen Informationen, speichert Informationen in Session Variablen
$_SESSION['ean'] = $row['ean'];
$_SESSION['titel'] = $row['titel'];
$_SESSION['disctyp'] = $row['disctyp'];
$_SESSION['besonderheit'] = $row['besonderheit'];
und gibt diese Informationen dann aus (die Ausgabe geschieht in filmaktualisieren.php):
liste.php enthält ein div "liste" und einen Button "Löschen":
<div id="liste">
<?php
include 'listeaktualisieren.php';
?>
</div>
<button id="listeloeschenbutton" class="button" value="Liste löschen">Liste löschen</button>
Im div "liste" wird listeaktualisieren.php geladen. Diese listet die Einträge der Session Variable "filme" auf und gibt zu jedem Eintrag einen Button "Entfernen" aus:
echo '
<div class="filmelement">
<div class ="datenfilmelement">
<p class="textfilmelement">'.$_SESSION["filme"][$i][1].' ('.$_SESSION["filme"][$i][0].')</p>
<p class="textfilmelement">'.$_SESSION["filme"][$i][2];
if($_SESSION['filme'][$i][3] != '') {
echo ', '.$_SESSION['filme'][$i][3];
}
echo ' </p>
</div>
<div class ="buttonfilmelement">
<p class="textfilmelement"><button id="entfernenbutton" type="button" class="entfernenbutton button" value="'.$i.'">Entfernen</button> </p>
</div>
</div>
';
Alles anzeigen
Durch den Button "Hinzufügen" in film.php kann ein neuer Eintrag der Liste hinzugefügt werden:
Klick-Event, das durch den Button ausgelöst wird:
$(document).ready(function() {
$('#hinzufuegenbutton').click(function() {
$('#liste').load('listeneueneintraghinzufuegen.php', {
buttonGedrueckt: true
});
});
});
listeneueneintraghinzufuegen.php:
<?php
session_start();
if (isset($_POST['buttonGedrueckt'])) {
if (isset($_SESSION['ean'])) {
$_SESSION['filme'][] = array($_SESSION['ean'], $_SESSION['titel'], $_SESSION['disctyp'], $_SESSION['besonderheit']);
}
include 'listeaktualisieren.php';
}
?>
Durch den Button "Löschen" in liste.php können alle Einträge der Liste gelöscht werden:
Klick-Event, das durch den Button ausgelöst wird:
$(document).ready(function() {
$('#listeloeschenbutton').click(function() {
var loeschenBestaetigt = window.confirm('Möchten Sie die komplette Liste wirklich löschen?');
if (loeschenBestaetigt == true) {
$('#liste').load('listeloeschen.php', {
buttonGedrueckt: true
});
}
});
});
listeloeschen.php:
<?php
session_start();
if (isset($_POST['buttonGedrueckt'])) {
$_SESSION['filme'] = array();
include 'listeaktualisieren.php';
}
?>
Durch den Button "Entfernen" in listeaktualisieren.php können Listeneinträge einzeln gelöscht werden:
Klick-Event, das durch den Button ausgelöst wird:
$(document).ready(function() {
$('#liste').on('click', '.entfernenbutton', function() {
$('#liste').load('elementauslisteentfernen.php', {
nummerElement: $(this).val()
});
});
});
elementauslisteentfernen.php:
<?php
session_start();
if (isset($_POST['nummerElement'])) {
array_splice($_SESSION['filme'], $_POST['nummerElement'], 1);
include 'listeaktualisieren.php';
}
?>
Soweit zum Aufbau und dazu, was die Buttons tun sollten.
Tatsächlich passiert Folgendes bei Klick auf die Buttons:
- Bei Klick auf den Button zum Hinzufügen eines Eintrags werden mehrere gleiche Einträge hinzugefügt. Zusätzlich wächst die Anzahl der bei jedem Klick hinzugefügten Einträge mit der Anzahl der Klicks auf den Button.
- Bei Klick auf den Button zum Löschen aller Einträge wird das Bestätigungsfenster (das vor dem Löschen aufgerufen wird) mehrmals aufgerufen, bevor die Einträge gelöscht werden. Auch hier wächst die Anzahl (hier: Aufrufe des Bestätigungsfensters) bei jedem Klick mit der Anzahl der Klicks auf den Button.
- Bei Klick auf einen der Buttons zum Entfernen des einzelnen Listeneintrags werden der Listeneintrag und alle auf diesen folgenden Listeneinträge gelöscht.
Wie erreiche ich das gewollte Verhalten?