[AJAX] Notation étoile

Version imprimable

Bonjour à tous,

Voilà j'ai créé un site qui regroupe des vidéos. Sur une page il y a 10 news correspondant donc à 10 vidéos.
J'ai mis en place un systéme de notation par étoile mais le soucis et que ce systéme ne fonctionne que pour la news la plus récente de celles affichées. En effet, lorsque je passe la souris sur les étoiles des news autre que la premiére, rien ne se passe.
Voilà quelques morceaux de code :

Pages qui affiche les vidéos :
news.php

Code:

1
2
3
4
5
6
7
8
 
[...]
while ($donnees = mysql_fetch_assoc($reponse)){
[...]    
     $contenu = nl2br(stripslashes($donnees['contenu']));
    echo $contenu .'<br />';
     include("test.php"); <?php 
}

test.php

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
<script language="javascript" type="text/javascript">
<!--
 
  StarOutUrl='img/StarOut.gif';		//image par défaut
  StarOverUrl='img/StarOver.gif';		//image d'une étoile sélectionnée
  StarBaseId='Star';	//id de base des étoiles
  NbStar=5;	//nombre d'étoiles
 
LgtStarBaseId=StarBaseId.lastIndexOf('');
 
function StarOver(Star) {
	StarNb=Name2Nb(Star);
	for (i=1;i<(StarNb*1)+1;i++) {
		document.getElementById('Star'+i).src=StarOverUrl;
	}
}
 
function StarOut(Star) {
	StarNb=Name2Nb(Star);
	for (i=1;i<(StarNb*1)+1;i++) {
		document.getElementById('Star'+i).src=StarOutUrl;
	}
}
 
function Name2Nb(Star) {
	StarNb=Star.slice(LgtStarBaseId);
	return(StarNb);
} 
 
window.onload = function NotationSystem() {
  for (i=1;i<NbStar+1;i++) {
  	var img=document.getElementById('Star'+i);
  	var xhr = null; 
  	xhr = new XMLHttpRequest(); 
  	img.onclick = function(){
   xhr.open("GET","ajout_note.php?id_news=7&note="+Name2Nb(this.id),true);
   xhr.send("NULL");
   };
 
  	img.alt='Donner la note de '+i;
  	img.src	=StarOutUrl;
  	img.onmouseover	=function() {StarOver(this.id);};
  	img.onmouseout	=function() {StarOut(this.id);};
  }
}
 
 
-->
</script>
 
<img id="Star1" src="img/StarOut.gif" />
<img id="Star2" src="img/StarOut.gif" />
<img id="Star3" src="img/StarOut.gif" />
<img id="Star4" src="img/StarOut.gif" />
<img id="Star5" src="img/StarOut.gif" />

Je pense que c'est la window.onload = function NotationSystem() qui ne fonctionne que sur la premiére news.

04/02/2008, 21h32
_Mac_

Tu peux nous donner un extrait HTML complet avec des news et tes étoiles ?

Je pense que le pb c'est que tu te retrouves dans ta page avec plusieurs images portant le même id (<img id="Star1" src="img/StarOut.gif" /> ... <img id="Star1" src="img/StarOut.gif" />) ce qui est "interdit" : un id doit être unique dans une page Web. Comme il y en a plusieurs sur la page, le navigateur ne prend en compte que les premiers qu'il a trouvés.
04/02/2008, 21h41
Micke7

Aprés quelques recherche le window.onload pose bine probléme étant donné que celui ne peut être utilisé qu'une fois par page, et n'est donc pris en compte par le dernier appel, d'où l'impossibilité de le mettre dans une boucle...

Sinon _Mac_ est du code que tu me demande ou un lien vers la page en action?

[EDIT]Bon effectivement l'erreur provient des ID identiques sur la m^éme page :(
D'où un trés gros probléme, comment je vais gerer ces ID à l'intérieur d'une boucle??

voilà le nouveau code :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
 
<img id="1" src="img/StarOut.gif" onmouseover="modifEtoile(1);" onmouseout="initEtoile(1);" onclick="vote(1);"/>
<img id="2" src="img/StarOut.gif" onmouseover="modifEtoile(2);" onmouseout="initEtoile(2);" onclick="vote(2);"/>
<img id="3" src="img/StarOut.gif" onmouseover="modifEtoile(3);" onmouseout="initEtoile(3);" onclick="vote(3);"/>
<img id="4" src="img/StarOut.gif" onmouseover="modifEtoile(4);" onmouseout="initEtoile(4);" onclick="vote(4);"/>
<img id="5" src="img/StarOut.gif" onmouseover="modifEtoile(5);" onmouseout="initEtoile(5);" onclick="vote(5);"/>
 
<script language="javascript" type="text/javascript">
<!--
 
function modifEtoile(id){
  for (i=1;i<id+1;i++) {
		document.getElementById(i).src='img/StarOver.gif';
	}
}
 
function initEtoile(id){
  for (i=1;i<id+1;i++) {
		document.getElementById(i).src='img/StarOut.gif';
	}
}
 
function vote(id){
  xhr = new XMLHttpRequest(); 
  xhr.open("GET","ajout_note.php?id_news=7&note="+id,true);
  xhr.send("NULL");
}
 
 
-->
</script>

05/02/2008, 10h14
_Mac_

Oh, c'est pas bien compliqué : dans ta fonction NotationSystem(), au lieu de boucler sur les objets dont l'ID est 'Star' + i, tu boucles sur toutes les images et tu ne prends en compte que celles dont la source vaut StarOutUrl ou celles dont l'ID commence par "Star". Et à la génération du code HTML des images, tu mets n'importe quoi, genre <img id="Star1_XXX" src="img/StarOut.gif" /> avec XXX l'ID du film ou un incrément quelconque.
05/02/2008, 20h23
Micke7

Vraiment désolé, j'ai oublié de mettre que j'ai réussi à faire ce que je voulais.
Juste une derniére question, lors d'un évenement onclick j'aimerais appelé une fonction qui accepterait 3 paramétres, dont un qiu est uen adresse IP. Le probléme est que j'ai un soucis de ce coté : apparament l'enchainement de point n'est pas accepter.
Existe t-il une fonction (JS ou PHP) qui permette de retirer les points?
05/02/2008, 20h52
_Mac_

Citation:

Envoyé par Micke7

apparament l'enchainement de point n'est pas accepter.

8O Tu le fais comment ton onclick ? Faut faire une truc du genre onclick="mafonction('1.2.3.4', 3, 'param3');"
05/02/2008, 21h19
Micke7
Attention c'est un peu crade :lol:
Voilà mon onclick
Code:

1 2 onclick="vote(<?php echo $donnees['id_news'] ?>,2,<?php echo $_SERVER['REMOTE_ADDR']; ?>)
[EDIT]C'est bon, cela fonctionne avec les quotes:D
Merci beaucoup;

J'ai un nouveau petit probléme (encore, oui je sais :D ).
Je souhaites transmettre l'adresse IP à une page en php afin d'effectuer un enregistrement dans une table. Etant donné que cette adresse IP contient des points, je ne peux pas l'envoyer par la méthode GET (ou alors dites moi comment :)).
J'utilise donc la méthode POST mais cela ne fonctionne pas.

Voilà les codes :
Code:

1 2 3 4 5 6 7 8 function vote(id,noteN,ipP){ xhr = new XMLHttpRequest(); xhr.open("POST", "ajout_note.php", false); xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); var corps = "id_news=id&note=noteN&ip=ipP"; xhr.send(corps); }
Code:

mysql_query("INSERT INTO note VALUES(''," . $_POST['id_news'] . "," . $_POST['note'] . "," . $_POST['ip'] . ")");

Quelqu'un a une idée ? ;)

06/02/2008, 12h40
_Mac_

Oublie les points, c'est pas ça le pb, ça doit aussi passer en GET. Le pb, c'est qu'il faut considérer que c'est une chaîne de caractères, donc dans ta requête INSERT, il faut mettre des ' :

Code:

mysql_query("INSERT INTO note VALUES(''," . $_POST['id_news'] . "," . $_POST['note'] . ",'" . $_POST['ip'] . "')");

Ton JavaScript est étrange :

Code:

var corps = "id_news=" + id + "&note=" + noteN + "&ip=" + ipP;