Hallo Forum,
Ich bin leider auf dem Gebiet jquery/ajax vollkommener Frischling.
Ich habe eine Tabelle, in der ich zum editieren den Datensatz in einem Modal-Fenster anzeigen lasse. Dort kann ich die Werte auch ändern und beim schließen des Modals auch in der Haupttabelle so angezeigt.
Da die Daten aber aus einer DB stammen, muss ich sie dort auch wieder eintragen. Leider hat keiner meiner Versuche bisher zum erfolg geführt, daher meine Frage:
Wie muss ich das Script und das Modal Form anpassen, damit ich Daten in der Hauptdatei mit POST abrufen kann? Die erforderlichen librarys werden alle ordentlich in der header.php geladen.
Wäre super, wenn jemand einen Tipp für mich hätte...
LG Micha
Hier meine Datei:
Ich bin leider auf dem Gebiet jquery/ajax vollkommener Frischling.
Ich habe eine Tabelle, in der ich zum editieren den Datensatz in einem Modal-Fenster anzeigen lasse. Dort kann ich die Werte auch ändern und beim schließen des Modals auch in der Haupttabelle so angezeigt.
Da die Daten aber aus einer DB stammen, muss ich sie dort auch wieder eintragen. Leider hat keiner meiner Versuche bisher zum erfolg geführt, daher meine Frage:
Wie muss ich das Script und das Modal Form anpassen, damit ich Daten in der Hauptdatei mit POST abrufen kann? Die erforderlichen librarys werden alle ordentlich in der header.php geladen.
Wäre super, wenn jemand einen Tipp für mich hätte...
LG Micha
Hier meine Datei:
PHP-Code:
<!DOCTYPE html>
<?php
session_start();
$GLOBALS['SCRIPTNAME'] = basename(__FILE__);
include("header.php");
$user = check_user();
if(!isset($_SESSION['userid']) OR $user['funktion']!="VORSTAND") {
include_once("error.php");
include("footer.php");
exit;
}
ScreenOut($_POST);
?>
<script src="js/footable.min.js"></script>
<script src="js/ie10-viewport-bug-workaround.js"></script>
<link href="css/footable.bootstrap.min.css" rel="stylesheet">
<div class="container">
<h2>Mitglieder-Verwaltung</h2>
<div class="example">
<table id="editing-example" class="table" data-paging="true" data-filtering="true" data-sorting="true">
<thead>
<tr>
<th data-name="id" data-breakpoints="all" data-type="number">ID</a></th>
<th data-name="nummer" data-breakpoints="xs" data-type="number">Mitgl.Nr.</a></th>
<th data-name="name" >Name</a></th>
<th data-name="vorname" >Vorname</a></th>
<th data-name="spitzname" data-breakpoints="all">Spitzname</th>
<th data-name="strasse" data-breakpoints="all">Strasse</th>
<th data-name="plz" data-breakpoints="all">PLZ</th>
<th data-name="ort" data-breakpoints="all">Ort</th>
<th data-name="telefon" data-breakpoints="all">Telefon</th>
<th data-name="email" data-breakpoints="all" >E-Mail</th>
<th data-name="status">Status</th>
<th data-name="team">Team</th>
<th data-name="funktion" data-breakpoints="xs">Funktion</th>
<th data-name="aktiv" data-breakpoints="xs">aktiv</th>
</tr>
</thead>
<tbody>
<?php
$SQL = "SELECT * FROM mitglieder ORDER BY NUMMER ASC";
if(!$result = $db->query($SQL))
{ die('Es ist ein Fehler aufgetreten!/n[' . $db->error . ' ]'); }
else
{
while($row = $result->fetch_assoc())
{
?>
</tr>
<td><?php echo $row['ID']; ?></td>
<td><?php echo $row['NUMMER']; ?></td>
<td><?php echo $row['NAME']; ?></td>
<td><?php echo $row['VORNAME']; ?></td>
<td><?php echo $row['SPITZNAME']; ?></td>
<td><?php echo $row['STRASSE']; ?></td>
<td><?php echo $row['PLZ']; ?></td>
<td><?php echo $row['ORT']; ?></td>
<td><?php echo $row['TELEFON']; ?></td>
<td><?php echo $row['EMAIL']; ?></td>
<td><?php echo $row['STATUS']; ?></td>
<td><?php echo $row['TEAM']; ?></td>
<td><?php echo $row['FUNKTION']; ?></td>
<td><?php echo $row['GEMELDET']; ?></td>
</tr>
<?php
}
}
mysqli_free_result($result);
?>
</tbody>
</table>
<!-- Modal -->
<div class="modal fade" id="editor-modal" tabindex="-1" role="dialog" aria-labelledby="editor-title">
<style scoped>
.form-group.required .control-label:after {
content:"*";
color:red;
margin-left: 4px;
}
</style>
<div class="modal-dialog" role="document">
<form class="modal-content form-horizontal" id="editor" name="editor" role="form">
<!--<form class="modal-content form-horizontal" id="editor" method="post" action="mitgliederverwaltung.php">-->
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="editor-title">Add Row</h4>
</div>
<div class="modal-body">
<input type="number" id="id" name="id" class="hidden"/>
<div class="form-group required">
<label for="nummer" class="col-sm-4 control-label">Mitglieds-Nr.</label>
<div class="col-sm-8">
<input type="text" class="form-control" id="nummer" name="nummer" placeholder="Mitglieds-Nr." required>
</div>
</div>
<div class="form-group required">
<label for="vorname" class="col-sm-4 control-label">Vorname</label>
<div class="col-sm-8">
<input type="text" class="form-control" id="vorname" name="vorname" placeholder="Vorname" required>
</div>
</div>
<div class="form-group required">
<label for="name" class="col-sm-4 control-label">Nachname</label>
<div class="col-sm-8">
<input type="text" class="form-control" id="name" name="name" placeholder="Nachname" required>
</div>
</div>
<div class="form-group">
<label for="spitzname" class="col-sm-4 control-label">Spitzname</label>
<div class="col-sm-8">
<input type="text" class="form-control" id="spitzname" name="spitzname" placeholder="Spitzname">
</div>
</div>
<div class="form-group required">
<label for="strasse" class="col-sm-4 control-label">Strasse</label>
<div class="col-sm-8">
<input type="text" class="form-control" id="strasse" name="strasse" placeholder="Strasse" required>
</div>
</div>
<div class="form-group required">
<label for="plz" class="col-sm-4 control-label">PLZ</label>
<div class="col-sm-8">
<input type="text" class="form-control" id="plz" name="plz" placeholder="PLZ" required>
</div>
</div>
<div class="form-group required">
<label for="ort" class="col-sm-4 control-label">Ort</label>
<div class="col-sm-8">
<input type="text" class="form-control" id="ort" name="ort" placeholder="Ort" required>
</div>
</div>
<div class="form-group">
<label for="telefon" class="col-sm-4 control-label">Telefon</label>
<div class="col-sm-8">
<input type="text" class="form-control" id="telefon" name="telefon" placeholder="Telefon">
</div>
</div>
<div class="form-group">
<label for="email" class="col-sm-4 control-label">eMail</label>
<div class="col-sm-8">
<input type="text" class="form-control" id="email" name="email" placeholder="E-Mail">
</div>
</div>
<div class="form-group">
<label for="status" class="col-sm-4 control-label">Status</label>
<div class="col-sm-8">
<input type="text" class="form-control" id="status" name="status" placeholder="Liga-Status">
</div>
</div>
<div class="form-group">
<label for="dob" class="col-sm-4 control-label">Team</label>
<div class="col-sm-8">
<select class="form-control" id="team" name="team">
<option value="">Team wählen...</option>
<?php
$SQL = "SELECT TEAMNAME FROM teams ORDER BY TEAMNAME ASC";
foreach ($pdo->query($SQL) as $row)
{
echo "<option value="".$row['TEAMNAME']."">".$row['TEAMNAME']."</option>";
}
?>
</select>
</div>
</div>
<div class="form-group">
<label for="funktion" class="col-sm-4 control-label">Funktion</label>
<div class="col-sm-8">
<select class="form-control" id="funktion" name="funktion">
<option value="">Funktion wählen...</option>
<option value="1. Vorsitzender">1. Vorsitzender</option>
<option value="2. Vorsitzender">2. Vorsitzender</option>
<option value="Sportwart">Sportwart</option>
<option value="Team-Captaion">Team-Captain</option>
<option value="Co-Captain">Co-Captain</option>
</select>
</div>
</div>
<div class="form-group">
<label for="gemeldet" class="col-sm-4 control-label">aktiv?</label>
<div class="col-sm-8" style="float:left;">
<input class="form-control" type="checkbox" id="gemeldet" name="gemeldet">
</div>
</div>
</div>
<div class="modal-footer">
<button type="submit" name="submit" id="submit" class="btn btn-success btn" value="Speichern">Speichern</button>
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
</div>
</form>
</div>
</div>
</div>
</div> <!-- /container -->
<!-- Placed at the end of the document so the pages load faster -->
<script>
jQuery(function($){
var $modal = $('#editor-modal'),
$editor = $('#editor'),
$editorTitle = $('#editor-title'),
ft = FooTable.init('#editing-example', {
editing: {
enabled: true,
addRow: function(){
$modal.removeData('row');
$editor[0].reset();
$editorTitle.text('Add a new row');
$modal.modal('show');
},
editRow: function(row){
var values = row.val();
$editor.find('#nummer').val(values.nummer);
$editor.find('#vorname').val(values.vorname);
$editor.find('#name').val(values.name);
$editor.find('#spitzname').val(values.spitzname);
$editor.find('#strasse').val(values.strasse);
$editor.find('#plz').val(values.plz);
$editor.find('#ort').val(values.ort);
$editor.find('#telefon').val(values.telefon);
$editor.find('#email').val(values.email);
$editor.find('#status').val(values.status);
$editor.find('#team').val(values.team);
$editor.find('#funktion').val(values.funktion);
$editor.find('#gemeldet').val(values.gemeldet);
$modal.data('row', row);
$editorTitle.text('Datensatz #' + values.nummer + ' bearbeiten...');
$modal.modal('show');
},
deleteRow: function(row){
if (confirm('Dieses Mitglied sicher löschen?')){
row.delete();
}
}
}
}),
uid = 10;
$editor.on('submit', function(e){
if (this.checkValidity && !this.checkValidity()) return;
e.preventDefault();
var row = $modal.data('row'),
values = {
nummer: $editor.find('#nummer').val(),
vorname: $editor.find('#vorname').val(),
name: $editor.find('#name').val(),
spitzname: $editor.find('#spitzname').val(),
strasse: $editor.find('#strasse').val(),
plz: $editor.find('#plz').val(),
ort: $editor.find('#ort').val(),
telefon: $editor.find('#telefon').val(),
email: $editor.find('#email').val(),
status: $editor.find('#status').val(),
team: $editor.find('#team').val(),
funktion: $editor.find('#funktion').val(),
gemeldet: $editor.find('#gemeldet').val(),
};
if (row instanceof FooTable.Row){
row.val(values);
} else {
values.id = uid++;
ft.rows.add(values);
}
$modal.modal('hide');
});
});
</script>
<?php
include("footer.php");
?>
</div>
Kommentar