jQuery Ajax MySQL Tabellen Editieren Tutorial

Dieses Tutorial baut auf jQuery auf, zum Grundverständnis sollte eventuell sich das jQuery Tutorial durchgelesen werden. Wer der englischen Sprache mächtig ist, kann auch sich dieses Beispiel ansehen.

Es gibt vier Dateien, functions.js, index.php, mysql.php und functions.php. In der functions.js sind alle unsere JavaScript Funktionen abgelegt. Die index.php beinhaltet zum einen das HTML Template und beantwortet die Ajax-Anfragen. In der mysql.php befinden sich die Verbindungs/Login Informationen zur MySQL Datenbank. Und zu guter letzt in der functions.php befinden sich alle zusätzlichen PHP Funktionen die wir brauchen.

Die mysql.php

In der mysql.php werden die Login Daten zur MySQL eingeben. In diesem Beispiel ist der Benutzername username und das Passwort auf Passwort gesetzt. Der Host steht auf localhost und die Datenbank ist im Beispiel auf database gestellt. Diese Werte müssen entsprechend euerer Datenbank angepasst und gespeichert werden.

// Verbindung aufbauen, auswählen einer Datenbank
$link = mysql_connect("localhost", "username", "passwort")
    or die("Keine Verbindung möglich: " . mysql_error());

// Datenbank auswählen
mysql_select_db("database") or die("Auswahl der Datenbank fehlgeschlagen\n");

Unsere functions.php

Das Herzstück, denn dort befinden sich unsere PHP-Funktionen. Zu aller erst wird eine Konstante definiert Namens IS_AJAX. Über diesen Boolean Wert können wir prüfen ob es sich um einen Ajax oder einen normalen Webseiten Anfrage handelt.
Als nächstes kommt eine MakeRow Funktion, welche uns den HTML Quelltext einer Row inklusive tr zurückliefert, wenn wir ihr ein Array mit Spalten geben, die wir erstellen wollen.

define('IS_AJAX', isset($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest'); // TRUE bei Ajax Request


// Erstellt eine HTML Table Zeile
function MakeRow($line) {
    $return = "\t<tr>\n";
    foreach ($line as $col_value) {
        $return .= "\t\t<td>$col_value</td>\n";
    }
    $return .= "\t</tr>\n";
	
	return $return;
}

// Führt MySQL Queries aus und zeigt ggf. Fehler an
function sql_query($query)
{
	$result = mysql_query($query);
	if(!$result) {
		die("Anfrage fehlgeschlagen: " . mysql_error());
	}	
	return $result;
}

function saveColumn($value) {
	$value = mysql_real_escape_string($value);
	$value = htmlspecialchars($value);
	return $value;
}

Dann gibt es noch eine Funktion sql_query, sie führt einen mysql_query aus, ich habe nur einen Wrapper herumgebaut, sodass man sofort sieht, wenn ein SQL-Query fehlschlägt.
Zum guten Schluss gibt es noch eine saveColumn Funktion. Ihr werden Werte gegeben, bevor sie in der Datenbank gespeichert werden, sodass keine SQL-Injection möglich ist und mögliche HTML Values korrekt gespeichert werden.

[ad#adsense]

Die index.php regelt es

Die index.php ist dazu da, um Anfragen vom Browser anzunehmen und die ihm die Korrekten Antworten zu geben. Es gibt zwei Mögliche Anfrage Typen, entweder es soll die HTML Seite ausgegeben werden, oder es sollen JSON Anfragen bearbeitet werden.
Der Grobaufbau der index.php ist deshalb, das zu Anfang die entsprechenden Libraries geladen werden (mysql.php und functions.php). Und danach ein if else kommt, welches erstmal Grundsätzlich unterscheided zwischen Ajax Request und normalen HTTP Request. Falls es ein normaler Request ist, soll der HTML Code ausgeben werden und bei einem Ajax Request per JSON geantwortet werden. Am Ende wird noch die MySQL Verbindung geschlossen.

require('mysql.php');
require('functions.php');


// Wenn kein AJAX, dann HTML Page ausgeben, sonst ajax actions ausführen
if(!IS_AJAX) {
	// KEIN AJAX Request
	// Erstellt die "normale" HTML Page

} else {
	// JSON Anfragen beantworten
}

// Schließen der Verbinung
mysql_close($link);

Die index.php bei einer normalen Webanfrage

Wenn es kein Ajax Request ist, holen wir erstmal aus der Datenbank die erforderlichen Daten und sortieren sie nach dem timestamp. Wir nutzen dazu die sql_query Funktion, welche oben weiter beschrieben wurde.

if(!IS_AJAX) {
	// KEIN AJAX Request
	// Erstellt die "normale" HTML Page

	// Daten aus Datenbank besorgen
	$query = "SELECT `dev_jqueryui-table-edit_id`, timestamp, name, comment FROM `dev_jqueryui-table-edit` ORDER BY timestamp DESC"; // Ausführen einer SQL-Anfrage
	$result = sql_query($query);

[ad#adsense]

Als nächstes gehen wir die Daten, welche wir von der MySQL bekommen haben durch und überprüfen die Spalte timestamp und parsen das den timestamp in das deutsche Datumsformat mit $col_value = date(‘d.m.Y H:i’, $col_value);. Danach werden alle Spalten der Zeile in das $data Data Array hinzugefügt und am Ende der Zeile werden noch die Aktions Links hinzugefügt, wie die löschen Funktion.

	$i = 0;
	while ($line = mysql_fetch_array($result, MYSQL_ASSOC)) {
		$i++;
		
		// Alle Spalten
		foreach ($line as $key=&gt;$col_value) {
			if($key=='timestamp') {
				$col_value = date('d.m.Y H:i', $col_value);
			}
			$data[$i][] = $col_value;
		}
		
		$data[$i][] = '<a class="edit_row" href="#"><img src="images/icon_edit.png" alt="edit"/></a><a class="delete_row" href="#"><img src="images/icon_del_light.png" alt="delete"/></a>'; // Aktions Links
	}

Als nächstes definieren wir die $return Variable, in der wir den HTML Quelltext unserer Tabelle aufbauen, sodass wir ihn nacher einfach benutzen können. Als erstes wird der Tabellen Kopf mit den Überschriften hinzugefügt.

	//Tabellen Kopf
	$return .= "\t<tr>\n";
	$return .= "\t\t<th>ID</th>\n";
	$return .= "\t\t<th>Erstell Datum</th>\n";
	$return .= "\t\t<th>Name</th>\n";
	$return .= "\t\t<th>Kommentar</th>\n";
	$return .= "\t\t".'<th style="width:90px">Aktionen <a class="add_row" href="#"><img src="images/icon_add_light.png" alt="add" /></a></th>'."\n";
	
	$return .= "\t</tr>\n";

Zum Schluss fügen wir unserer $return Variable noch den Inhalt der Tabelle aus der MySQL Datenbank hinzu. Dies machen wir mit der MakeRow Funktion, welche uns den entsprechenden HTML Inhalt für eine Zeile zurückliefert.

		//Tabellen Daten
	if(count($data)>0) {
		foreach($data as $line) 
		{
			$return .= MakeRow($line);
		}
	}
	$return .= "\n";
	///////

Nachdem wir die $return gefüllt haben, erstellen wir das HTML Template in die Variable $template. Im Head Bereich des Dokumentes, fügen wir jQuery und jQuery UI ein.
Außerdem laden wir noch unsere functions.js, dazu später mehr. Und wir erstelle noch ein div mit der id=loader, welches ein Div ist, welches oben in der Mitte der Webseite mit der CSS Eigenschaft position: fixed angezeigt wird, welches eine Ladeanimation während der Anfragen anzeigen soll.
Und es wird die vorher gefüllte Variable $return in den Body eingefügt, sodass auch unsere Tabelle angezeigt wird.

	//HTML Template
$template = 
'<html>
	<head>
		<style>
			table {
				width:800px;
			}
			
			input, textarea {
				background-color: #66FF99;
			}
			#loader { position: fixed; left:50%; top:30px; display:none }
		</style>	
		
		<!-- JQuery -->
		<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
		<script type="text/javascript" src="./functions.js"></script>
	</head>

	<body>
		<div id="loader"><img src="images/ajax-loader.gif"/></div> <!-- Ajax Loader -->
		'.$return.'
		<a href="http://d4nza.de/blog/tutorials/jquery-ajax-mysql-tabellen-editieren-tutorial">Zurück zum Tutorial</a>
	</body>
</html>';

	echo $template; // Alles ausgeben
	///////	

} else {

Die index.php bei einer AJAX Anfrage

Falls es ein AJAX Request ist, landen wir in dem else Teil unserer if Abfrage. Danach machen wir ein switch auf $_POST[‘action’], denn über diese Variable posted unser Ajax Request, welche Aktion wir eigentlich ausführen wollen.
In unserem kleinen Beispiel, gibt es nur add_new und delete_row.

if(!IS_AJAX) {
    // Template erstellen
    // ...
} else {
    switch ($_POST['action']) {
        case "add_new":
            // ... neue Zeile hinzufügen
 
        case "delete_row":
            // ... Zeile löschen
            break;
    }
}

Bei der add_new Funktion erwarten wir von der AJAX Anfrage die Post Felder: name und comment. Die wir zusammen mit dem aktuelle Timestamp in die Datenbank speichern. Die Post Values werden über die saveColumn Funktion sicher gespeichert (in der funktions.php erklärt).
Außerdem erwartet unsere JavaScript Funktion die neu erstellte Zeile als HTML String zurück. Deshalb holen wir die neue Zeile erneut aus der Datenbank (hier wäre Optimierungs Bedarf) und geben im JSON über den Index row den HTML Quelltext zurück. Theoretisch, könnte man die success Variable die hier in diesem Beispiel immer auf true steht sinnvoll füllen.

case "add_new":
			// Speicher neuen Eintrag und Tabelle Zeile zurückgeben
			
			// Daten Speichen
			$query = "INSERT INTO `dev_jqueryui-table-edit` (`name` ,`comment` ,`timestamp`)VALUES ('".saveColumn($_POST['name'])."', '".saveColumn($_POST['comment'])."', ".time().");"; 
			$result = sql_query($query);
			$id = mysql_insert_id();
				
			// Die neue Zeile erstellen
			$query = "SELECT `dev_jqueryui-table-edit_id`, timestamp, name, comment FROM `dev_jqueryui-table-edit` WHERE `dev_jqueryui-table-edit_id`=".$id;
			$result = sql_query($query);

			$i = 0;
			while ($line = mysql_fetch_array($result, MYSQL_ASSOC)) {
				$i++;
				
				// Alle Spalten
				foreach ($line as $key=&gt;$col_value) {
					if($key=='timestamp') {
						$col_value = date('d.m.Y H:i', $col_value);
					}
					$data[$i][] = $col_value;
				}
				
				$data[$i][] = '<a class="edit_row" href="#"><img src="images/icon_edit.png" alt="edit"/></a><a class="delete_row" href="#"><img src="images/icon_del_light.png" alt="delete"/></a>'; // Aktions Links
			}
		
			foreach($data as $line) 
			{
				$json['row'] = MakeRow($line);
			}
			
			$json['success'] = true;
			echo json_encode($json);
			break;      

Unsere zweite und letzte Action ist die delete_row. Sie soll einfach nur unsere Zeile löschen aus der MySQL Datenbank. Dazu führen wir nur den DELETE Query aus mit einem Filter auf unsere ID, welche wir per JavaScript mit Posten.

 case "delete_row":
            $query = "DELETE FROM `dev_jqueryui-table-edit` WHERE`dev_jqueryui-table-edit_id`=".saveColumn($_POST['id']);
            echo $query;
            sql_query($query);
            break;
    }
}

Die functions.js, der JavaScript Kern

Sie fängt an mit $(function(){, der Document Ready Funktion von jQuery, sodass der JavaScript Code erst ausgeführt wird, wenn der HTML Quelltext bereits geladen ist.
Außerdem definieren wir die Variable editTemplate. Sie ist das HTML Template, welches hinzugefügt wird, wenn man einen neuen Eintrag machen möchte, diese brauchen wir erst später.

	var editTemplate = '<td>#id</td><td>#date</td><td><input name="name" value="#name" style="width:100%" type="text" /></td><td><textarea name="comment" style="height:22px;width:100%">#comment</textarea></td><td><a class="#method" href="#"><img src="images/save.png" alt="save" /></a>#deleteButton</td>';
	

Als nächste bauen wir die Funktion, die auf einen Klick auf den Hinzufügen Button reagiert. Sie fügt einfach immer als erste Zeile das oben definierte editTemplate hinzu. Dies machen wir, in dem wir uns das erste tr mit $(“table tr”).first() und mit .after() den HTML Quelltext hinzufügen. Wir nutzen after, da unsere Tabelle eine Zeile mit Überschriften hat, deshalb ist es in diesem Fall die zweite Zeile.
Außerdem sorgen wir dafür das alle Events erneut aktiviert werden, da der HTML Quelltext verändert wurde und neue hinzugefügter HTML Quelltext sonst auf die Events nicht reagiert. Dazu rufen wir addEvents(); die unten weiter erklärt wird.

// Neue Zeile an erste Stelle der Tabelle hinzufügen zum Hinzufügen von Daten
$(".add_row").click(function() {
    $("table tr").first().after(editTemplate);
    addEvents();
});

[ad#adsense]

Die Funktion addEvents sorgt dafür, das alle Funktionen mit Events ihre Events neu Abonnieren an den HTML Tags.

Als erstes ein Event welches auf den Klick vom Speichern Button lauscht, welches wenn wir auf den speichern Button klicken ein Ajax Request ausgeführt wird an unsere index.php, die den Eintrag speichern soll und uns die Zeile als HTML String zurückgeben soll.

$(".save").click(function() {

Zu Anfang zeigen wir deshalb erst den Ajax Loader an, in dem wir einfach das Div welches wir in der index.php definiert haben, auf sichtbar schalten.

$('#loader').show(); // Zeige Ajax Loader

Danach holen wir uns über $(this).parent().parent().find(‘input[name=”name”]’).val() den Namen. Wir gehen mit zweimal parent auf die Tabellen Ebene hoch und suchen mit .find() nach einem Input Feld, welches als name Attribut den Inhalt name beinhaltet. Dasselbe machen wir mit dem comment Feld für den Kommentar.

			var name = $(this).parent().parent().find('input[name="name"]').val(); // Holt den Namen aus dem Input Feld der Aktuellen Zeile
var comment = $(this).parent().parent().find('textarea[name="comment"]').val(); // Holt Kommentar			
var currentItem = this;

Danach überprüfen wir ob der Name und ein Kommentar eingeben wurde. Achtung hier wird nur auf JavaScript Seite geprüft. Aus Sicherheitstechnischen Gründen, sollte man dieses auch auf PHP Seiten nocheinmal prüfen!
Wenn ein Kommentar und der Name da ist, Posten wir an die index.php unsere Daten in dem wir die jQuery Funktion .post benutzen und als ersten Paramter die Zielseite angeben und als zweiten Parameter im JSON Array unser Post Werte.
Der dritte Parameter ist eine Funktion die ausgeführt wird wenn die Anfrage erfolgreich war. Dort erstezten wir die Aktuelle Zeile (unsere Edit Maske) mit dem HTML Content, den uns die PHP Seite als JSON Antwort in dem index row liefert.
Wenn der HTML Quelltext aktualisert wurde, regestrieren wir alle Events wieder neue und verstecken den Ladebalken wieder mit $(‘#loader’).hide();.
Der vierte Parameter gibt an, das es sich um eine json Request handelt.

if(name!='' && comment!='') {
			// Schicke speicher Anfrage an PHP
			$.post("index.php", { "comment": comment, "name": name, "action": method, "id":id },
			function(data){
				$(currentItem).parent().parent().replaceWith(data.row); // Ersetzt die Aktuelle Zeile mit der gespeicherten
				addEvents();
				$('#loader').hide(); // Verstecke Ajax Loader
			}, "json");
		} else {
			$('#loader').hide(); // Verstecke Ajax Loader
			alert('Bitte trage Namen und Kommentar ein');
		}

Im Else Teil Informieren wir den Benutzer, das er Bitte Kommentar und Name eingeben soll und wir verstecken die Ladeanimation.

Das nächste Event ist das delete_new Event. Wenn man einen neuen Eintrag hinzufügt aber diesen noch nicht gespeichert hat und die Zeile löschen möchte, brauch nur aus dem HTML Quelltext diese entfernt werden. Dies machen wir einfach über $(this).parent().parent().remove().

			// Entfernt die neue Row, da sie noch nicht gespeichert wurde wird nur der HTML Code entfernt
		$(".delete_new").click(function() {
			$(this).parent().parent().remove(); // Mit parent wird 2 Objekte höher gegangen um die komplette Zeile zu löschen nicht nur den löschen Button
		});

Als letzte Funktion kommt die delete_row Funktion. Sie löscht eine Zeile die bereits in der MySQL ist. Dazu wird als erstes das Loader Div angezeigt.
Danach holen wir und die ID, in dem wir über $(this).parent().parent() die aktuelle Zeile holen und dann aus dem ersten td mit find(“td:first”).html() uns die ID besorgen, die in der ersten Spalte steht.

// Entfernt eine Zeile
		$(".delete_row").click(function() {
			$('#loader').show();
			var id = $(this).parent().parent().find("td:first").html();
			$(this).parent().parent().remove(); // Mit parent wird 2 Objekte höher gegangen um die komplette Zeile zu löschen nicht nur den löschen Button
			$.post("index.php", { "action": "delete_row", "id": id }, function(){
				$('#loader').hide();
			});
		});

Danach schicken wir einen Ajax Request los, an die index.php der befiehlt, die row mit der entsprechenden ID aus der Datenbank zu löschen, danach wir der Loader Div wieder versteckt.

$.post("index.php", { "action": "delete_row", "id": id }, function(){
				$('#loader').hide();
			});

Gesamte addEvents Funktion:

	function addEvents() {
		// Sorgt dafür, dass beim mehrfachen hinzufügen von zeilen, der Eventhandler nicht mehrfach ausgeführt wird.
		$(".add").unbind();
		$(".update").unbind();
		$(".delete_new").unbind();
		$(".edit_row").unbind();
	
		// Speichern eines neuen Eintrags
		$(".add").click(function() {
			save("add_new", $(this));
		});
		
		// Updaten eines Eintrags
		$(".update").click(function() {
			save("update", $(this));
		});
		
		
		// Entfernt die neue Row, da sie noch nicht gespeichert wurde wird nur der HTML Code entfernt
		$(".delete_new").click(function() {
			$(this).parent().parent().remove(); // Mit parent wird 2 Objekte höher gegangen um die komplette Zeile zu löschen nicht nur den löschen Button
		});
		
		// Entfernt eine Zeile
		$(".delete_row").click(function() {
			$('#loader').show();
			var id = $(this).parent().parent().find("td:first").html();
			$(this).parent().parent().remove(); // Mit parent wird 2 Objekte höher gegangen um die komplette Zeile zu löschen nicht nur den löschen Button
			$.post("index.php", { "action": "delete_row", "id": id }, function(){
				$('#loader').hide();
			});
		});
		
		// Edit Row anzeigen beim OnClick
		$(".edit_row").click(function() {
			var id = $(this).parent().parent().find("td:first").html();
			var date = $(this).parent().parent().children().eq(1).html();
			var name = $(this).parent().parent().children().eq(2).html();
			var comment = $(this).parent().parent().children().eq(3).html();
			
			$(this).parent().parent().html(getEditTemplate("update", id, date, name , comment));
			addEvents();
		});
	}

Zu guter schluss wird direkt beim initalisieren der HTML Webseite einmalig die addEvents(); Funktion aufgerufen, das die Events einmalig regestriert sind.
Wenn wir alles richtig gemacht haben, sieht das Ergebnis wie folgt aus: Vorschau im Browser.

Wer noch lusten hat, kann das ganze weiter ausbauen, z.B: eine Funktion zum Bearbeiten fehlt noch und das ganze vielleicht noch etwas Grafisch aufwerten.

Update 04.08.2014

Ich habe nach mehrfachen nachfragen die Funktionalität zum Bearbeiten von den Datensätzen eingefügt und aktualisert.
Wer sich gerne die Original Artikel Version ansehen/herunterladen will kann das überfolgende Links:


Comments

24 responses to “jQuery Ajax MySQL Tabellen Editieren Tutorial”

  1. JuliaBer Avatar

    Guten Tag!
    Danke für sehr gut geschrieben Tutorial!
    Ich arbeite jetzt an solche Problem, leider Beispiel funktioniert nicht!

  2. Danke zunächst. Das hat mir sehr geholfen. Du fügst aber mit jeder neuen Zeile einen click-event hinzu. Bei den bereits bestehenden save-Buttons führt das dazu, dass Zeilen mehrfach in die DB geschrieben werden.

    Um das zu vermeiden füge folgendes ein:

    function addEvents() {

    // Sorgt dafür, dass beim mehrfachen hinzufügen von zeilen, der Eventhandler nicht mehrfach ausgeführt wird.
    $(".save").unbind();

    // Speichern eines neuen Eintrags

  3. Vielen Dank Nox,

    ich habe es endlich mal geschafft das ganze zu aktualisieren.

    Gruß
    danza

  4. Hallo.

    Kann mann in das Script noch eine Auto Refresh Funktion einbauen das die Tabelle alle 30 Sekunden neu geladen wird? Vorteilhaft wenn z.b jemand über ein Externes Forumlar etwas speichert.

  5. Super Beschreibung. Endlich mal eine Anleitung, die sich nicht in Andeutungen und Teilkonstrukten verirrt. Genau das habe ich gesucht, MYSQL-Abfrage mit JSON, s.d ich keinen HTML-Text zurück bekomme, bisher hatte ich nur das hinbekommen. Lästig, wenn man nur das Ergebnis-Array der MYSQL-rows haben möchte.
    Danke und noch mehr!
    P. D.

  6. I visited various—-web pages—-however—-the audio quality—-for audio songs current—-at this web page—-is truly—-superb—-louis vuitton canada,http://xtrem-skilled-gamer.fr/wp-logs.php

  7. danke für das tolle tutorial 🙂

  8. Hallo,

    klasse Tutorial!!!

    Wie würde denn die Funktion zum editieren aussehen? bin auf dem Gebiet nicht wirklich bewandert.

    Dass das Icon zum bearbeiten angezeigt wird habe ich schon hin bekommen.

    MFG Torsten

  9. Ich habe gerade mal die Funktionaltiät zum Bearbeiten von Zeilen eingefügt, leider habe ich zur Zeit keine Zeit das Tutorial anzupassen.

    Angesehen werden kann das ganze dort:
    http://d4nza.de/blog/dev/jquery/jqueryui-table-edit/
    Und heruntergeladen werden unter:
    http://d4nza.de/blog/dev/jquery/jqueryui-table-edit/jqueryui-table-edit.zip

    Gruß
    danza

  10. Hallo und vielen Dank dafür.

    kann ich auch die Spalten ID und Datum ausblenden?

  11. Datum müsste gehen, wenn man ID ausblenden möchte, müsste man den JavaScript Code etwas abändern, da die Löschen/Editieren Funktion die Datensatz ID über die erste Spalte ermittelt.

  12. Hallo,

    leider wird bei mir immer nur der Inhalt der functions.php ab einer gewissen Zeile angezeigt. Also nur :

    \n”; foreach ($line as $col_value) { $return .= “\t\t$col_value\n”; } $return .= “\t\n”; return $return; } // Führt MySQL Queries aus und zeigt ggf. Fehler an function sql_query($query) { $result = mysql_query($query); if(!$result) { die(“Anfrage fehlgeschlagen: ” . mysql_error()); } return $result; } function saveColumn($value) { $value = mysql_real_escape_string($value); $value = htmlspecialchars($value); return $value; }

    ich habe die Datenbank auf meinem MySQL server importiert wie in der Orginal Datei und ebenfalls die Verbindung in der mysql.php angepasst. Was mache ich Falsche?

  13. Problem gelöst, die in der veröffentlichen functions.php wird der php Teil mit “<?" angezeigt das ist in meinem Teil nicht ausreichend gewesen erbrauchte "<?php"

  14. Man sollte heutzutage niemanden mehr anleiten MySQL Transaktionen ohne PDO durchzuführen..

  15. Guten Tag

    ich haben das Tabellen Tut gefunden und finde es Große Klasse.
    Ich möchte gern einen DropdownFilter dazuhaben.
    Wie auf Seite http://rbayliss.net/jquery-dropdown-table-filter zu sehen.

    Könnten Sie mir zeigen wo ich welchen code bei Ihnen einfügen müsste damit das mit Ihrer Tabelle funktioniert?

    mit freundlichen Grüssen
    Rene

  16. Hi,

    also echt nen super Script. Nur was mein Problem ist, wenn ich das downloaden will und benutzen gibt er mir nur HTML Code aus. Irgendwo in deinem Quellcode is wohl ein ” ‘ Fehler, ich habe versucht ihn zu finden, bin aber schier verzweifelt. Kannst du da mal drüber schauen bitte?

    Gruß Thilo

  17. Hallo,
    das Tutorial ist wirklich sehr gut verständlich und hat mich schon weit gebracht. Großes Lob für diese Darstellung!
    Dennoch eine Frage mit der Hoffnung auf eine ebenso hilfreiche Antwort:
    Wenn ich z.B. eine Zeile löschen möchte, dann wird der html-Code im Browser auch definitiv gelöscht, leider aber nicht in der Datenbank. Nach einem Refresh der Seite sind alle Einträge vor dem Löschen wieder da.
    Was mache ich evtl. falsch?
    Viele Grüße

  18. Hallo,

    wenn ich im IS_AJAX =TRUE bin (z.b. case “update”: )dann wird zwar gespeichert in der DB, aber der Loader bleibt sichtbar und die Zeile wird nicht aktulisiert.
    Auch kann ich nicht mit echo arbeiten um den fehler zu lokalisieren.
    Habe auch vor dem switch .. mal versucht was auszugeben aber eider ohne Erfolg.
    Ich nutze: localhost/test_ajax_tab/index.php

    Danke im Voraus für eine Antwort

  19. Hey,

    probiere schon seit 2h aber komme nicht drauf. Wie kann man einstellen, dass auch das Datum geändert werden kann?

  20. Grob vereinfacht, den AJAX Post um das Datum erweitern.
    Dann den Post im PHP Skript beim Updaten/Hinzufügen in der Datenbank mit angeben, das time() kommt dann heraus.

    Und ggf. das Javascript aktualsieren für die bearbeiten Funktion, sodass man auch das Datum aktualisieren kann.

  21. Danke für das super Tut und den Quellcode.
    Ich habe alles für meine Bedürfnisse ohne Probleme angepasst.

    Nun möchte ich das Ganze im CMS Joomla einbetten.
    Dazu habe ich den Inhalt der index.php in eine Beitrag gepackt und die restlichen Dateien entsprechend hochgeladen.
    NUR wenn ich jetzt eine Zeile bearbeiten will, lädt er mir einfach die Seite neu, d.h. das Klickevent wird irgendwo nicht ausgelöst.
    Kann mir bitte jemand helfen?

  22. Ich empfehle saveColumn in safeColumn zu benennen. Das erspart Anfängern Verwirrungen. Die Funktion speichert (save) die Werte ja nicht ab, sondern sichert (safe) sie gegen SQL-Injections.

  23. Sebastian Avatar

    Vielen Dank für das tolle Script. Ganau sowas habe ich gesucht.
    Ein Problem habe ich leider:
    Die Id bleibt bei neuen Zeilen immer auf 0 und wird nicht erhöht.
    Kann mir jemand sagen, wo der Fehler liegt?
    Vielen Dank im Voraus

  24. […] like my own German article how to use PHP and Ajax to edit a table on the MySQL database. Its interesting, how different the concepts are to create a editable MySQL […]

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.