✔ Counter über + / - verändern und in Datenbank aktualisieren

takethedogforawalk

takethedogforawalk

Mitglied
Hallo,

ich habe mit Ajax noch keine Erfahrung und bin deshalb auf der Suche nach einem Tutorial für Folgendes:

Ich habe eine Art Counter. Dieser kann mit einem Klick auf + erhöht und mit - verringert werden. Der Wert des Counters wird in der Datenbank gespeichert. D.h. sobald ich auf + / - gedrückt habe muss der Wert aktualisiert werden.

Gibt es dafür eine Beschreibung bzw. Tutorial. Vom Prinzip her müsste es ja relativ einfach sein. Mit einem Tutorial könnte ich mich da durch beißen.

Grüße
 
In meinem folgendem Beispiel schickst du deine Daten per GET-Methode an ein Skript namens counter.php. Wenn die Aktion minus heißt, dann ziehst du –1 ab, ansonsten addierst du 1. Ich habe es nicht getestet, aber es sollte so oder so ähnlich funktionieren.
HTML: 
<!DOCTYPE html>
<html>
<head>
  <title>AJAX-Counter</title>
  <script type="text/javascript" src="jquery.js"></script>
  <script type="text/javascript">
    $('#counter-minus').click(function () {
      $.get('counter.php', { action: 'minus' });
      return false;
    });
    $('#counter-plus').click(function () {
      $.get('counter.php', { action: 'plus' });
      return false;
    }
  </script>
</head>
<body>
  <a id="counter-minus" href="#minus">–</a> / <a id="counter-plus" href="#plus">+</a>
</body>
</html>
 
danke für die Antwort,
ich habe damit nun etwas probiert, allerdings merke ich, dass mir doch noch einiges an Wissen fehlt.

Wie genau bekomme ich denn noch in obigen Code die aktuelle Zahl eingebunden? Die müsste er ja auch stehts aktualisieren.


Wie komme ich denn an 'minus' oder 'plus' in der counter.php dran?

Damit geht es nicht:
PHP: 
<?php
if ($_GET["action"] = "minus"){
	echo " minus";
}

?>
 
Code: 
$('#counter-minus').click(function () {
  $.get('counter.php', { action: 'minus' }, function (data) {
    $('#counter-value').text(data);
  });
}
$('#counter-plus').click(function () {
  $.get('counter.php', { action: 'plus' }, function (data) {
    $('#counter-value').text(data);
  });
}
HTML: 
<!DOCTYPE html>
<html>
<head>
  <title>AJAX-Counter</title>
  <script type="text/javascript" src="jquery.js"></script>
  <script type="text/javascript">
    // ... siehe Skript oben
  </script>
</head>
<body>
  <a id="counter-minus" href="#minus">–</a> / <a id="counter-plus" href="#plus">+</a><br />
  <output id="counter-value"></output>
</body>
</html>
PHP: 
if($_GET['action'] === 'minus') {
  $counter; // Wert aus der Datenbank
  --$counter;
  // Wert zurück in die Datenbank schreiben
  echo $counter;
} elseif($_GET['action'] === 'plus') {
  $counter; // Wert aus der Datenbank
  ++$counter;
  // Wert zurück in die Datenbank schreiben
  echo $counter;
}
 
Erst einmal vielen vielen Dank, ohne Hilfe wäre das nicht möglich.

Leider klappt es noch nicht ganz.

also ich habe die counter.php mal testweise auf einen Wert losgelassen, das auslesen und schreiben klappt fehlerfrei.

Nur eben nicht wenn ich auf + oder - drücke, da passiert gar nichts.

Der Code:

PHP: 
<html>
  <head>
  <title>AJAX-Counter</title>
  <script type="text/javascript" src="jquery.js"></script>
  <script type="text/javascript">
		
	$('#counter-minus').click(function () {
		$.get('counter.php', { action: 'minus' }, function (data) {
			$('#counter-value').text(data);
		});
	});
	$('#counter-plus').click(function () {
		$.get('counter.php', { action: 'plus' }, function (data) {
			$('#counter-value').text(data);
		});
	});
	
  </script>
  </head>
  <body>
<a id="counter-minus" href="#minus">–</a> / <a id="counter-plus" href="#plus">+</a><br />
<output id="counter-value"></output>
</body>
</html>


fehlt noch etwas was ich einfügen muss?
 
Zuletzt bearbeitet:
Ich habe es nicht getestet und kann es leider gerade nicht testen, da mein lokaler Server momentan nicht gewillt ist korrekt zu laufen.
 
ah blöder Server :(

Hast du eine Idee wie man das Problem eingrenzen könnte? Soweit ich das Script verstanden habe, könnte ich mir vorstellen dass es gar nicht zum Aufruf Callback Funktion kommt.

Also wenn ich zum testen ganz Trivial
PHP: 
$('#counter-minus').click(function() {
  alert("Handler for .click() called.");
});

dann klappt das bei einem Klick auf - schon nicht. Es kommt kein Alert.
 
Zuletzt bearbeitet:
da warst du so schnell, das ich nicht mal mehr editieren konnte ;)

EDIT: nur um das ausschließen zu können, ich habe das aktuelle JQuery.js im selben Ordner wie die PHP Datei liegen. Das dürfte korrekt sein?
 
Zuletzt bearbeitet:
Mh, versuch es mal so:
Code: 
$(document).ready(function () {
  $('#counter-minus').click(function () {
    $.get('counter.php', { action: 'minus' }, function (data) {
      $('#counter-value').text(data);
    });
    $.get('counter.php', { action: 'plus' }, function (data) {
      $('#counter-value').text(data);
    });
  });
});
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück