Hallo Forum,
ich nutze für meine Seite ein jquery-plugin (footable) um Tabellendaten responsive darzustellen.
Das klappt auch alles wunderbar, sortieren, suchen, Seiten-Aufteilung... nun versuche ich, meine Daten editierbar zu machen. In dem Beispiel klappt alles einwandfrei, nur wenn ich den Code bei mir in der Seite ausprobiere, lässt sich über den entsprechenden Button kein Formular öffnen. Ich hab schon alles hin und her kopiert, komm aber nicht auf den Fehler. Ich bin in jquery nicht so bewandert. Vielleicht kann mir ja hier jemand einen Tipp geben, wo das Problem liegt?
Folgenden Code habe ich:
Funktioniert alles einwandfrei, auch der Button Edit rows funktioniert. Es werden dann hinter jedem datensatz die Buttons für edit und delete angezeigt. Klicke ich da jetzt drauf, passiert gar nichts. Ich weiß auch nicht, ob man jquery irgendwie debuggen kann.
Bin für jeden Tipp dankbar!
LG Micha
ich nutze für meine Seite ein jquery-plugin (footable) um Tabellendaten responsive darzustellen.
Das klappt auch alles wunderbar, sortieren, suchen, Seiten-Aufteilung... nun versuche ich, meine Daten editierbar zu machen. In dem Beispiel klappt alles einwandfrei, nur wenn ich den Code bei mir in der Seite ausprobiere, lässt sich über den entsprechenden Button kein Formular öffnen. Ich hab schon alles hin und her kopiert, komm aber nicht auf den Fehler. Ich bin in jquery nicht so bewandert. Vielleicht kann mir ja hier jemand einen Tipp geben, wo das Problem liegt?
Folgenden Code habe ich:
PHP-Code:
<?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;
}
?>
<script>
jQuery(function($){
$('.table').footable();
});
</script>
<link rel="stylesheet" href="css/footable.bootstrap.css">
<link rel="stylesheet" href="css/footable.bootstrap.min.css">
<script src="js/footable.js"></script>
<script src="js/footable.min.js"></script>
<!-- spacer (eins) bereich -->
<div class="spacer eins">
<?php if ($SCRIPT=="mitgliedervung") { echo '<span style="float:left;"><a title="Mitglied hinzufügen..." href="mitglied_add.php"><i class="fas fa-user-plus"></i></a> </span>'; } ?>
<a href="index.html"><i class="fab fa-facebook"></i></a>
<a href="index.html"><i class="fab fa-twitter"></i></a>
<a href="index.html"><i class="fab fa-google-plus"></i></a>
<a href="index.html"><i class="fab fa-instagram"></i></a>
<a href="index.html"><i class="fab fa-snapchat"></i></a>
</div>
<!-- Inhaltsbereich -->
<div class="inhalt" id="pagestart">
<div class="inhaltbox-a">
<h2>Mitgliederverwaltung</h2>
<div class="modal fade" id="editor-modal" tabindex="-1" role="dialog" aria-labelledby="editor-title">
<style scoped>
/* provides a red astrix to denote required fields - this should be included in common stylesheet */
.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">
<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="firstName" class="col-sm-3 control-label">First Name</label>
<div class="col-sm-9">
<input type="text" class="form-control" id="firstName" name="firstName" placeholder="First Name" required>
</div>
</div>
<div class="form-group required">
<label for="lastName" class="col-sm-3 control-label">Last Name</label>
<div class="col-sm-9">
<input type="text" class="form-control" id="lastName" name="lastName" placeholder="Last Name" required>
</div>
</div>
<div class="form-group">
<label for="jobTitle" class="col-sm-3 control-label">Job Title</label>
<div class="col-sm-9">
<input type="text" class="form-control" id="jobTitle" name="jobTitle" placeholder="Job Title">
</div>
</div>
<div class="form-group required">
<label for="startedOn" class="col-sm-3 control-label">Started On</label>
<div class="col-sm-9">
<input type="date" class="form-control" id="startedOn" name="startedOn" placeholder="Started On" required>
</div>
</div>
<div class="form-group">
<label for="dob" class="col-sm-3 control-label">Date of Birth</label>
<div class="col-sm-9">
<input type="date" class="form-control" id="dob" name="dob" placeholder="Date of Birth">
</div>
</div>
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-primary">Save changes</button>
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
</div>
</form>
</div>
</div>
<script>
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('#id').val(values.id);
$editor.find('#firstName').val(values.firstName);
$editor.find('#lastName').val(values.lastName);
$editor.find('#jobTitle').val(values.jobTitle);
$editor.find('#startedOn').val(values.startedOn.format('YYYY-MM-DD'));
$editor.find('#dob').val(values.dob.format('YYYY-MM-DD'));
$modal.data('row', row);
$editorTitle.text('Edit row #' + values.id);
$modal.modal('show');
},
deleteRow: function(row){
if (confirm('Are you sure you want to delete the row?')){
row.delete();
}
}
}
}),
uid = 10;
$editor.on('submit', function(e){
if (this.checkValidity && !this.checkValidity()) return;
e.preventDefault();
var row = $modal.data('row'),
values = {
id: $editor.find('#id').val(),
firstName: $editor.find('#firstName').val(),
lastName: $editor.find('#lastName').val(),
jobTitle: $editor.find('#jobTitle').val(),
startedOn: moment($editor.find('#startedOn').val(), 'YYYY-MM-DD'),
dob: moment($editor.find('#dob').val(), 'YYYY-MM-DD')
};
if (row instanceof FooTable.Row){
row.val(values);
} else {
values.id = uid++;
ft.rows.add(values);
}
$modal.modal('hide');
});
</script>
<div id="paging-ui-container"></div>
<table id="editing-example" data-editing="true" class="table" data-paging="true" data-filtering="true" data-sorting="true">
<thead>
<tr>
<th data-name="id" data-breakpoints="xs" data-type="number">ID</th>
<th data-name="firstName">First Name</th>
<th data-name="lastName">Last Name</th>
<th data-name="jobTitle" data-breakpoints="xs">Job Title</th>
<th data-name="startedOn" data-breakpoints="xs sm" data-type="date" data-format-string="MMMM Do YYYY">Started On</th>
<th data-name="dob" data-breakpoints="xs sm md" data-type="date" data-format-string="MMMM Do YYYY">Date of Birth</th>
</tr>
</thead>
<tbody>
<tr data-expanded="true">
<td>1</td>
<td>Dennise</td>
<td>Fuhrman</td>
<td>High School History Teacher</td>
<td>November 8th 2011</td>
<td>July 25th 1960</td>
</tr>
<tr>
<td>2</td>
<td>Elodia</td>
<td>Weisz</td>
<td>Wallpaperer Helper</td>
<td>October 15th 2010</td>
<td>March 30th 1982</td>
</tr>
<tr>
<td>3</td>
<td>Raeann</td>
<td>Haner</td>
<td>Internal Medicine Nurse Practitioner</td>
<td>November 28th 2013</td>
<td>February 26th 1966</td>
</tr>
<tr>
<td>4</td>
<td>Junie</td>
<td>Landa</td>
<td>Offbearer</td>
<td>October 31st 2010</td>
<td>March 29th 1966</td>
</tr>
<tr>
<td>5</td>
<td>Solomon</td>
<td>Bittinger</td>
<td>Roller Skater</td>
<td>December 29th 2011</td>
<td>September 22nd 1964</td>
</tr>
<tr>
<td>6</td>
<td>Bar</td>
<td>Lewis</td>
<td>Clown</td>
<td>November 12th 2012</td>
<td>August 4th 1991</td>
</tr>
<tr>
<td>7</td>
<td>Usha</td>
<td>Leak</td>
<td>Ships Electronic Warfare Officer</td>
<td>August 14th 2012</td>
<td>November 20th 1979</td>
</tr>
<tr>
<td>8</td>
<td>Lorriane</td>
<td>Cooke</td>
<td>Technical Services Librarian</td>
<td>September 21st 2010</td>
<td>April 7th 1969</td>
</tr>
<tr>
<td>9</td>
<td>Nelly</td>
<td>Lusher</td>
<td>Broadcast Maintenance Engineer</td>
<td>October 21st 2013</td>
<td>February 16th 1983</td>
</tr>
</tbody>
</table>
</div>
</div>
<?php
include("footer.php");
?>
</div>
Bin für jeden Tipp dankbar!
LG Micha
Kommentar