Discussion :

[moimp]

Bonjour,
Lorsque je clique sur un emplacement aléatoire en dehors du bouton qui déclenche normalement l’événement la fonction définie dans le onclick est appelée. Ce n'est pas systématique et je n'arrive pas à discerner les cas où ceci se produit. Je pense qu'il y a une interférence avec un autre script. J'ai pensé remplacer cette appel par un écouteur pour contrôler l'événement déclencheur mais dans ce cas, je ne sais pas comment transmettre l'argument de la fonction.
Source html:

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
19
20
21
22
23
24
25
26
27
28
29
<form method='post' action="" class="L displCard" style="padding:5px 10px;">
	<input type="hidden" name="id" value="120" />
	<fieldset><legend>Conjoint</legend>
		<p class="note">Vous pouvez modifier les champs grisés après avoir fait un double clic dessus.</p>
	<div class="multiCols">
		<div class="div1" style="margin:0;">
			<label>Prénom</label><input type="text" name="prenom" value="Nathalie" readonly /><br/>
			<label>Nom</label><input type="text" name="nom" value="Xxx" readonly /><br/>
		</div>
		<div class="div2">
			<label>Tél. portable</label><input type="text" name="tel_portable" value="" readonly /><br/>
			<label>Tél. travail</label><input type="text" name="tel_travail" value="" readonly /><br/>
			<label>Courriel</label><input type="text" name="courriel" value="" readonly /><br/>
		</div>
	</div>
	<!-- Appel de la page delFamilyMember.php -->
	<p style="width:480px;" class="center"><input type="submit" id='del' value="Effacer" onclick='confirmBeforeDel({"id":"251","prenom":"Nathalie","nom":"Xxx","courriel":null,"tel_travail":null,"tel_portable":null})' /></p>
		</fieldset>
	<fieldset><legend>Enfants</legend>
		<p class="note">Les lignes en italiques correspondent aux enfants du conjoint.</p>
		<table>
			<thead><tr><th>Prénom</th><th>Nom</th><th>Date de naissance</th><th>Tél. portable</th><th>Tél. travail</th><th>Courriel</th><th></th><th></th><td></td></tr></thead><tbody><tr><td colspan="9" style='text-align:center;'><i>Ce tableau ne contient aucune information.</i></td></tr></tbody>			<tr><td colspan="9" class="center"><input type="submit" value="Nouveau" formaction="parentPage.php?childPageKey=6&relation=9" /></td></tr>
		</table>
	</fieldset>
</form>
 
<script>
        const message   = "Etes-vous sûr de vouloir effacer %s*?";
</script>

Dans cet exemple, le tableau est vide mais lorsqu'il ne l'est pas, il contient un td comme ceci:

Code html :

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

<td><img src='del.png' onclick='confirmBeforeDel(" . json_encode($child) . ")' /></td>

Fichier JavaScript:

Code js :

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

1
2
3
4
5
6
7
8
9
10
11
"use strict";
 
const mainForm	= document.querySelector('.displCard');
 
// Effacement d'un membre de la famille
function confirmBeforeDel(person) {
	if ( confirm(message.replace('%s', person.prenom+' '+person.nom)) ) {
		mainForm.action = "delFamilyMember.php?id="+person.id;
		mainForm.submit();
	}
}

[Invité]

Bonjour,

si tu ne montres pas une page en ligne (qu'on puisse tester), ça va être difficile d'identifier le problème.

[moimp]

Déjà, j'ai indiqué qu'il pouvait y avoir interférence avec un autre script sans le joindre. Donc le voici. J'ai des doutes sur l'événement onblur.

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
 
"use strict";
 
const
	inclForm		= document.querySelector('.displCard')
	, inputs		= document.querySelectorAll('.displCard input:not([name=\'pays\']), .displCard textarea')
	;
 
// Modification des champs
// #######################
 
function handleOnDblClick() {
	this.readOnly = false;
	this.select();
}
 
function handleOnBlur() {
	this.readOnly = true;
	inclForm.action = 'editField.php?field='+this.name;
	inclForm.submit();
}
 
function handleKeyDown(e) {
	if ( e.keyCode == 8 && this.hasAttribute('readonly') ) { e.preventDefault(); }
	if ( e.keyCode == 13 && this.type != 'textarea' ) {
		inclForm.action = 'editField.php?field='+this.name;
		inclForm.submit();
	}
}
 
for (let i=0, max=inputs.length; i<max; i++) {
	if ( inputs[i].type == 'submit' ) continue;
	inputs[i].ondblclick	= handleOnDblClick;
	inputs[i].onblur		= handleOnBlur;
	inputs[i].onkeydown		= handleKeyDown;
}

Bonjour,
si tu ne montres pas une page en ligne (qu'on puisse tester), ça va être difficile d'identifier le problème.

Là, ça va être un peu plus long, car le site n'est pas en production et il faut que je fasse une maquette.

[SpaceFrog]

ça peut être une question d'imbrication de balise => du coup il faudra stopper la propagation
ça peut être une balise mal fermée ...

[moimp]

ça peut être une question d'imbrication de balise => du coup il faudra stopper la propagation

J'ai essayé mais du coup mon code ne fonctionne plus sur double clic sur un champ. Je pense que je n'ai pas arrêter la propagation correctement ou au bon endroit.

ça peut être une balise mal fermée ...

J'ai passé mon code au validateur W3C, ce qui m'a effectivement permis de repérer des balises non refermées dans d'autres parties du code. Malheureusement cette vérification et ces corrections n'ont eu aucune influence sur mon problème actuel.

Premier fichier commun:

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
"use strict";
 
const
	inclForm		= document.querySelector('.displCard')
	, inputs		= document.querySelectorAll('.displCard input:not([name=\'pays\']), .displCard textarea')
	;
 
// Modification des champs
// #######################
 
function handleOnDblClick() {
	this.readOnly = false;
	this.select();
}
 
function handleOnBlur() {
	this.readOnly = true;
	this.event.stopPropagation(); // Nouvelle ligne
	inclForm.action = 'editField.php?field='+this.name;
	inclForm.submit();
}
 
function handleKeyDown(e) {
	if ( e.keyCode == 8 && this.hasAttribute('readonly') ) { e.preventDefault(); }
	if ( e.keyCode == 13 && this.type != 'textarea' ) {
		this.event.stopPropagation(); // Nouvelle ligne
		inclForm.action = 'editField.php?field='+this.name;
		inclForm.submit();
	}
}
 
for (let i=0, max=inputs.length; i<max; i++) {
	if ( inputs[i].type == 'submit' ) continue;
	inputs[i].ondblclick	= handleOnDblClick;
	inputs[i].onblur		= handleOnBlur;
	inputs[i].onkeydown		= handleKeyDown;
}

Fichier propre à la page:

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
"use strict";
 
const
	mainForm	= document.querySelector('.displCard');
 
// Modification des enfants
function callEditFamilyMember(id, relation) {
	mainForm.action = "parentPage.php?childPageKey=6&id="+id+"&relation="+relation;
	mainForm.submit();
}
 
// Effacement d'un membre de la famille
function confirmBeforeDel(person) {
	this.event.stopPropagation(); // Nouvelle ligne
	if ( confirm(message.replace('%s', person.prenom+' '+person.nom)) ) {
		mainForm.action = "delFamilyMember.php?id="+person.id;
		mainForm.submit();
	}
}

[moimp]

Je complète pour @jreaux62.

si tu ne montres pas une page en ligne (qu'on puisse tester), ça va être difficile d'identifier le problème.

La mise en ligne est retardée par cette autre question.