Interaktion bei Klick auf Radiobuttons

[B4ttl3m4st3r]

Ich bin gerade dabei eine Bewertungs-Funktion zu erstellen.
Dabei wollte ich JavaScript benutzen, um das ganze ein bisschen schöner zu gestallten.
Leider bin ich mit JavaScript nicht gut vertraut und habe schon versucht, mich mit Internet & Suche weiterzuhelfen.
Leider gingen die Ergebnisse meiner Problemsuche nicht genau auf das ein, was ich brauche.

Das folgende <form>-Tag ist ein Ausschnitt aus einer mit PHP generierten Schleife (daher auch das <?php $entry['id'] ?>).
Es gibt also mehrere <form>-Tags, die unterschiedliche IDs habe
(rateform_1, rateform_2, ...) und die mit der gleichen JavaScript-Funktion arbeiten sollen.

  
<form name="rateform_[code lang=php]<?php $entry['id'] ?>
~~~" action="index.php" method="post">  
  
0<input type="radio" name="rate\_value" onclick="rate(`<?php $entry['id'] ?>`{:.language-php})" value="0">  
1<input type="radio" name="rate\_value" onclick="rate(`<?php $entry['id'] ?>`{:.language-php})" value="0">  
2<input type="radio" name="rate\_value" onclick="rate(`<?php $entry['id'] ?>`{:.language-php})" value="0">  
  
<input type="submit" value="Rate" />  
</form>[/code]  
  
Um das ganze zunächst zu testen und zum laufen zu bringen, habe ich hier mit der Funktion alert(); gearbeitet.  
Bei Klick auf den Radio-Button 1, 2 oder 3 soll eine Meldung ausgegeben werden... leider ohne Erfolg.  
  
  
~~~javascript
  
<script type="text/javascript" language="javascript">  
function rate(id) {  
	if (document.rateform_[id].rate_value[0].checked == true) {  
		alert("Button 1 wurde ausgewähl");  
		//bewerte mit 0  
	  } else if (document.rateform_[id].rate_value[1].checked == true) {  
		alert("Button 2 wurde ausgewähl");  
		//bewerte mit 1  
          } else if (document.rateform_[id].rate_value[2].checked == true) {  
		alert("Button 3 wurde ausgewähl");  
		//bewerte mit 3  
	  } else {  
		//nichts unternehmen  
	  }  
	}  
}  
</script>  

Kann mir jemand bei meinem Problem helfen bzw. mir Vorschläge vorstellen, wie sich das anders realisieren lässt?

Ich wäre sehr dankbar dafür.

[Maxx]

Hallo,

<form name="rateform_[code lang=php]<?php $entry['id'] ?>

  

> ~~~javascript
  

> 	if (document.rateform_[id].rate_value[0].checked == true) {

rateform_1 ist der Name der <form>.
Wolltest du mit rateform_[1] über den Index zugreifen? Also etwas wie: document.forms[1]?

http://de.selfhtml.org/javascript/objekte/forms.htm#allgemeines beschreibt die Verwendung des Formsobjektes.

Kann mir jemand bei meinem Problem helfen bzw. mir Vorschläge vorstellen, wie sich das anders realisieren lässt?

Welche Vorteile versprichst du dir denn durch die Verwendung von Javascript? Oben hast du geschriebn "um es schöner zu machen". Du kennst doch sicher diese "Sternchenbewertungen" (Amazon, Ebay etc.) Die funktionieren meines Wissens nach auch ohne javascript, oder du guckst auf meiner Seite.

Viele Grüße,

Jochen

[B4ttl3m4st3r]

Hallo und Danke für die schnelle Antwort.

Wolltest du mit rateform_[1] über den Index zugreifen? Also etwas wie: document.forms[1]?

Ich wollte nur auf das <form>-tag mit dem namen rate_form_1 zugreifen, was wohlmöglich nicht so funktioniert, wie ich es mir vorgestellt habe.

Welche Vorteile versprichst du dir denn durch die Verwendung von Javascript? Oben hast du geschriebn "um es schöner zu machen". Du kennst doch sicher diese "Sternchenbewertungen" (Amazon, Ebay etc.) Die funktionieren meines Wissens nach auch ohne javascript, oder du guckst auf meiner Seite.

Diese Sternchenbewertung auf Amazon und auf deiner Seite find ich generell super. Es ist nur grad das erste Mal, dass ich mich mit einem Bewertungs-Script auseinandersetze. Wie funktioniert der Hover-Effekt bei den Sternen auf deiner Seite? mit CSS?
Und wie werden dann bei oncick die Bewertungen an die Datenbank geschickt? Ich habe mich bisher nur mit HTML, CSS, PHP & JavaScript beschäftigt. XML und Gleichgesindel sind mir noch fremd.

Ich habe hier mal ein Beispiel hochgeladen, wie ich das bei mir jetzt gemacht habe. Wirkt jetzt noch SEHR 'unsauber'.

http://b4ttl3m4st3r.b4.funpic.de/

[Maxx]

Hallo,

Wie funktioniert der Hover-Effekt bei den Sternen auf deiner Seite? mit CSS?

ja, rein CSS. Eine Grafik die trickreich bei a:hover mittels background-position den Sternchen entsprechend positioniert wird. Wenn du es nachbauen möchtest: CSS The Star Matrix

Und wie werden dann bei oncick die Bewertungen an die Datenbank geschickt?

Nicht bei onclick. Der "Stern" ist ein ganz normaler Link der die Bewertung in der Form <a href="rating.php?id=123&rating=3"> an den Server schickt.

Ich hatte allerdings nach kurzer Zeit ein völliges Durcheinander in den Bewertungen. Ausgelöst durch Suchmaschinen und Grabber die den Links folgten und damit wahllos Bewertungen auslösten. Daher wird beim onclick über this.href+="&b=0" ein weiterer Parameter in den Querystring geschrieben um die Grabber auszufiltern. Für Besucher ohne javascript überlege und bastel ich noch ...

http://b4ttl3m4st3r.b4.funpic.de/

ja, wird doch

Grüße,

Jochen

[B4ttl3m4st3r]

Hallo,

ja, rein CSS. Eine Grafik die trickreich bei a:hover mittels background-position den Sternchen entsprechend positioniert wird. Wenn du es nachbauen möchtest: CSS The Star Matrix

Danke für den Link. Werd ich mir gleich mal anschauen.

Nicht bei onclick. Der "Stern" ist ein ganz normaler Link der die Bewertung in der Form <a href="rating.php?id=123&rating=3"> an den Server schickt.

Was ich daran aber nicht verstehe ist, dass die Seite beim Klick auf "Stern" nicht aktualiiert bzw. neu aufgerufen wird. Habe das grade mal ausprobiert.
Der Script sagt mir "Danke, deine Bewertung wurde gespeichert."
Frames ?

[Der Martin]

Hi,

Was ich daran aber nicht verstehe ist, dass die Seite beim Klick auf "Stern" nicht aktualiiert bzw. neu aufgerufen wird. Habe das grade mal ausprobiert.

ich weiß nicht, wie die das realisiert haben, aber ich würde den Server einfach mit dem HTTP-Status 204 No Content antworten lassen.

Der Script sagt mir "Danke, deine Bewertung wurde gespeichert."
Frames ?

Vermutlich doch eher Javascript. Paradebeispiel für die Verwendung von AJAX und einem gewöhnlichen Link als Fallback.

Btw, "der" Script? Wohl eher "das".

Ciao,
 Martin

[Maxx]

Hallo,

Was ich daran aber nicht verstehe ist, dass die Seite beim Klick auf "Stern" nicht aktualiiert bzw. neu aufgerufen wird.

ich weiß nicht, wie die das realisiert haben, aber ich würde den Server einfach mit dem HTTP-Status 204 No Content antworten lassen.

exakt. Header ("HTTP/1.1 204  No Content");

Der Script sagt mir "Danke, deine Bewertung wurde gespeichert."
Frames ?

Vermutlich doch eher Javascript.

Ja, durch den 204 hängt der Klick etwas in der Luft, und der Besucher fragt sich "war es das jetzt?" Daher ein mittels javascript eingeblendeter Hinweistext. Was besseres ist mir nicht eingefallen.

Grüße,

Jochen

[B4ttl3m4st3r]

ich weiß nicht, wie die das realisiert haben, aber ich würde den Server einfach mit dem HTTP-Status 204 No Content antworten lassen.

exakt. Header ("HTTP/1.1 204  No Content");

Das gehört zwar nicht in diese Thema, aber ich würde doch gerne wissen, wie das geht. Kann mir das jemand begreiflicher machen?

Wie sag ich dem Server, er soll einen 'leere 204-Seite' ausspucken?

[Maxx]

Hallo,

Wie sag ich dem Server, er soll einen 'leere 204-Seite' ausspucken?

Der Statuscode ist eine Reaktion des Servers. Er sagt dem anfragenden Client wie der Server auf die Anfrage reagiert hat. Zum Beispiel sagt 404 dem Client das der Server die angeforderte Rssource nicht gefunden hat.

204 wird dem anfragenden Client dann mitgeteilt wenn der Server die Anfrage zwar verarbeitet hat, es aber keine neuen Daten für den Client gibt. Der Browser macht dann halt "nichts" = die Ressource (html, was auch immer) die vor dem Request angezeigt wurde bleibt weiterhin dein aktuelles Dokument.

http://de.selfhtml.org/servercgi/server/httpstatuscodes.htm

Grüße,

Jochen

[B4ttl3m4st3r]

Hallo,

Wie sag ich dem Server, er soll einen 'leere 204-Seite' ausspucken?

Der Statuscode ist eine Reaktion des Servers. Er sagt dem anfragenden Client wie der Server auf die Anfrage reagiert hat. Zum Beispiel sagt 404 dem Client das der Server die angeforderte Rssource nicht gefunden hat.

204 wird dem anfragenden Client dann mitgeteilt wenn der Server die Anfrage zwar verarbeitet hat, es aber keine neuen Daten für den Client gibt. Der Browser macht dann halt "nichts" = die Ressource (html, was auch immer) die vor dem Request angezeigt wurde bleibt weiterhin dein aktuelles Dokument.

http://de.selfhtml.org/servercgi/server/httpstatuscodes.htm

Grüße,

Jochen

Danke für die gute Erklärung. Hab mir das direkt mal angeschaut und ich denke, dass ich das soweit auch verstanden habe.

Nimm es mir nicht übel, aber ich hab mir zunächst einen kleinen Teil (einen Link) aus deinen Code 'geklaut' und es damit ausprobiert.

Ich hoffe, ich hab das soweit richtig verstanden =)
Hier ein Beispiel:

-------index.php mit Bewertungs-Funktion-------

  
//..... Inhalt (Siehe Beispiel aus letztem Beitrag)  
<a onclick="this.href+='&b=0';" href="rate_querys.php?id=300&amp;r=1" title="Rate">1</a>  

----------------------------------------------

-------Inhalt der rate_querys.php-------

  
[code lang=php]<?php  
$sql = "UPDATE ".music_ratings SET vaule_1 = value_1 + 1 WHERE music_id = 45";  
$result = mysql_query($sql) OR die(mysql_error());  
  
header("HTTP/1.1 204  No Content")  
?>  

~~~[/code]  
\---------------------------------------

[B4ttl3m4st3r]

Ich bin nun soweit fertig mit dem neuen Layout der Bewertungs-Funktion.
An dieser Stelle nochmals danke an alle, die mir dabei geholfen haben.

Das ganze habe ich hier nochmal hochgeladen
http://fhx-online.netai.net/rate_test/

Das einzige Problem, das ich jetzt noch habe ist folgendes:

Wenn man zum Bewerten des Musikstücks auf einen der Ringe klickt und dadurch die Anfragen an die rating.php gesendet werden, wird der Musik-Player im anderen <div> ausgeblendet. Bei Klick auf den Button Cancel ist er noch da.
Natürlich soll der Player nach dem Bewerten noch sichtbar sein... =/

Dies Effekt tritt allerdings nur im Firefox (v2.0) auf; im IE ist der Player noch zu sehen.

Soweit habe ich schon herausgefunden, dass es an den Ziel-Adressen der Links liegt, also href="rating.php?action=music&id=1&value=5".

Änder ich dies zB in "#", ist der Effekt behoben.

Der Inhalt der rating.php sieht folgendemaßen aus:
--------------------------rating.php--------------------------

<?php  
// sql-querys an Datenbank....  
header("HTTP/1.1 204  No Content")  
?>

--------------------------------------------------------------

Wodran kann das liegen?

[Der Martin]

Hallo,

Wie sag ich dem Server, er soll einen 'leere 204-Seite' ausspucken?

indem du in dem Script, das die Anfrage bearbeitet und die Antwort erzeugt, einfach den HTTP-Header für den entsprechenden Status setzt. In PHP würde das z.B. so aussehen:

header("HTTP/1.1 204  No Content");

Darüber hinaus soll das Script keinerlei Ausgabe machen, und fertig ist die Laube.

So long,
 Martin

[Hans Wurst]

Bei Klick auf den Radio-Button 1, 2 oder 3 soll eine Meldung ausgegeben werden... leider ohne Erfolg.

Baue testausgaben rein, prüf ob die Funktion aufgerufen wird, ob eine IF-Bediengung irgendwann Wahr wird und vorallem, was du mit dem Paramter "ID" übergibst.

<script type="text/javascript" language="javascript">
function rate(id) {
if (document.rateform_[id].rate_value[0].checked == true) {
alert("Button 1 wurde ausgewähl");
//bewerte mit 0
  } else if (document.rateform_[id].rate_value[1].checked == true) {
alert("Button 2 wurde ausgewähl");
//bewerte mit 1
          } else if (document.rateform_[id].rate_value[2].checked == true) {
alert("Button 3 wurde ausgewähl");
//bewerte mit 3
  } else {
//nichts unternehmen
  }
}
}
</script>

  
Hier die etwas bessere Variante:  
`<input type="radio" name="rate_value" onclick="rate(this);" value="<?php $entry['id'] ?>" />`{:.language-html}  
  
~~~javascript
function rate(obj) {  
 if(obj.checked) { alert("Gewählte Option: "+ obj.value) }  
}