Mhh ok, du musst dir auch überlegen, dass wenn du eine ajax Request, die Seite ja nicht neu geladen wird, wenn du also eine Sachen einfügst oder löschst, dies dann ggf. auch über Javascript in der Seite dargestellt werden muss.
Also in deinem Beispiel du hast eine Tabelle, und fügst dann etwas hinzu, kommt dann eine neue Tabellenzeile hinzu, was ändert sich durch die Aktion.
Man kann natürlich auch die komplette Tabelle neu erstellen und zurücksenden und durch jQuery die alte ersetzen lassen.
An deinem Code sehe ich auch index.php?add und index.php?del, das ist keine gute Sache, da man nicht sieht, was gelöscht wird und du somit nur ein Modul schreiben könntest, wo etwas hinzugefügt oder gelöscht wird, also solltest du wenigstens xxxadd und xxxdel verwenden, besser noch xxx-add und xxx-del, wobei du wie bei forum oder user ja trotzdem mehrere Dateien verwenden kannst.
Da mit den Informationen, die ich hab kein komplettes Beispiel möglich ist, will ich dir trotzdem mal ein "kurzen" Beispiel geben.
Du brauchst dann auf jeden Fall keine Formulare innerhalb der Tabellenzeilen.
Statt
<form name="form1" method="post" action="index.php?del">
<input name="id2" type="hidden" id="id2" value="{id}">
<input type="submit" name="Submit" value="del ">
</form>
Würde man nur einen Button oder Link, je nachdem, wie du es möchtest.
Ich nehme mal ein Link, dem gibt man eine Klasse, damit die ganzen Links dann gefunden zusammen "angesprochen" werden können, die für das gleiche zustandig sind, in dem Fall das Löschen.
<a href="index.php?del" data-id="{id}" class="deleteItem">Löschen</a>
Damit haben wir die Informationen, welche Seite soll aufgerufen werden und den Parameter, in dem Fall die Id haben wir als HTML5 data Attribut an den Link gepackt, damit wir ohne großen Aufwand darauf zurückgreifen können.
Nun muss man mit jQuery den Link eine Funktion zuweisen, die dann den AJAX Aufruf macht.
Dazu unter Tabelle im Hauptdokument folgenden Code einfügen.
//Container um Namensraum sauber zu halten
(function($){
//Document Ready ( wird ausgeführt wenn Dokument vollständig im Browser verfügbar)
$(function() {
//Führe die Funktion bei einem Klick auf einen Link mit der Klasse aus
$('a.deleteItem').on('click', function() {
var self = $(this); //Referenz auf den Link
//Ajax Anfrage starten
$.ajax({
url: self.attr('href'), //Ziel vom Link auslesen
data: {'id': self.data('id')}, //Id aus dem data Attribut senden
type: 'POST', //POST Request
success: function(data) { //Funktion, die ausgeführt wird, wenn Anfrage erfolgreich ist
//In data ist die komplette Antwort der Angefragten Seite
if (data == 'success') {
//Tabellenzeile in der sich der Link befindet löschen
self.parents('tr').remove();
} else {
alert('Fehler aufgetreten');
}
}
});
});
});
})(jQuery);
In der aufgerufenen PHP Datei muss dann keine weitere Ausgabe erfolgen als für das Beispiel success, wenn es funktioniert hat. Also kein Design oder ähnliches.
defined ('main') or die ( 'no direct access' );
$id = escape($_POST['id'], 'integer');
if ($id > 0) {
// Alles machen, was nötig ist um zu löschen, wenn es erfolgreich war echo und exit; aufrufen
db_query('DELETE FROM ... ' . $id);
echo 'success';
exit;
}