✔ jquery Warenkorb update mit mehreren Einträgen

creativeheadz

creativeheadz

Erfahrenes Mitglied
Hallo,

ich würde gerne in meinem Warenkorb die Menge ändern können indem der User einfach in ein Input Feld klickt das zu dem entsprechenden Produkt gehört , die gewünschte Menge eingibt und dann sofort die Änderungen übernommen werden.

Bisher habe ich folgenden Code:

HTML: 
<script language="javascript">

  
$(document).ready(function() {
	$('#basketLoading').hide();
	$('#quantity').blur(function(){
	  $('#basketLoading').show();
      $.post("basket_update.php", {
        quantity: $('#quantity').val(),
		basket_id: $('#basket_id').val()
      }, function(response){
        $('#basketResult').fadeOut();
        setTimeout("finishAjax('basketResult', '"+escape(response)+"')", 400);
      });
    	return false;
	});
});

function finishAjax(id, response) {
  location.reload();
} //finishAjax


</script>

PHP: 
while($row = mysql_fetch_object($query)){


echo'<tr>
 <td>
 <form id="submit" method="post">
 <input id="quantity"  name="quantity" size="2" type="text"  value="'.$row->quantity.'">
 <input id="basket_id"  name="basket_id"  type="hidden"  value="'.$row->basket_id.'">
<span id="basketLoading"></span>
<span id="basketResult"></span>
</form>
</td>
td>'.$row->item.'</td>';


}

Mit einem Produkt im Warenkorb funktioniert das ganze auch ganz gut soweit.
Sobald jedoch 2 bzw. mehrere Produkte drin sind, klappt es nicht mehr da ja jedes Produkt eine andere ID hat...

Ich weiss einfch nicht wie ich dem Ajax Code sagen kann, dass ich immernur das Mengenfeld geändert haben möchte, in das auch geklickt worden ist.

Kann mir da jemand helfen?

Gruß
 
Da eine ID nur einmal vorkommen darf, liefert "basket_id: $('#basket_id').val()" immer den Wert des aller ersten Elementes. Das gleiche gilt für "quantity" Streiche die ID komplett und mach es folgendermaßen:

Javascript: 
$('[name=quantity]').blur(function(){
	$.post("basket_update.php", {
			quantity: $(this).val(),
			basket_id: $(this).next('[name=basket_id]').val()
		},
		function(response){
			//Fertig
		}
	);
});

Außerdem würde ich "location.reload()" streichen und stattdessen sollte "basket_update.php" die neuen Werte zurückgeben (z.B. als JSON), die du dann darstellen kannst. Denn sonst macht das ganze keinen Sinn, da könntest du auch einfach die Mengenänderung als URL Parameter übergeben, wenn du sowieso die Seite neu lädst.
 
Hey Danke für deine schnelle Antwort.

Ich habe deinen Code getestet allerdings wird jetzt der Erste Eintrag richtig angepasst und der jeweils letzte Eintrag im Warenkorb um 1 erhöht?

Da scheint noch ein Knoten drin zu sein.
 
Ich sehe im Moment den Fehler nicht. Kannst du mal das HTML zeigen? Nicht den PHP Code, sondern das HTML, was dabei am Ende raus kommt.
 
Das ist die Ausgabe :

HTML: 
<table width="100%"><tr>
 <td>Anzahl</td>
 <td>Artikel</td>
 <td>Kapseln pro Dose</td>
 <td>Einzelpreis</td>

 <td>Summe</td>
 <td></td>
</tr><tr>
 <td>
 <form id="submit" method="post">
 <input id="quantity"  name="quantity" size="2" type="text"  value="2">
 <input id="basket_id"  name="basket_id"  type="hidden"  value="79">
<span id="basketLoading"></span>
<span id="basketResult"></span>
</form>

</td>
 <td>Accerola Kapseln</td>
 <td>90 Stk.</td>
 <td>8,90 EUR</td>
 <td>17,80 EUR</td>
 <td><a href="index.php?cPath=basket&a=delete_product&basket_id=79">entfernen</a></td>
</tr><tr>

 <td>
 <form id="submit" method="post">
 <input id="quantity"  name="quantity" size="2" type="text"  value="2">
 <input id="basket_id"  name="basket_id"  type="hidden"  value="80">
<span id="basketLoading"></span>
<span id="basketResult"></span>
</form>
</td>
 <td>Ling Chi  Kapseln</td>
 <td>180 Stk.</td>

 <td>11,90 EUR</td>
 <td>23,80 EUR</td>
 <td><a href="index.php?cPath=basket&a=delete_product&basket_id=80">entfernen</a></td>
</tr><tr>
 <td colspan="4"></td>
 <td>41,60 EUR</td>
 <td></td>

 </tr>
 <tr>
  <td  colspan="4"></td>
  <td><a href="index.php?cPath=checkout">zur Kasse</a></td>
 </tr>
 </table>
 
Mal davon abgesehen, dass immer noch doppelte IDs vorkommen (nur benutzt du sie jetzt nicht mehr) funktioniert das bei mir ohne Probleme. Habe das HTML kopiert und in ein Textdokument eingefügt.

HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html id="html" xmlns="http://www.w3.org/1999/xhtml" lang="de" xml:lang="de">
<head>
	<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
	
	<title>Einkaufswagen</title>
</head>

<body>
	<div>
		<table width="100%"><tr>
		<td>Anzahl</td>
		<td>Artikel</td>
		<td>Kapseln pro Dose</td>
		<td>Einzelpreis</td>

		<td>Summe</td>
		<td></td>
		</tr><tr>
		<td>
		<form id="submit" method="post">
		<input id="quantity"  name="quantity" size="2" type="text"  value="2">
		<input id="basket_id"  name="basket_id"  type="hidden"  value="79">
		<span id="basketLoading"></span>
		<span id="basketResult"></span>
		</form>

		</td>
		<td>Accerola Kapseln</td>
		<td>90 Stk.</td>
		<td>8,90 EUR</td>
		<td>17,80 EUR</td>
		<td><a href="index.php?cPath=basket&a=delete_product&basket_id=79">entfernen</a></td>
		</tr><tr>

		<td>
		<form id="submit" method="post">
		<input id="quantity"  name="quantity" size="2" type="text"  value="2">
		<input id="basket_id"  name="basket_id"  type="hidden"  value="80">
		<span id="basketLoading"></span>
		<span id="basketResult"></span>
		</form>
		</td>
		<td>Ling Chi  Kapseln</td>
		<td>180 Stk.</td>

		<td>11,90 EUR</td>
		<td>23,80 EUR</td>
		<td><a href="index.php?cPath=basket&a=delete_product&basket_id=80">entfernen</a></td>
		</tr><tr>
		<td colspan="4"></td>
		<td>41,60 EUR</td>
		<td></td>

		</tr>
		<tr>
		<td  colspan="4"></td>
		<td><a href="index.php?cPath=checkout">zur Kasse</a></td>
		</tr>
		</table>
	</div>
	
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
	<script type="text/javascript">
	/* <![CDATA[ */
	$(document).ready(function(){
		$('[name=quantity]').blur(function(){
			document.title = $(this).val() + " - " +  $(this).next('[name=basket_id]').val();
		});
	});
	/* ]]> */
	</script>
</body>

</html>

Wenn jetzt eines der beiden Textfelder den Fokus verliert, wird im Dokumententitel korrekt die neue Anzahl und die ID angezeigt.
 
Das ist doch jetz ein andere Code als eben oder?

Also bei dem ersten Code passiert bei mir irgendwie garnix...

HTML: 
<script language="javascript">

$('[name=quantity]').blur(function(){
    $.post("basket_update.php", {
            quantity: $(this).val(),
            basket_id: $(this).next('[name=basket_id]').val()
        },
        function(response){

        }
    );
});

</script>

Genau so habe ich meinen Code nun ersetzt.

Nun Habe ich es einmal so versucht aber es klappt immernoch nicht irgendetwas mache ich falsch ...

HTML: 
$(document).ready(function() {
	$('#basketLoading').hide();
	$('[name=quantity]').blur(function(){
	  $('#basketLoading').show();
      $.post("basket_update.php", {
        quantity: $('[name=quantity]').val(),
		basket_id: $('[name=basket_id]').val()
      }, function(response){
        $('#basketResult').fadeOut();
        setTimeout("finishAjax('basketResult', '"+escape(response)+"')", 400);
      });
    	return false;
	});
});
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück