✔ Löschen von DB Einträgen via JQuery

[dennis-sauer]

Hallo zusammen,

ich steh total auf'm Schlauch. Mir wird eine Tabelle mit Daten aus einer Datenbank ausgegeben.

		echo "<div id=\"data-table\">";
	echo "<table class=\"table\">";
	echo "<thead>";
	echo "<tr>";
	echo "<th style=\"width: 10%;\">Kategorie</th>";
	echo "<th style=\"width: 20%;\">Eintrag</th>";
	echo "<th style=\"width: 10%;\">Melder</th>";
	echo "<th style=\"width: 5%;\">Datum</th>";
	echo "<th style=\"width: 5%;\">Zeit</th>";
	echo "<th style=\"width: 45%;\">Fehlerbeschreibung</th>";
	echo "<th style=\"width: 2%;\">Status</th>";
	echo "<th style=\"width: 3%;\">L&ouml;schen</th>";	
	echo "</tr>";
	echo "</thead>";
	echo "<tbody>";
		while ($result->next()) {
			$id = $result->getCurrentValueByName("id");
			$status = $result->getCurrentValueByName("status");
			$categorie = $result->getCurrentValueByName("categorie");
			$eintrag = $result->getCurrentValueByName("eintrag");
			$name = $result->getCurrentValueByName("name");
			$datum = $result->getCurrentValueByName("datum");
			$zeit = $result->getCurrentValueByName("zeit");
			$mistake = $result->getCurrentValueByName("mistake");
	echo "<ol class=\"update\">";
	echo "<li>";
	echo "<tr>";
	echo "<td style=\"width: 10%;\">$categorie</td>";
	echo "<td style=\"width: 20%;\"><a href=\"#mistake_edit?categorie=$categorie&id=$id\">$eintrag</a></td>";
	echo "<td style=\"width: 10%;\">$name</td>";
	echo "<td style=\"width: 5%;\">$datum</td>";
	echo "<td style=\"width: 5%;\">$zeit Uhr</td>";
	echo "<td style=\"width: 45%;\">$mistake</td>";
		if($status == "Offen") {
		echo "<td style=\"width: 2%; text-align: center;\"><img src=\"images/ico_error_16.png\" border=\"0\"></td>";	
	   }
	   else {
		echo "<td style=\"width: 2%; text-align: center;\"><img src=\"images/ico_success_16.png\" border=\"0\"></td>";	 }
	echo "<td style=\"width: 3%; text-align: center;\"><a href=\"#\" id=\"$id\" class=\"delete_button\"><img src=\"images/ico_delete_16.png\" border=\"0\" /></a></td>";
	echo "</tr>";
	echo "</li>";
	echo "</ol>";
	echo "</tbody>";
	echo "</table>";
	echo "</div>";

Dazu habe ich mit Hilfe von jQuery eine Funktion, die mir per Klick auf eine Grafik diesen Datenbankeintrag löscht.

$(function() {
$(".delete_button").click(function() {
var id = $(this).attr("id");
var dataString = 'id='+ id ;
var parent = $(this).parent();
	
$.ajax({
   type: "POST",
   url: "delete/delete_mistakes.php",
   data: dataString,
   cache: false,

   success: function()
   {
    if(id % 2)
	{
    parent.fadeOut('slow', function() {$(this).remove();});
	}
	else
	{
	parent.slideUp('slow', function() {$(this).remove();});
	}
  }
   
 });

return false;
	});
});
	});
});

Das klappt auch - nur habe ich das Problem das bei der Updatefunktion nicht die gesamte Zeile sonder nur die Spalte mit dem Löschbutton gelöscht wird.

Ich gehe mal davon aus, die Funktion löscht lediglich das Element <td> in dem sich die "Löschgrafik" befindet. Da ich die Ergebnisse aber gerne in einer für den User übersichtlichen Tabelle hätte, weiß ich keine andere Lösung.

Grüße

Dennis

 

[rd4eva]

die Funktion löscht lediglich das Element <td> in dem sich die "Löschgrafik" befindet

Richtig.

Du gehst vom <a - Tag aus und holst dir mit $(this).parent(); das Vater-Element ( <td ) und sagst dann parent.slideUp(..{$(this).remove().
Folglich wird das td-Element entfernt.

Wenn du nun das tr-Element löschen willst musst du die Leiter einfach noch eine Stufe nach oben klettern:

var trElement = $(parent).parent();

 

[dennis-sauer]

Hey,

danke erstmal für deine Antwort... Jetzt klappt das Löschen des Eintrages in der DB immernoch nur es passiert gar nichts mehr auf der Seite - sprich ich klicke die Löschgrafik an und nichts passiert - im Hintergrund wird heimlich die "delete" Seite ausgeführt.

$(function() {
$(".delete_button").click(function() {
var id = $(this).attr("id");
var dataString = 'id='+ id ;
var trElement = $(parent).parent();
	
$.ajax({
   type: "POST",
   url: "delete/delete_mistakes.php",
   data: dataString,
   cache: false,

   success: function()
   {
    if(id % 2)
	{
    parent.fadeOut('slow', function() {$(this).remove();});
	}
	else
	{
	parent.slideUp('slow', function() {$(this).remove();});
	}
  }
   
 });

return false;
	});
});

Habe ich was vergessen?

 

[rd4eva]

Ja du hast dir die parent Variable geklaut .
Und .remove() zeigt immernoch aufs falsche Element.

$(function() {
$(".delete_button").click(function() {
var id = $(this).attr("id");
var dataString = 'id='+ id ;
var parent = $(this).parent();
var trElement = $(parent).parent();
    
$.ajax({
   type: "POST",
   url: "delete/delete_mistakes.php",
   data: dataString,
   cache: false,
 
   success: function()
   {
    if(id % 2)
    {
    trElement.fadeOut('slow', function() {$(this).remove();});
    }
    else
    {
    trElement.slideUp('slow', function() {$(this).remove();});
    }
  }
   
 });
 
return false;
    });
});

 

[dennis-sauer]

Aaaargh,

Ich hatte die .parent Variable erst drin, habs dann rausgenommen weils net geklappt hat, hab aber selbstverständlich den unteren Teil vergessen.

Irgendwie ist jetzt dieser schöne Fading-Effekt nicht mehr so richtig da, aber das ist nicht so schlimm - es soll ja nur funktionieren.

Danke

 

[rd4eva]

Wenn dir der Fading-Effekt so gefallen hat lässt du halt selbigen so wie er vorher war und zeigst mit remove einfach nicht mehr auf $(this):

parent.fadeOut('slow', function() {$(trElement).remove();});

 

[dennis-sauer]

Ähm ja hab ich...

Nun löscht er mit dem netten Effekt die <td> und anschließend die <tr>...

 

[rd4eva]

Nicht ganz.

Er fadet nicht das ganze tr sondern so wie vorher nur das td-Element ( aber löscht es nicht ) und löscht dann aber das ganze tr-Element.

Das ausfaden des ganzen tr-Elements funktioniert btw. im FF und Chrome wunderbar. IE und Opera zicken rum.

Mit einem kleinen workauround funktionierts aber überall:

$(trElement).children('td').fadeOut('slow', function() {$(this).remove();});

 

[dennis-sauer]

Isch finds dufte.... ;-)

Danke