Discussion :

[ShinJava]

Bonjour tout le monde,
J'espere que vous allez bien.

J'aimerais faire un truc assez simple en javascript mais je comprend pas comment m'y prendre et par quoi commencer.

Alors, j'ai un système de commentaire en dessous d'un article et les utilisateurs auront le choix d'afficher soit les 10 ou 20 derniers commentaires via un lien (10 ou 20). Les commentaires sont stockés en base de données.

En php et HTML (avec l'ancre) c'est super facile à faire. Mais le problème de l'ancre c'est que la page se raffraichi completement (on le voit bien sous IE, on arrive en haut de la page puis à l'ancre, cela dure quelques millisecondes).

J'aimerais ne plus faire ce genre de raffraichissement (le garder uniquement pour ceux qui n'ont pas JS d'activer, j'imagine qu'il faut utiliser le onClick pour ca).

Bien evidemment, j'ai fais des recherches avant, mais les solutions proposé sont generalement avec des bouton de formulaires ou en iframe (pourtant j'ai deja vu des sites qu'ils ne l'utilisaient pas). Il y a aussi l'Ajax qui est souvent ressorti, mais apparement on peut faire cela sans forcement utiliser Ajax (est-ce que c'est vrai ?).
Voila voila,
J'aurais juste besoin de conseil pour bien commencer (technologie a utiliser ou tuto).

Merci d'avance et bonne journée

++
ShinJava

[Sergejack]

Tu peux à la génération php mettre les 10 premiers commentaires dans un div, les 10 suivant dans un autre div, le tout dans un div parent.

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
 
 
<div id="id_divparent">
 
<div id="id_10com">
[<10 premiers commentaires>]
</div>
<div id="id_20com">
[<10 commentaires suivants>]
</div>
 
</div>

Où bon te semble dans ta page fais un lien href="javascript:montre10()" et respectivement href="javascript:montre20()" où tu souhaites permettre l'affichage de 10 ou 20 commentaires.

A la fin de ta bage (avant la balise de clotûre html)

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
 
<script language="javascript1.3">
<!--
 
com10 = document.getElementById("id_10com");
com10Parent = com10.parentNode;
 
com10Parent.removeChild(com10);
 
com20 = document.getElementById("id_20com");
com20Parent = com20.parentNode;
 
com20Parent.removeChild(com20);
 
show10 = false;
show20 = false;
 
function montre10() {
 if (show10) return;
 com10Parent.appendChild(com10);
 show10 = true;
}
 
function montre20() {
 montre10();
 if (show20) return;
 com10Parent.appendChild(com20);
 show20 = true;
}
-->
</script>

[ShinJava]

Merci a toi. C'est vrai que c'est une solution à utiliser. Mais j'aimerais quelque chose de plus dynamique. Au lieu de stocker les variables dans une div, j'aimerais vraiment aller les chercher dans une base de donnée.
En fait je voudrais qu'a chaque fois qu'on clique sur le lien 10 ou 20, la partie "commentaire" se recharge grâce aux valeurs stockés dans la BDD.

Merci de pouvoir m'aiguiller.

Bonne journée

++
ShinJava

[Sergejack]

Merci a toi. C'est vrai que c'est une solution à utiliser. Mais j'aimerais quelque chose de plus dynamique. Au lieu de stocker les variables dans une div, j'aimerais vraiment aller les chercher dans une base de donnée.
En fait je voudrais qu'a chaque fois qu'on clique sur le lien 10 ou 20, la partie "commentaire" se recharge grâce aux valeurs stockés dans la BDD.

Merci de pouvoir m'aiguiller.

Bonne journée

++
ShinJava

Alors il te faut soit utiliser Ajax, soit crée des scripts dynamiquement dont les sourcs sont des pages php.

[ShinJava]

soit crée des scripts dynamiquement dont les sourcs sont des pages php.

Pourrais-tu être un peu plus précis si ca ne te gène pas? Parce que là j'ai un peu de mal pour m'y prendre...

Merci d'avance

++
ShinJava

[Sergejack]

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
 
 
function Reload_script(scriptID, source) {
	var head = document.getElementsByTagName('head').item(0);
	var old  = document.getElementById(scriptID);
	if (old) head.removeChild(old);
 
	script = document.createElement('script');
	var now= new Date();
	source+="&now="+now.valueOf();
	script.src = source;
	script.type = 'text/javascript';
	script.defer = true;
	script.id = scriptID;
	void(head.appendChild(script));
}

Code :

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

1
2
3
 
 
Reload_script("commentaire10", "commentaires.php?nombre=10");

Et commentaires.php?nombre=10 génère un script javais script qui une fois excécuté va crée et rajouter dynamiquement tes commentaires au document tree.
Tu as de la lecture sur le sujet.

[ShinJava]

Re salut,
C'est sympa de m'avoir donné du code.
Jvais l'analyser et essayé de le comprendre.

Par contre j'ai copié collé ton code, renommer ma page en commentaires.php en prenant en compte bien sur la valeur de $_GET['nombre'], puis j'ai essayé de l'appeler de la manière suivante :

Code :

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

<a href = "javascript:Reload_script('commentaire10', 'commentaires.php?nombre=10');return false;">Afficher 10 commentaires</a>

Mais cela n'a pas fonctionné... ai-je un problème de syntaxe ?
Je relis plusieurs doc de Javascript là.

Merci d'avance

++
ShinJava

[Sergejack]

Commentaires.php est supossé écrire du javascript seulement.
Si c'est selon toi déjà le cas, copie colle son output ici.

[ShinJava]

Houla j'ai pas fait ce qu'il fallait alors,
J'ai rajouté ton script dans mon fichier php directement (avec la news et les commentaires) en pensant qu'en appelant ce script cela aller changer le nombre de mes commentaires.
Je vais arreter de t'ennuyer plus longtemps, je veux pas abuser, tu as était super patient avec moi.
Je vais etudier les pistes que tu m'as donnée.

Par contre je trouve pas de lien et tutoriaux expliquant comment recharger juste un morceau de page en y changeant les données grace a un appel à la base de donnée. (en javascript bien sur).

Merci encore pour tout ce que tu as fait, y'a quelques zones d'ombres qui se sont eclaircies.

++
ShinJava

[ShinJava]

Finalement, jme suis tourné vers une solution Ajax.
C'est pas trop dur a mettre en place.

Merci pour tout

++
ShinJava