Brauche Hilfe bei etwas ungewöhnlicher Komponente

S

Serow

0
Hi,

sry für den Titel, aber mir ist nix gutes eingefallen - ihr werdet evtl sehn warum ^^

Also ich hab folgendes Problem: Ich arbeite gerade an einer kleinen Plattform um etwas zu bewerten - was ist eigentlich egal für das Problem. Ich arbeite mit Struts2 und ein "Rating" entspricht einem Wert zwischen 0 (inkl) und einer Zahl > 0 (inkl).
Ich hätte das ganze gerne so, dass auf der Website soviele halbtransparente Sterne angezeigt werden wie das Maximum der Rating Wertes ist (klar oder?). Wenn ich einen der Sterne drücke sollen bis dort hin "aufgefüllt" werden, also das Image getauscht werden.

Bisher habe ich für jedes Bewertungskriterium folgenden HTML Code (aus JSP generiert):

Code: 
<div class="criterionElement">
	<table>
		<tr>
			<td style="width: 250px;">
				<h3>Name of Criterion</h3>
			</td>
			<td>
				    
			</td>
			<td>
					<button name="1_0" class="rating-icon-empty"></button>
					<button name="1_1" class="rating-icon-empty"></button>	
					<button name="1_2" class="rating-icon-empty"></button>	
					<button name="1_3" class="rating-icon-empty"></button>	
					<button name="1_4" class="rating-icon-empty"></button>	
					<button name="1_5" class="rating-icon-empty"></button>	
			</td>
		</tr>
	</table>
</div>

"1_0" steht z.B für "Kriterium 1, Wert 1".

So nun zu meinen Fragen:

1) Wenn ich auf den Submit Button klicke kommen die Parameter 1_* nicht in der Action an. Kann man den button-Tag nicht für sowas verwenden?

2) Wie mach ich das mit dem auffüllen? Ich dachte da an Java Script. Man musste bein einem Klick die class jedes button ändern dessen Namen mit "1_" anfängt und als folgende Zahl eine Zahl kleiner der des gedrückten Buttons hat.

Da ich mit JS _noch nie_ was zu tun hatte bin ich da komplett hilflos. Das ganze ist ein Uni Projekt und muss bis Mittwoch fertig sein.

Any help is _highly_ appreciated!!!

cu
serow
 
Hallo Serow,

da ich zufällig in absehbarer Zeit ähnliches realisieren muss, habe ich mal meine JavaScript-Kenntnisse aufgefrischt - es geht garantiert schöner. Zu einfach möchte ich es Dir allerdings auch nicht machen, deshalb bekommst du hier nur einen möglichen Ansatz.

Code: 
<?xml version="1.0" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Script-Type" content="text/javascript">
<title>blub</title>
<script type="text/javascript">
/* <![CDATA[ */
  var counter = 0;
  function rate(obj) {
    var id = parseInt(obj.id.substr(1));
    if (id >= counter-1) {
      for (var i=1;i<=id;i++) document.getElementById("r"+i).value = "*";
      counter = id;
    }
  }

  function unrate(obj) {
    var id = parseInt(obj.id.substr(1));
    for (var i=1;i<=id;i++) document.getElementById("r"+i).value = i;
    counter = 0;
  }

  function rated() {
    alert(counter);
    /** schalalalalaaa **/
  }
/* ]]> */
</script>
</head>
<body>
  <input type="button" id="r1" onclick="rated()" onmouseover="rate(this)" onmouseout="unrate(this)" value="1" />
  <input type="button" id="r2" onclick="rated()" onmouseover="rate(this)" onmouseout="unrate(this)" value="2" />
  <input type="button" id="r3" onclick="rated()" onmouseover="rate(this)" onmouseout="unrate(this)" value="3" />
  <input type="button" id="r4" onclick="rated()" onmouseover="rate(this)" onmouseout="unrate(this)" value="4" />
  <input type="button" id="r5" onclick="rated()" onmouseover="rate(this)" onmouseout="unrate(this)" value="5" />
</body>
</html>

Du schriebst unter 1), dass du Probleme damit hast, die Werte nach einem Submit auszulesen. Für dich relevant sind zwei HTTP-Request-Methoden über welche die Informationen übermittelt werden können; GET und POST genannt. GET übermittelt den Spaß angehängt an die URI, POST über einen dafür vorgesehenen Bereich im HTTP-Header. Nun hast du mehrere Möglichkeiten, den HTTP-Request auszulösen und die Daten zu übertragen. Dies geht zum Beispiel über einen herkömmlichen Submit (z. B. über JavaScript oder als Submit-Button (siehe auch HTML-Formulare)) oder über Ajax (dann könntest du dir z. B. den <form>-Tag auch sparen und an der Stelle des Kommentars im Code ansetzen). Ich habe keine Ahnung welche Möglichkeiten Struts genau bietet, da ich wenig mit Java zutun habe. Mit einem grundlegenden Verständnis, wie die Daten übermittelt werden, sollte es dir allerdings leichter fallen, in Erfahrung zu bringen, wie du das mit Struts umsetzt (Stichworte: GET / POST). Wenn du die Daten über Post überträgst, könntest du mit einem hidden-Feld arbeiten, welchem in der rated-Funktion der aktuelle Wert zugewiesen wird.

Wie du das ganze mit Bildern machst, findest du schnell selbst heraus (wenn du ein Bild für eine Bewertung von 0 haben möchtest, musst du dir die for-Schleifen überarbeiten - sofern du für 0 Sterne keine 1 übergeben haben möchtest).


Gruß
little
 
Hi little_Newbie,

Du schriebst unter 1), dass du Probleme damit hast, die Werte nach einem Submit auszulesen. Für dich relevant sind zwei HTTP-Request-Methoden über welche die Informationen übermittelt werden können; GET und POST genannt. GET übermittelt den Spaß angehängt an die URI, POST über einen dafür vorgesehenen Bereich im HTTP-Header. Nun hast du mehrere Möglichkeiten, den HTTP-Request auszulösen und die Daten zu übertragen. Dies geht zum Beispiel über einen herkömmlichen Submit (z. B. über JavaScript oder als Submit-Button (siehe auch HTML-Formulare)) oder über Ajax (dann könntest du dir z. B. den <form>-Tag auch sparen und an der Stelle des Kommentars im Code ansetzen). Ich habe keine Ahnung welche Möglichkeiten Struts genau bietet, da ich wenig mit Java zutun habe. Mit einem grundlegenden Verständnis, wie die Daten übermittelt werden, sollte es dir allerdings leichter fallen, in Erfahrung zu bringen, wie du das mit Struts umsetzt (Stichworte: GET / POST).
Zum Vergrößern anklicken....
Jo, ich hab mittlerweile rausgefunden wie ich an das HttpRequest Objekt rankomme. Da steht alles drin.

Wenn du die Daten über Post überträgst, könntest du mit einem hidden-Feld arbeiten, welchem in der rated-Funktion der aktuelle Wert zugewiesen wird.
Zum Vergrößern anklicken....

Okay also ein Button stellt selbst kein Value dar. Gut dann eben mit Hidden Feldern.

Wie du das ganze mit Bildern machst, findest du schnell selbst heraus (wenn du ein Bild für eine Bewertung von 0 haben möchtest, musst du dir die for-Schleifen überarbeiten - sofern du für 0 Sterne keine 1 übergeben haben möchtest).
Zum Vergrößern anklicken....

Okay, ich sehs ja schon teilweise in deinem Code. Ich denk ich kriegs hin ab hier. Ich hätte mich nur nie und nimmer jetzt auch noch mit JS beschäftigt ^^ Hab in den letzten 2 Wochen Struts2 und Hibernate "gelernt" - die Funktion hätte ich weggelassen ohne deine JS Vorlage hier ;)

cu
serow
 
Um antworten zu können musst du eingeloggt sein.
Zurück
Oben