Discussion :

[Micke7]

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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.

[_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.

[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?

[Micke7]

[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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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>

[_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.

[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?

[_Mac_]

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

Tu le fais comment ton onclick ? Faut faire une truc du genre onclick="mafonction('1.2.3.4', 3, 'param3');"

[Micke7]

Attention c'est un peu crade
Voilà mon onclick

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
onclick="vote(<?php echo $donnees['id_news'] ?>,2,<?php echo $_SERVER['REMOTE_ADDR']; ?>)

[EDIT]C'est bon, cela fonctionne avec les quotes
Merci beaucoup;

[Micke7]

J'ai un nouveau petit probléme (encore, oui je sais ).
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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

Quelqu'un a une idée ?

[_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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

Ton JavaScript est étrange :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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