✔ Rating Funktion mit Ajax

[RageNo1]

Hallo,
ich bastel gerade an einer Rating-Funktion wie dieser hier unter www.brainblog.to.
Nach Anklicken eines der Pfeile geht die Zahl entsprechend rauf oder runter.
Der PHP Teil ist kein Thema, allerdings die Umsetzung dieser Ausgabe, dass sich die Zahl ändert aber die Seite drumherum nicht neugeladen wird.

Gibt es zu dieser Technik ein Tutorial oder hilfreiche Infos?

Gruß Ragey

 

[anhadikal]

Hi,

ehm also die Beispielseite wird auch neugeladen ... aber egal:

1. Du kannst es einfach mit JavaScript machen => einfach die Zahl um 1 erhöhen bzw runtersetzen und dann die alte Zahl ersetzen(google: getelementbyid, javascript dynamischer inhalt, innerHTML)

2. Man kann es auch mit Ajax machen, was einem mehr möglichkeiten bietet(Auf fehler reagieren, und vieles mehr)(google: ajax tutorial)

MfG

 

[RageNo1]

Danke für den Hinweis,
ich habe folgenden Code gefunden und angepasst.
Funktioniert sogar

  <script type="text/javascript">
  <!--
	var request = false;

	// Request senden
	function setUp(value) {
		// Request erzeugen
		if (window.XMLHttpRequest) {
			request = new XMLHttpRequest(); // Mozilla, Safari, Opera
		} else if (window.ActiveXObject) {
			try {
				request = new ActiveXObject('Msxml2.XMLHTTP'); // IE 5
			} catch (e) {
				try {
					request = new ActiveXObject('Microsoft.XMLHTTP'); // IE 6
				} catch (e) {}
			}
		}

		// überprüfen, ob Request erzeugt wurde
		if (!request) {
			alert("Kann keine XMLHTTP-Instanz erzeugen");
			return false;
		} else {
			var url = "vote.php?voted=up&";
			// Request öffnen
			request.open('post', url, true);
			// Requestheader senden
			request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
			// Request senden
			request.send('id='+value);
			// Request auswerten
			request.onreadystatechange = interpretRequest;
		}
	}

	// Request auswerten
	function interpretRequest() {
		switch (request.readyState) {
			// wenn der readyState 4 und der request.status 200 ist, dann ist alles korrekt gelaufen
			case 4:
				if (request.status != 200) {
					alert("Der Request wurde abgeschlossen, ist aber nicht OK\nFehler:"+request.status);
				} else {
					var content = request.responseText;
					// den Inhalt des Requests in das <div> schreiben
					document.getElementById('content').innerHTML = content;
				}
				break;
			default:
				break;
		}
	}

//#############################################################################

	// Request senden
	function setDown(value) {
		// Request erzeugen
		if (window.XMLHttpRequest) {
			request = new XMLHttpRequest(); // Mozilla, Safari, Opera
		} else if (window.ActiveXObject) {
			try {
				request = new ActiveXObject('Msxml2.XMLHTTP'); // IE 5
			} catch (e) {
				try {
					request = new ActiveXObject('Microsoft.XMLHTTP'); // IE 6
				} catch (e) {}
			}
		}

		// überprüfen, ob Request erzeugt wurde
		if (!request) {
			alert("Kann keine XMLHTTP-Instanz erzeugen");
			return false;
		} else {
			var url = "vote.php?voted=down&";
			// Request öffnen
			request.open('post', url, true);
			// Requestheader senden
			request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
			// Request senden
			request.send('id='+value);
			// Request auswerten
			request.onreadystatechange = interpretRequest;
		}
	}

	// Request auswerten
	function interpretRequest() {
		switch (request.readyState) {
			// wenn der readyState 4 und der request.status 200 ist, dann ist alles korrekt gelaufen
			case 4:
				if (request.status != 200) {
					alert("Der Request wurde abgeschlossen, ist aber nicht OK\nFehler:"+request.status);
				} else {
					var content = request.responseText;
					// den Inhalt des Requests in das <div> schreiben
					document.getElementById('content').innerHTML = content;
				}
				break;
			default:
				break;
		}
	}
  //-->
  </script>

Allerdings gibt es noch ein Problem,
ich habe mehrere Einträge auf der Seite und wenn überall die Ausgaben in <span id="content"></span> liegen ändert sich die Ausgabe nur bei dem obersten.

Es soll sich natürlich bei dem jeweiligen Eintrag ändern.
Nun wäre es natürlich sinnvoll wenn es anstatt mit content mit der id des eintrags benannt wird. Dies ist auch kein Thema nur muss der JS Code das auch übernehmen. Sprich +value müsste auch irgendwie auf die Ausgabe angewandt werden.

Ich hoffe Ihr wisst was ich meine

Gruß Ragey

 

[anhadikal]

Ehm ..

Also es darf nur eine ID geben IDs sind einzigartig, d.h es dürfen 2 Elemente nicht die selbe ID haben.

Du könntest es so machne: id="content_23"
dann einfach mit der Javascript-Funktion elem.id.split("_")[1]; auf die zahl 23 zugreifen, die die nummer des Inhalt ist

MfG

 

[Maik]

Also es darf nur eine ID geben IDs sind einzigartig, d.h es dürfen 2 Elemente nicht die selbe ID haben.

So sieht's aus - deine ID-Card (Personalausweis) gibt's ja schliesslich auch nur einmal

lg Maik

 

[RageNo1]

Genau so ist auch meine Denkweise ich versuche hier schon ewig mit der Ausgabe klarzukommen

Aus:

var rating = request.responseText;
// den Inhalt des Requests in das <div> schreiben
document.getElementById('rating').innerHTML = rating;

müsste also Idealerweise das werden:

var rating11599 = request.responseText;
// den Inhalt des Requests in das <div> schreiben
document.getElementById('rating11599').innerHTML = rating11599;

Wobei die id 11599 ist.

Nur bekomm ich es nicht da dran
Weiter oben wird es ja per value übergeben wenn ich das recht sehe.
Also hatte ich es schon versucht mit Sachen wie:
var ratingvalue = request.responseText; oder var rating+value = request.responseText;


Naja Ihr merkt sicher das bei mir mit JS nicht viel los ist


Gruß Ragey

 

[Quaese]

Hi,

die ID könnte als Parameter an die initiierende Funktion setUp und von dort an die callback-Funktion interpretRequest übergeben werden. Hierfür müsste die callback-Funktion als anonyme Funktion aufgerufen werden.

Weiterhin kann das Script dahingehend optimiert werden, dass nur eine Funktion zum Hoch- und Runterzählen verwendet wird. Die gewünschte Funktionalität wird über einen weiteren Parameter übergeben.

Zuletzt ist die Funktion interpretRequest doppelt vorhanden und kann einmal entfernt werden.

Beispiel:

<!doctype html public "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title></title>
<meta name="author" content="Quaese">
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
  <script type="text/javascript">
  <!--
	var request = false;

	// Request senden
	function setUp(value, strUpDown, strID) {
		// Request erzeugen
		if (window.XMLHttpRequest) {
			request = new XMLHttpRequest(); // Mozilla, Safari, Opera
		} else if (window.ActiveXObject) {
			try {
				request = new ActiveXObject('Msxml2.XMLHTTP'); // IE 5
			} catch (e) {
				try {
					request = new ActiveXObject('Microsoft.XMLHTTP'); // IE 6
				} catch (e) {}
			}
		}

		// überprüfen, ob Request erzeugt wurde
		if (!request) {
			alert("Kann keine XMLHTTP-Instanz erzeugen");
			return false;
		} else {
			//var url = "vote.php?voted="+strUpDown+"&";
      var url = "xmlhttp_request_dummy.php?voted="+strUpDown+"&";
			// Request öffnen
			request.open('post', url, true);
			// Requestheader senden
			request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
			// Request senden
			request.send('id='+value);
			// Request auswerten
			request.onreadystatechange = function(){
      	interpretRequest(strID);
      }
		}
	}

	// Request auswerten
	function interpretRequest(strID) {
		switch (request.readyState) {
			// wenn der readyState 4 und der request.status 200 ist, dann ist alles korrekt gelaufen
			case 4:
				if (request.status != 200) {
					alert("Der Request wurde abgeschlossen, ist aber nicht OK\nFehler:"+request.status);
				} else {
					var content = request.responseText;
					// den Inhalt des Requests in das <div> schreiben
          document.getElementById(strID).innerHTML = content;
				}
				break;
			default:
				break;
		}
	}
  //-->
  </script>
</head>
<body>
<button onclick="setUp(1,'up','content_123');">up</button>
<button onclick="setUp(2,'down','content_123');">down</button>
<div id="content_123"></div>
</body>
</html>

Ciao
Quaese

 

[RageNo1]

Diese gekürzte Version ist natürlich noch besser,
ich wusste nicht wie ich das mit dem Up, Down regel daher hatte ich die funktion in zwei aufgeteilt
So Funktioniert jetzt aber alles. Vielen Dank für Eure Hilfe!