document.write() et innerHTML interdit ?

**andry.aime** · 26/08/2009, 12h42

@Bovino
Des problèmes sur le forum AJAX sont souvent à cause de la création d'un select avec innerHTML pour les listes liées. La valeur du 2ème select n'est pas envoyé par le formulaire.

**Bovino** · 26/08/2009, 12h49

C'est surtout l'attribution dynamique de la propriété name qui est problématique :

Code :

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

1
2
var monInput = document.getElementById('un_input');
monInput.name = 'test';

Mais il semble que innerHTML fonctionne correctement, voir la page d'exemple plus haut, testée avec IE6 et qui fonctionne.

**Sunchaser** · 26/08/2009, 13h05

Envoyé par Bovino

Ben si justement...

Fonctionne correctement avec IE6 (page de test).

J'ai choisi "café sans sucre", comment je fais maintenant ?
Je mets une cléf USB, je clique sur "Envoyer" et je verse dans une tasse, c'est ca ? ...

**Bovino** · 26/08/2009, 13h19

Envoyé par Sunchaser

J'ai choisi "café sans sucre", comment je fais maintenant ?
Je mets une cléf USB, je clique sur "Envoyer" et je verse dans une tasse, c'est ca ? ...

Tant que j'ai pas reçu le virement, tu ne pourras rien obtenir

**kernelfailure** · 27/08/2009, 00h43

Envoyé par Sunchaser

J'ai choisi "café sans sucre", comment je fais maintenant ?
Je mets une cléf USB, je clique sur "Envoyer" et je verse dans une tasse, c'est ca ? ...

Oui, mais il faut avoir un porte goblet

Je reviens avec une découverte sous DOM qui décoince IE7, fonctionne sous FF et Safari (ou du moins, ne bloque pas ces derniers). Cela ne convient toujours pas à IE5 Mac (

Je m'acharne).

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
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
 <HEAD>
  <TITLE> New Document </TITLE>
  <SCRIPT LANGUAGE="JavaScript">
  <!--
	var withDOM = true;
 
	function grpUpdate(liquid) {
		var id = document.getElementById("Grp");
 
		withDOM = document.getElementById("avecDOM");
		withDOM = withDOM.options[withDOM.options.selectedIndex].value == '1'?true:false;
 
		if( !withDOM ) {
			var what = '';
			switch(liquid) {
				case 'cafe':
					what = "<select name='liquidCafe' onchange='alert(this.options[this.options.selectedIndex].value)'><option value=''>-- Faites votre choix sans DOM --</option><option value='sucre'>Cafe sucre</option><option value='sans sucre'>Cafe sans sucre</option></select>";
					break;
				case 'cacao':
					what = "<select name='liquidCacao' onchange='alert(this.options[this.options.selectedIndex].value)'><option value=''>-- Faites votre choix sans DOM --</option><option value='sucre'>Cacao sucre</option><option value='sans sucre'>Cacao sans sucre</option></select>";
					break;
			}
			alert( document.getElementById("forma").length );
			id.innerHTML = what;
			alert( document.getElementById("forma").length );
 
		} else {
 
			while(id.hasChildNodes()) { id.removeChild(id.lastChild) }
 
			var sel = document.createElement('select');
			sel.setAttributeNode(document.createAttribute('Name')); // name avec un N !!! (IE hack) 
			var arr = [];
			switch(liquid) {
				case 'cafe':
					sel.setAttribute('name','liquidCafe');
					arr.push(['sucre','Cafe sucre']);
					arr.push(['sans sucre','Cafe sans sucre']);
					break;
				case 'cacao':
					sel.setAttribute('name','liquidCacao');
					arr.push(['sucre','Cacao sucre']);
					arr.push(['sans sucre','Cacao sans sucre']);
					break;
			}
			sel.setAttributeNode(document.createAttribute('onchange'));
			sel.setAttribute('onchange','alert(this.options[this.options.selectedIndex].value)');
 
			sel.appendChild(document.createElement('option'));
			sel.lastChild.setAttributeNode(document.createAttribute('value'));
			sel.lastChild.setAttribute('value','');
			sel.lastChild.appendChild(document.createTextNode('-- Faites votre choix avec DOM --'));
 
			for(all in arr) {
				sel.appendChild(document.createElement('option'));
				sel.lastChild.setAttributeNode(document.createAttribute('value'));
				sel.lastChild.setAttribute('value',arr[all][0]);
				sel.lastChild.appendChild(document.createTextNode(arr[all][1]));
			}
 
			id.appendChild(sel);
		}
		return true;
	}
  //-->
  </SCRIPT>
 </HEAD>
 
 <BODY>
  <FORM id="forma" METHOD=POST ACTION="">
		<select id="avecDOM" name="avecDOM"><option value="0" selected>Sans DOM</option><option value="1">Avec DOM</option></select><br /><br />
 
	Cafe : <INPUT TYPE="radio" NAME="radioGrp" value="cafe" onclick="return grpUpdate(this.value)" />&nbsp;&nbsp;&nbsp;
	Cacao : <INPUT TYPE="radio" NAME="radioGrp" value="cacao" onclick="return grpUpdate(this.value)" />
	<div id="Grp"></div>
	<INPUT TYPE="submit" name="liquid" value="Envoyer" />
  </FORM>
 </BODY>
</HTML>
<?
if( isset($_POST['liquid']) ) {
	foreach($_POST as $k => $v) {
		echo $k." = ".$v."<br />";
	}
}
?>

Le tour de passe-passe se situe sur le createAttribute pour l'attribut 'name'. En l'inscrivant avec un 'N' majuscule, l'attribut est bien créé via DOM, et cette fois-ci, IE7 répond correctement.

Bovino, je te solicites pour savoir si tu pourrais tester ce Workaround sur IE6 par curiosité. En te remerciant d'avance.

**Bovino** · 27/08/2009, 13h57

Effectivement, l'astuce semble consister dans le fait que JavaScript est sensible à la casse et pas HTML. Du coup, attribuer Name comme attribut en JavaScript est OK pour IE car Name != name, mais pour HTML, il s'agit du même attribut !

En tout cas, ton code fonctionne avec IE6. Page d'exemple.

**kernelfailure** · 27/08/2009, 14h07

Etonnant ce IE

Merci pour ton feedback.

Voilà une astuce qui va retirer pas mal de verrue dans certains sources

document.write() et innerHTML interdit ?

JavaScript

Discussions similaires

Partager

Partager