Discussion :

[ramone]

Bonjour,

J'utilise un formulaire pour faire une recherche avec une zone texte un bouton pour envoyer.

Code :

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

1
2
<input name="recherche_ref" id="input_rech" type="text" size="20" onKeyPress="if(event.keyCode == 13)envoiRech();" />
<input name="Recherche" id="rech_donnee" type="image"  src="images/search-icon-green.gif" title="Recherche" onClick="envoiRech();" />

Les utilisateurs ont la sale habitude de faire Enter au clavier dans la zone texte à la place de cliquer sur le bouton. J'ai donc rajouter un évenement onKeyPress dans la zone texte.

Dans IE, lorsqu'on saisit une valeur dans la zone texte et que l'on fait Enter la fonction envoiRech() est bien exectuée mais il me exectute également une autre fonction annule() qui se trouve sur un autre bouton du formulaire ! Le focus est pourtant bien dans la zone texte.

Le problème ne se produit pas sous Firefox.

Que fait pour ne pas exécuter la deuxième fonction lorsque l'utilisateur fait ENTER ?

[andry.aime]

Bonsoir,

mais il me exectute également une autre fonction annule() qui se trouve sur un autre bouton du formulaire !

Le bouton est il un submit? on ne voit pas les fonctions annule et envoiRech().
Montre nous un peu plus sur ton formulaire et ton code JS.

A+.

[ramone]

Il s'agit de fonctions qui utilise AJAX.
Un tableau contenant des données et des boutons avec évenement sont crées à la volée avec du javascript

Fonctions envoiRech et afficheArticle :

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
//envoi la requête lorsque l'utilisateur a cliqué sur la loupe ou effectué ENTER dans la zone texte
function envoiRech(onglet) {
	var saisieUtilisateur = ($('input_rech').value);
	saisieUtilisateur = trimEspace(saisieUtilisateur);
	($('filtre_o0').selected) = true;
	FILTRE = '';
	var crit_rech = detectCritRech();
	var request = initReq("POST",URL_DONNEES_ARTICLE,true);
	request.onreadystatechange = function() {
		afficheArticle(request,GLOBAL_USER,onglet);
	}
	request.send("ref_art="+saisieUtilisateur+"&user="+GLOBAL_USER+"&limit=1&order="+GLOBAL_ORDER+"&crit_rech="+crit_rech+"&onglet="+onglet) ;	
}
//Intercepte la réponse du serveur et appelle les différentes fonctions selon le contenu de celle-ci
function afficheArticle(request,user,onglet){
	//dès que l'on commence à recevoir la réponse et qu'il n'y a pas eu d'erreur sur le serveur
	if(4 == request.readyState && 200 == request.status ){
		var _xml = request.responseXML;
		if($T(_xml,'donnees_article')[0].hasChildNodes()){
			if($T(_xml,'donnees_article')[0].firstChild.nodeName != 'erreur'){
				$('table_articles').style.display = "block" ;
				$('no_data').style.display = "none" ;
				afficherLiens(_xml,user,onglet);									
				afficherDonneesArticle(_xml,user) ;
			}
		}else{
			$('table_articles').style.display = "none" ;
			afficherLiens(_xml,user,onglet);
			$('no_data').style.display = "block" ;
		}
		$('input_rech').focus();
	}
}

Fonctions pour annuleCertif avec creerBoutonAnnuleCertif

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
//créer et de retourner une cellule contenant le bouton pour annuler la certification en cours
function creerBoutonAnnuleCertif(element) {
	var cellule = document.createElement("td");
	var etape = $T(element,'etape')[0].firstChild.nodeValue;
	if (etape >= 10){
		var IdInput = $T(element,'pk_num_article')[0].firstChild.nodeValue;
		var reference = $T(element,'reference')[0].firstChild.nodeValue;
		var input_bt = creerInputImage('redemarrer la certif',etape,'','images/arrow_rotate_clockwise.png','border:0px');
		addListener(input_bt,'click',function(){annuleCertif(IdInput,reference)})
		cellule.appendChild(input_bt);
		cellule.blur();
	}
	return cellule;
}
//Validation et envoi de la requête au serveur
function annuleCertif(num_article,reference){
		alert("mais pourquoi");
	if(confirm("Etes-vous sûr de vouloir annuler la certification sur la référence "+reference+" ? ")){
		var saisie= prompt("Veuillez saisir les raisons de l'annulation :");
		if (saisie != null){
			var request = initReq("POST",URL_ANNULE_CERTIF,true);
			request.onreadystatechange = function() {
				modifierLigne(request);
			}
			request.send("num_article="+num_article+"&saisie="+saisie) ;
		}
	}
}

[andry.aime]

1-

var cellule = document.createElement("td");

N'utilise pas createElement pour créer un td, regarde la faq http://javascript.developpez.com/faq...ble#AjoutLigne
2- Un td n'a pas de méthode blur();
3- On ne connais pas quel bibliothèque tu utilises.

[ramone]

Merci pour tes remarques :
1) Est ce que je gagne en performance ? ou c'est juste de la cosmétique ?
2) J'ai voulu faire un test mais effectivement c'est une erreur. J'ai oublié de l'enlever.
3) Je n'utilise pas de bibliothèque mais j'utilise les fonctions natives du DOM. Est-ce que tu en as une à me proposer pour faire ceci ?

Mais tout ceci ne nous fait pas avancer beaucoup.
Pour moi, le problème n'est pas dans l'exécution de ces fonctions mais dans l'appel de ces fonctions.
Pourquoi, dans IE, lorsque je fais ENTER, il y a 2 appels de fonctions ? un problème de focus ?

[andry.aime]

Merci pour tes remarques :
1) Est ce que je gagne en performance ? ou c'est juste de la cosmétique ?

C'est cross-browser.

Le bouton est il un submit?

Si c'est le cas, mets un return false après l'appel des fonctions.

Code :

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

1
2
<input name="recherche_ref" id="input_rech" type="text" size="20" onKeyPress="if(event.keyCode == 13)envoiRech(); return false;" />
<input name="Recherche" id="rech_donnee" type="image"  src="images/search-icon-green.gif" title="Recherche" onClick="envoiRech(); return false;" />

A+.

[ramone]

Envoyé par andry.aime
Le bouton est il un submit?

Non, il s'agit un bouton de type="image". Nous le voyons dans le 2ème input du Code. L'appel de fonction effectuée par erreur sur la fonction annuleCertif() est également de type Image.

J'ai essayé de transformer le bouton en type Submit mais le problème est toujours le même.
J'ai rajouté les return false après les appels de fonctions et il n'est plus possible de saisir du texte dans la zone texte !

A+

[andry.aime]

Code :

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

onKeyPress="if(event.keyCode == 13){envoiRech(); return false;}"

[ramone]

Effectivement cela va mieux avoir les {}. J'aurai dû le voir !

Ok, avec le return false la 2ème fonction n'est plus appelée.
Le problème est résolu.

Merci infiniment pour ton aide.
Je ferme la discussion.