11523 sujets

JavaScript, DOM et API Web HTML5

[Résolu] IE n'envoie pas, par "post", les ajouts dynamiques

Bonjour
J'ai un souci avec IE ( c'est une manière de dire que ça marche avec Firefox et Chrome et peut-être d'autres)
J'ai une application Web présentant plusieurs configuration distinctes suivant les besoins ou autorisations des utilisateurs.
Pour connecter des utilisateur à cette application j'utilise un formulaire "dynamique" de connexion.
1 - Dans un premier temps le formulaire (tableau) demande le nom d'utilisateur et le mot de passe. Le tableau contient aussi une TD vide muni d'un ID
2 - Dès que je connais le mot de passe, je fais une requête Ajax pour interroge l'annuaire LDAP (script PHP), pour avoir des informations sur la ou les configurations susceptibles de concerner l'utilisateur.
3 - Après le retour (visuellement instantané) de la réponse (un JSON), je crée des boutons-radios avec LABEL, NAME et ID (à l'aide de createElement et setAttribute) que j'ajoute, un par un, au TD que j'avais laissé vide à cet effet (grâce à appendChild).
4 - Ainsi l'utilisateur peut choisir la configuration qu'il souhaite puis valider son formulaire.
5 - Je reçoit le contenu du formulaire par POST et j'aiguille l'utilisateur suivant son souhait, pouvu que le mot de passe soit correct.
Ceci fonctionne parfaitement, au moins avec Firefox et Chrome, en revanche, avec IE, mon script retourne le formulaire à remplir une nouvelle fois.
En fait, lorsque, je fais un var_dump($_POST) lors de la réception du formulaire je constate que, lorsque l'envoi est réalise par IE, je trouve bien le nom d'utilisateur et le mot de passe mais je n'ai pas reçu le champ concernant le choix de la configuration souhaitée. Alors que Firefox et Chrome m'envoient bien les trois champs attendus.
Pourtant les boutons-radio sont bien présent et actif et le debugger d'Internet-Explorer me les montre bien comme créés correctement.
Tout ce passe comme si IE avait enregistré les champs à renvoyer, lors de l'ouverture du formulaire, puis ne s'était pas soucié de l'état réel du formulaire au moment du SUBMIT .
Mon problème serait-il connu ou aurais-je oublié quelque chose ?
Certes je peux conseiller l'usage de Firefox mais il est toujours mieux d'avoir une page qui fonctionne sur tous les navigateurs.
L'un d'entre vous saurait-il me conseiller quelque piste ?

Merci
_Rainbow
Modifié par _rainbow (21 Nov 2014 - 15:00)
Modérateur
Salut,

Je n'ai pas IE sous la main (à moins de lancer une VM), mais quelle version d'IE ? Est ce que ton code est valide ? Est ce que dans la console, tu as aucun message d'erreur ? Aussi, peux tu me montrer le code du point 3 stp ?
a écrit :

3 - Après le retour (visuellement instantané) de la réponse (un JSON), je crée des boutons-radios avec LABEL, NAME et ID (à l'aide de createElement et setAttribute) que j'ajoute, un par un, au TD que j'avais laissé vide à cet effet (grâce à appendChild).
Est-ce que tous les champs à envoyer ont bien un attribut name ?

Je suspecte plutôt ce genre d'oubli; avec seulement un id, ça ne marche pas toujours donc mieux vaut toujours avoir les deux.
Bonjour

Ci-dessous le code JS de création dynamique du jeu de boutons-radios dans la cellule : TD id="propose_configs"

Il y a effectivement un NAME, sinon je ne pourrais pas, même avec Firefox ou Chrome, récupérer cette partie du formulaire.
L'ID ne sert que de cible pour le clic sur le LABEL correspondant.
Le Booléen deja_chk sert à ne pas cocher uniquement les boutons-radios, à partir du second.
Le String.fromCharCode(0x00a0) est un espace insécable ; ici pour éviter un retour à la ligne au milieu d'un LABEL.
Le SPAN class="bloc" permet de mettre le bouton-radio dans un display:inline-block pour éviter d'avoir le bouton-radio en fin de ligne et le LABEL en début de ligne suivante
Le bouton SUBMIT, était inactif avant la création des boutons-radios, d'où son activation : ('bt_submit').disabled = false;


xhr.onreadystatechange = function() {
	if(xhr.readyState == 4 && xhr.status == 200) {
		var reponse = xhr.responseText;
		if (reponse != "NULL") {
			var choix;
			eval('choix = ' + reponse);
			var deja_chk = false;
			for (var i in choix) {
				var span = document.createElement('span');
					span.setAttribute("class","bloc");
					var radio = document.createElement('input');
						radio.setAttribute("type","radio");
						radio.setAttribute("id",'c_'+i);
						radio.setAttribute("name","choix_config");
						radio.setAttribute("value",""+i);
						if (!(deja_chk)) {
							radio.setAttribute("checked","checked");
						deja_chk = true;
						}
					span.appendChild(radio);	
					var lbl = document.createElement('label');
						lbl.setAttribute("for",'c_'+i);
						var txt = document.createTextNode(choix[i].replace(/\s/g,String.fromCharCode(0x00a0)));
						lbl.appendChild(txt);	
					span.appendChild(lbl);	
				document.getElementById('propose_configs').appendChild(span);
			}
			document.getElementById('bt_submit').disabled = false;
		}
	}
}
xhr.send(lesParams);


Merci
_Rainbow[/i]
Modifié par _rainbow (24 Nov 2014 - 10:48)
Bonjour

J'ai réussi à faire fonctionner correctement cette boite de connexion.

En regardant attentivement le DOM affiché par le débuggeur d'IE, j'ai constaté que mes boutons-radios n'étaient pas dans la FORM, mais c'était aussi le cas des INPUT TEXT du nom d'utilisateur et du mot de passe ; alors qu'ils y étaient tous bien dans la FORM avec Firefox et Chrome.
Toutefois, le plus étrange, étant que le nom d'utilisateur et le mot de passe, apparemment eux aussi hors de la FORM d'IE, étaient bien, eux, envoyés en POST par le formulaire.
Après avoir cherché attentivement si mes balises étaient bien imbriquées et bien fermées, je n'ai trouvé aucune anomalies. Mais bon ... ne jurons de rien.
Finalement, j'ai eu l'idée de "resserrer" mes balises FORM autour du tableau(TABLE) contenant tous ces contrôles, alors qu'elle étaient auparavant autour du FIELDSET qui contient la TABLE en question ainsi que quelques autres petites choses (LEGEND et diverses informations)
Et je dois constater que se "resserrement" a brusquement résolu mon problème.
Je crains d'avoir encore à vérifier mon balisage, quoique je n'y ai encore rien trouvé d'anormal.

Merci
Cordialement
_Rainbow
Sujet clos
Aller à