Discussion :

[Skunka]

Bonjour,

j'essaie d'ajouter du contenu html à ma page grâce à une fonction js, seulement, le contenu ne s'ajoute pas à la page, et j'ai une erreur qui s'affiche dans la console:



Les fonctions js (la première gère l'ajout du contenu, la seconde est une fonction appelé lors du clique sur un contenu ajouté):

Code javascript :

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
 
function AjoutCourse(newCourse){
	console.log(newCourse);
 
	var course = document.createElement('div');
		course.className = "lc-course";
 
		var etat = document.createElement('div');
			etat.className = "lc-course-etat";
			var input1 = document.createElement('input');
				input1.type = "checkbox";
				input1.value = newCourse.numCourse;
		etat.appendChild(input1);
	course.appendChild(etat);
 
		var courseNom = document.createElement('div');
			courseNom.className = "lc-course-nom";
			var form2 = document.createElement('form');
				form2.method = "POST";
				form2.action = "index.php?action=courseAfficher";
				form2.addEventListener('click', CourseAfficher(this)); //L251
				var input2 = document.createElement('input');
					input2.type = "hidden";
					input2.name = "numCourse";
					input2.value = newCourse.numCourse;
			form2.appendChild(input2);
				var nom = document.createTextNode(newCourse.nomCourse);
			form2.appendChild(nom);
		courseNom.appendChild(form2);
	course.appendChild(courseNom);
 
		var courseAvance = document.createElement('div');
			courseAvance.className = "lc-course-avance";
			var avance = document.createTextNode("0/0");
		courseAvance.appendChild(avance);
	course.appendChild(courseAvance);
 
		var courseMenu = document.createElement('div');
			courseMenu.className = "lc-course-menu";
			var span = document.createElement("span");
				span.className = "glyphicon glyphicon-option-vertical";
		courseMenu.appendChild(span);
	course.appendChild(courseMenu);
 
	document.body.appendChild(course);
} 
 
function CourseAfficher(form){
	form.submit(); //L279
}

Voici la construction de la page au cas où:

Code html :

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
 
<div class="lc-course">
	<div class="lc-course-etat">
		<input type="checkbox" value="<?php echo $c->getNumCourse();?>">
	</div>
	<div class="lc-course-nom">
		<form method="POST" action="index.php?action=courseAfficher" onclick="CourseAfficher(this)">
			<input type="hidden" name="numCourse" value="<?php echo $c->getNumCourse();?>">
			<?php echo $c->getNomCourse(); ?>
		</form>
	</div>
	<div class="lc-course-avance">
		<?php echo $c->getAvanceCourse()."/".count($c->getArticleCourse());?>
	</div>
	<div class="lc-course-menu">
		<span class="glyphicon glyphicon-option-vertical"></span>
	</div>
</div>

La fonction 'CourseAfficher' fonctionne pour le contenu déjà présent sur la page html lors du chargement.

Merci d'avance de votre aide.
Cordialement,
Skunka.

[CosmoKnacki]

Code :

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

<form method="POST" action="index.php?action=courseAfficher" onclick="CourseAfficher(this)">

Ici, this désigne l'élément form.

Code :

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

form2.addEventListener('click', CourseAfficher(this)); //L251

Mais dans ce contexte, this ne désigne pas l'élément form2 mais l'objet Window.

La meilleur solution est à mon avis de virer l'attribut onclick qui est désuet, et de mettre le gestionnaire d'événement dans ton javascript:

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
<form method="POST" action="index.php?action=courseAfficher" name="toto">
 
<!-- ... -->
 
<script>
document.forms['toto'].addEventListener('click', CourseAfficher);
//...
function AjoutCourse(newCourse) {
    //...
    form2.addEventListener('click', CourseAfficher);
    //...
}
 
function CourseAfficher(evt) {
    evt.target.submit();
}
</script>

---

Au passage, tu te donnes bien du mal avec ta fonction AjoutCourse à recréer pratiquement à l'identique un nœud déjà présent dans ton html: tu pourrais tout simplement le cloner et juste changer les quelques attributs qu'il n'a pas en commun avec l'original.

[Skunka]

Bonsoir et merci pour ta réponse,

J'ai essayé de suivre tout ça mais j'ai encore deux erreurs que je n'arrive pas à résoudre:


J'ai commenté la ligne 15 concernée:

Code javascript :

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
function AjoutCourse(num,nom){
	console.log(num + " " + nom);
 
	var courseClone = document.createElement('div');
	courseClone.class = "lc-course";
 
	var courseEtat = document.getElementById('lc-course-etat');
	var courseEtatClone = courseEtat.cloneNode(true);
	courseEtatClone.firstChild.value = num;
	courseClone.appendChild(courseEtatClone);
 
	var courseNom = document.getElementById('lc-course-nom');
	var courseNomClone = courseNom.cloneNode(true);
	console.log(courseNomClone);
	courseNomClone.firstChild.firstChild.value = num; // !! ERREUR !! 
	courseNomClone.firstChild.lastChild.value = nom;
	courseClone.appendChild(courseNomClone);
 
	var courseAvance = document.getElementById('lc-course-avance');
	var courseAvanceClone = courseAvance.cloneNode(true);
	courseAvanceClone.firstChild.contentText = "0/0";
	courseClone.appendChild(courseAvanceClone);
 
	var courseMenu = document.getElementByClassName('lc-course-menu');
	var courseMenuClone = courseMenu.cloneNide(true);
	courseClone.appendChild(courseMenuClone);
 
	document.body.appendChild(courseClone);
 
}

La <div> concernée:

Code HTML :

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

1
2
3
4
5
6
<div class="lc-course-nom" id="lc-course-nom">
	<form method="POST" name="formCourse" action="index.php?action=courseAfficher">
		<input type="hidden" name="numCourse" value="<?php echo $c->getNumCourse();?>">
		<p><h3><?php echo $c->getNomCourse(); ?></h3></p>
	</form>
</div>

La seconde, c'est que l'affichage d'une course ne se fait pas, une erreur m'est retourné: form.submit() is not a function.

Code javascript :

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

1
2
3
4
 
function CourseAfficher(form){
	form.submit();
}

Appelé grâce à:

Code javascript :

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

document.forms['formCourse'].addEventListener('click', Afficher);

Edit: Je viens de remarquer que l'eventListener ne s'applique qu'au formulaire de la première <div class="lc-course"> et non à tous.

[CosmoKnacki]

Je n'ai pas tout ton code html produit devant les yeux, mais je pense que tu devrais éviter de placer des attributs id dans les portions de code html que tu comptes cloner (une id étant par nature unique). Tu dois donc trouver un autre moyen d'atteindre les nœuds que tu souhaites sans utiliser la méthode getElementById (tu as l'embarras du choix: querySelector, getElementsByClassName, ...).

[Skunka]

Bonjour et désolé d'avoir mis autant de temps à répondre.

J'ai finis par réussir ce que je voulais, grâce à ton aide, alors merci!

Sujet résolu.