Ajax + JS Effekt

Ollowain · 12. April 2008, 13:15

Hi Leute,
ich bin auf der Suche nach einem Effekt der einen Eintrag aus einer Liste "verschwinden" lässt.
Also ich habe eine Liste mit Datensätzen aus der MySQL-Datenbank und möchte, dass wenn man auf einen Button klickt dieser Eintrag aus der DB gelöscht wird und gleichzeitig aus der Liste "verschwindet"... Und das natürlich alles ohne, dass die Seite neu geladen wird..

Gibt es da ein Plugin für jQuery oä? Oder ein Tutorial!?
Habe sowas bisher nur im StudiVZ gesehen. (Pinnwandbeiträge löschen..)

Danke schonmal im Voraus

Gruß

Ollo

Torben Brodt · 12. April 2008, 15:54

Hi, "verschwinden" ist ja nicht schwer. Element.toggle()
Dann gibts noch weitere einfache Effekte: docs.jquery.com/Effects
und aufwendigere Effekte: interface.eyecon.ro/

Ollowain · 12. April 2008, 16:06

Ok, danke für den Link =) Da gibts echt genügend Effekte für jQuery.

Aber wie kann ich so einen Effekt mit dem Löschen von Datensätzen aus der DB verbinden? Das hab ich noch nicht richtig verstanden..

Gruß

Ollo

Torben Brodt · 13. April 2008, 00:04

abend,
das sind dann ajax Funktionen, siehe docs.jquery.com/Ajax/jQuery.post#urldatacallbacktype

Quellcode

function foo(ref, id) {
$.post('url.php', 'delete='+id, function(data) {
ref.toggle();
}
}

Quellcode

<div onclick="foo(this, 1)">lösch mich</div>

Ollowain · 14. April 2008, 20:06

N'Abend, danke für die Antwort, ich glaube so langsam fange ich an durchzublicken

Nur könntest du mir noch erklären was es mit dem ref.toggle auf sich hat ?

Denn ich habe nun folgenden Code:

Quellcode

<script type="text/JavaScript">
function toggle() {
$ref.slideToggle("slow");
}
function del (ref,id) {
$.post("123.php", "TEST", toggle());
}
</script>
</head>
<body>
Welche ID soll gelöscht werden?
<div><p>Eintrag der gelöscht werden soll! <input type="submit" onclick="del(this, 1)" value="X"></p></div>

Alles anzeigen

Der $.post Teil scheint zu funktionieren, nur das Element verschwindet nicht wirklich.

Schönen Abend noch.

Gruß

Ollo

Torben Brodt · 14. April 2008, 20:19

ref ist die Referenz auf dein Object (this). In deiner Variante musst du es in jede Funktion durchreichen, daher würd ichs lieber so machen, wie ichs gemacht habe

Ollowain · 14. April 2008, 22:37

Hmm ok,
wenn ich es allerdings so mache wie von dir beschrieben spuckt Firebug immer folgende Fehlermeldung aus und es passiert garnichts:

ref.toggle is not a function
[Blockierte Grafik: chrome://firebug/content/blank.gif] ref.toggle();

Gruß

Ollo

Torben Brodt · 15. April 2008, 18:04

ja, das musst du noch in ein jquery Objekt umwandeln. Hab nicht gesagt, dass meine Funktion funktioniert, aber du hast ja alles anders gemacht.

Quellcode

$(ref).toggle();

Ollowain · 16. April 2008, 11:27

Ah, ok. Jetzt funktioniert es

Nurnoch eine Frage zu diesem Thema:-P: Wie kann ich es so einrichten, dass noch ein Alert Fenster kommt in dem gefragt wird ob der Eintrag wirklich gelöscht werden soll!?

Gruß

Ollo

Torben Brodt · 16. April 2008, 18:27

das ist normales JavaScript, siehe confirm:
de.selfhtml.org/javascript/objekte/window.htm#confirm

Snowflake · 17. April 2008, 01:19

oh man ich wusste ja gar nicht, dass die ganzen frameworks ajax request funktionen haben... hätte ich mir ja mal sehr viel arbeit sparen können.

bei jquery kann man aber nicht mit den befehlen onLoading und onLoaded arbeiten wenn ich mir den syntax angucke oder sehe ich das falsch?
es gibt nur das callback, dass die ausgabe nach erfolgreichem laden macht?

Ajax + JS Effekt

Ajax + JS Effekt

Quellcode

Quellcode

Quellcode

Quellcode

Teilen

Tags