jQuery - per Link PHP Datei ausführen und DIV refreshen

morgenstern

Erfahrenes Mitglied
Hallo!

Ich habe einen Warenkorb in einem div-Element:
PHP:
<div id="warenkorb"><? include("warenkorb.php"); ?></div>

Die warenkorb.php liest die Produkte, die sich im Warenkorb befinden aus einer mySQL Datenbank aus. Soweit so gut. Nun möchte ich per AJAX ein Produkt aus dem Warenkorb löschen und danach den DIV-Layer refreshen.

Meine Theorie sieht so aus:

Jedes Produkt hat einen Löschlink: (ID steht für eine Zahl, die dynamisch eingefügt wird).
Code:
<a href="#" id="delete_ID">löschen</a>
Mit diesem Link wird AJAX per jQuery aktiv, welcher zuerst die delete.php mit dem Parameter ID="ID aus der DB" aufruft (-> execute) und dann bei Erfolg den DIV-Layer refresht:
Code:
$(document).ready(function(){

$.ajax({
type: "POST",
url: "delete.php",
data: "id=ID",
success: REFRESH?

});

});

Ich weiss leider nicht, wie ich die ID übergeben kann und wie ich danach den DIV-Layer refreshe (per set-interval kann ich es ja nicht machen, da ich den Refreh nur haben möchte, wenn ein Produkt gelöscht wird.).

Ich hoffe ihr könnt mir helfen!

Vielen Dank.
 
Hi,

pack den AJAX-Aufruf am besten in eine eigene Funktion. Dieser übergibst du jeweils die erforlderliche ID.

Dem success-Attribut übergibst du eine anonyme Funktion, in der du das Aktualisieren des gewünschten Elements realisierst.

Beispiel:
Code:
<html>
<head>
<title>www.tutorials.de</title>
<meta name="author" content="Quaese">
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<script src="../JS-Scripts/jquery/jquery-1.1.4.js" type="text/javascript"></script>
<script type="text/javascript">
  <!--
function delData(intID){
 $.ajax({
   type: "POST",
   url: "delete.php",
   data: "id="+intID,
   success: function(strResponse){
     document.getElementById("delID").innerHTML = unescape(strResponse);
   }
 });
}
 //-->
</script>
</head>
<body>
<div id="delID">
  <a href="#" onclick="delData(this.id); return false;" id="0">löschen (Eins)</a><br>
  <a href="#" onclick="delData(this.id); return false;" id="1">löschen (Zwei)</a><br>
  <a href="#" onclick="delData(this.id); return false;" id="2">löschen (Drei)</a><br>
  <a href="#" onclick="delData(this.id); return false;" id="3">löschen (Vier)</a>
</div>
</body>
</html>
delete.php:
Das Löschen wird nur simuliert und funktioniert nur für das jeweils gewählte Element. Vorher "gelöschte" Elemente werden wieder angezeigt.
Code:
<?php
$strRet = "";
$arrDB = array("Eins", "Zwei", "Drei", "Vier");

// Löschen simulieren
$arrDB[$_POST['id']] = -1;

for($i=0; $i<count($arrDB); $i++){
  if($arrDB[$i] != -1)
    $strRet .= "<a href=\"#\" onclick=\"delData(this.id); return false;\" id=\"".$i."\">löschen (".$arrDB[$i].")</a><br>\n";
}

echo(rawurlencode($strRet));
Vielleicht hilft dir das weiter.

Ciao
Quaese
 
Hallo!

Vielen Dank für die Hilfe!

Der Aufruf der PHP Datei ist kein Problem - das Produkt wird gelöscht.

Nun folgt jedoch mein Problem:

Ich habe einen Warenkorb mit der aktuellen Zahl der Produkte - beim Ausführen wird nur das Produkt gelöscht, aber dieser bleibt immer noch auf (1). Erst nach einem refresh ist dieser auf 0.

"unescape" löscht ja nur den letzten Eintrag.

Kann ich irgendwie den ganzen Layer (bei dir heisst er delID) zu refreshen bzw. neu zu laden?
 
Hi,

im PHP-Skript löschst du zunächst das Produkt aus dem Warenkorb. Anschliessend fragst du den Warenkorb aus der Datenbank erneut ab und generierst daraus das neue HTML-Konstrukt, welches an das aufrufende Dokument zurück geschickt wird. Dieses neue Konstrukt entspricht in seiner Struktur und seinem Inhalt dem bisherigen HTML-Warenkorb, nur eben ohne das gelöschte Produkt.

Auf der Clientseite kannst du dieses Konstrukt in der anonymen Funktion über die Eigenschaft innerHTML nun in den gewünschten Container (bei mir delID bei dir wohl warenkorb) einbinden (strResponse enthält den neuen Inhalt als String).

Ciao
Quaese
 
Zurück