Button non reconnu par IE dans un dialog

Version imprimable

2 pièce(s) jointe(s)

Bonjour,

Je créée à la volée en javascript une boite de dialogue contenant des input radio sous forme de bouttons. L'affichage se fait bien sous Chrome et Firefox mais sous IE (je vous laisse regarder les images en pièce jointe pour vous faire une idée).

Voici mon code :

Code:

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
89
90
91
92
93
94
95
96
97
98
99
function pictoUniqueVisualization(){	
 
	var options = getOptionsPictoUniqueVisualization(id_layer); //créer la boîte de dialogue
	createDialog(options);
	var content = createContentUniqueVisualization("select_icon"); // remplit la boîte de dialogue
	$("#dialog").append(content);
	$("#radio_shape").buttonset();
	$("#colorpicker").spectrum({
		showPaletteOnly: true,
		showPalette:true,
		preferredFormat: "hex6",
		color: '#F4EB37',
		palette: [
			['#F4EB37', '#CDDC39', '#62AF44', '#009D57', '#0BA9CC', '#4186F0', '#3F5BA9'], ['#F9F7A6', '#E6EEA3', '#B7DBAB', '#7CCFA9', '#93D7E8', '#9FC3FF', '#A7B5D7'],
			['#7C3592', '#A61B4A', '#DB4436', '#F8971B', '#F4B400', '#795046', '#777777'], ['#C6A4CF', '#D698AD', '#EE9C96', '#FAD199', '#FFDD5E', '#B29189', '#CCCCCC'],
		]
	});
}
 
function createContentUniqueVisualization(str){
 
	var div = document.createElement("div");
 
	/***********************************
		<form>
		<div id="radio">
		<input type="radio" id="radio1" name="radio">
		<label for="radio1"><img src=my-image.jpg></label>
		</div>
		</form>
	**********************************/
 
	var text_shape = document.createTextNode("Select the shape of the icon: ");
	div.appendChild(text_shape);
 
	var br = document.createElement("br");
	div.appendChild(br);
 
	var form = document.createElement("form");
	div.appendChild(form);
 
	var div_radio_shape = document.createElement("div");
	var id_radio_shape = document.createAttribute("id");
	id_radio_shape.value = "radio_shape";
	div_radio_shape.setAttributeNode(id_radio_shape);
 
	var input_square = createInputRadio("radio_shape", "square");
	var label_square = createInputLabel("square", "images/pictos/square_CCCCCC.png");
 
	var checked = document.createAttribute("checked");
	checked.value = "checked";
	input_square.setAttributeNode(checked);
 
	div_radio_shape.appendChild(input_square);
	div_radio_shape.appendChild(label_square);
 
	var input_stars = createInputRadio("radio_shape", "stars");
	var label_stars = createInputLabel("stars", "images/pictos/stars_CCCCCC.png");
	div_radio_shape.appendChild(input_stars);
	div_radio_shape.appendChild(label_stars);
 
	var input_diamond = createInputRadio("radio_shape", "diamond");
	var label_diamond = createInputLabel("diamond", "images/pictos/diamond_CCCCCC.png");
	div_radio_shape.appendChild(input_diamond);
	div_radio_shape.appendChild(label_diamond);	
 
	var input_circle = createInputRadio("radio_shape", "circle");
	var label_circle = createInputLabel("circle", "images/pictos/circle_CCCCCC.png");
	div_radio_shape.appendChild(input_circle);
	div_radio_shape.appendChild(label_circle);	
 
	var input_pin = createInputRadio("radio_shape", "pin");
	var label_pin = createInputLabel("pin", "images/pictos/pin_CCCCCC.png");
	div_radio_shape.appendChild(input_pin);
	div_radio_shape.appendChild(label_pin);
 
	form.appendChild(div_radio_shape);
	div.appendChild(form);
 
	// colorpicker
	var text_color = document.createTextNode("Select the color of the icon: ");
	var br2 = document.createElement("br");
 
 
	var input_color = document.createElement("input");
	var id_color = document.createAttribute("id");
	id_color.value = "colorpicker";
	input_color.setAttributeNode(id_color);
	var type_color = document.createAttribute("type");
	type_color.value = "text";
	input_color.setAttributeNode(type_color);
 
 
	div.appendChild(text_color);
	div.appendChild(br2);
	div.appendChild(input_color);
 
	return div;
}

Avez-vous une idée?

Merci d'avance,
Damien

26/11/2013, 22h20
danielhagnoul

Bonsoir

Il faut définir le comportement CSS, sinon chaque navigateur fait à sa manière.
27/11/2013, 09h06
kap

Bonjour danielhagnoul,

Merci pour votre réponse. L'intérêt que je voyais à utiliser jQuery et ses coposants UI était de ne justement pas perdre mon temps à définir les comportements CSS. Le CSS suivant est intégré à ma page web :

Code:

<link rel="stylesheet" href="https://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />

IE09 n'est-il pas supporté par la librairie jquery-ui-1.10.3 et les CSS correspondants?

Damien
27/11/2013, 10h13
danielhagnoul

Bonjour

La branche 1 de jQuery (1.10.2 actuellement) et jQuery UI sont compatibles avec les navigateurs obsolètes.

Sauf erreur de lecture, il n'est marqué nulle part dans le message n° 1 que vous utilisez jQuery UI et son CSS.

Dans votre code, je ne vois nulle part l'utilisation de jQuery UI : $( "input[type=radio]" ).button();.

Mon code est pas forcément très lisible, je l'avoue. C'est à la ligne 7 :

Code:

$("#radio_shape").buttonset();

Le contenu de la boîte de dialogue est créé dans la fonction createContentUniqueVisualization() sous la forme de : (je me suis basé sur les exemples de la doc)
Code:

1 2 3 4 5 6 7 8 <<form> <div id="radio_shape"> <input type="radio" id="radio1" name="radio"> <label for="radio1"><img src=my-image.jpg></label> <input type="radio" id="radio2" name="radio"> <label for="radio2"><img src=my-image.jpg></label> </div> </form>
// Edit
Si je mets le code html en dur dans ma page et le $("#radio_shape").buttonset() dans la fonction javacript chargée à l'ouverture, le comportement est bon. Cela veut dire que le problème vient de la génération à la volée. Est-ce que mon code est mal généré ou est-ce IE9 qui a du mal à l'interpréter?

27/11/2013, 11h32
danielhagnoul

Je vois, j'utilise très rarement le widget UI Button et encore plus rarement le supplément buttonset().

Pour que "buttonset" fonctionne, il faut impérativement un ID dans chaque "input" et un attribut "for" qui s'y réfère dans chaque label.

Voici le code généré sous Chrome :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<form>
	<div id="radio_shape">
		<input type="radio" id="square" name="radio_shape" checked="checked">
		<label for="square">
			<img src="images/pictos/square_CCCCCC.png" height="20px" width="20px">
		</label>
		<input type="radio" id="stars" name="radio_shape">
		<label for="stars">
			<img src="images/pictos/stars_CCCCCC.png" height="20px" width="20px">
		</label>
		<input type="radio" id="diamond" name="radio_shape">
		<label for="diamond">
			<img src="images/pictos/diamond_CCCCCC.png" height="20px" width="20px">
		</label>
		<input type="radio" id="circle" name="radio_shape">
		<label for="circle">
			<img src="images/pictos/circle_CCCCCC.png" height="20px" width="20px">
		</label>
		<input type="radio" id="pin" name="radio_shape">
		<label for="pin">
			<img src="images/pictos/pin_CCCCCC.png" height="20px" width="20px">
		</label>
	</div>
</form>

J'ai bien un "id" pour chaque input et un "for" s'y référant dans mes labels. Je viens de réussir à accéder au code généré par IE9, apparemment il ne génère pas mes attributs "type=radio"... Reste à comprendre pourquoi :aie:

// Edit : ce sera plus facile avec la fonction qui génère les input radio :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
function createInputRadio(div_id, id_input){
 
	var input = document.createElement("input");
 
	var type_radio = document.createAttribute("type");
	type_radio.value = "radio";
	input.setAttributeNode(type_radio);
	var id = document.createAttribute("id");
	id.value = id_input;
	input.setAttributeNode(id);
	var name = document.createAttribute("name");
	name.value = div_id;
	input.setAttributeNode(name);
	return input;
}

Bon, j'ai modifié ma fonction qui génère les input radio comme ceci :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 function createInputRadio(div_id, id_input){ var input = document.createElement("input"); input.type = "radio"; var id = document.createAttribute("id"); id.value = id_input; input.setAttributeNode(id); var name = document.createAttribute("name"); name.value = div_id; input.setAttributeNode(name); return input; }
Ca marche dorénavant !! Mais je ne comprends pas vraiment pourquoi :aie: Vous avez une explication? Autre question : je m'embête à chaque fois à utiliser la méthode createAttribute. Qu'est-ce qui est le plus propre entre :
Code:

1 2 3 var id = document.createAttribute("id"); id.value = id_input; input.setAttributeNode(id);
et

Code:

input.id=id;

Merci :mrgreen:

27/11/2013, 21h16
NoSmoking

Bonjour,

Citation:

je m'embête à chaque fois à utiliser la méthode createAttribute.

quand on utilise jQuery autant l'utiliser pour tout!

:fleche: Category: Manipulation
29/11/2013, 09h56
kap

Humm, c'est pas faux :D J'ai utilisé jQuery surtout pour les appels ajax et les éléments graphiques déjà tout prêts. Je n'ai pas vraiment eu le temps d'étudier la librairie en détail :aie:
Merci :ccool:
Après je suis quand même curieux d'avoir une réponse concernant la meilleur méthode d'ajout d'attribut en javascipt ;)
30/11/2013, 07h57
NoSmoking

Citation:

Après je suis quand même curieux d'avoir une réponse concernant la meilleur méthode d'ajout d'attribut en javascipt ;)

tu peux tout aussi efficacement utiliser la méthode setAttribute(nom, valeur).
30/11/2013, 11h26
Bovino

Non NoSmoking, la meilleure (et la plus propre) façon, ce n'est pas ça.
setAttribute() permet d'ajouter un attribut HTML (qui est certes ensuite transformé en propriété de l'objet HTMLElement correspondant).
Le plus propre, c'est d'attribuer directement la propriété JavaScript correspondante :

Code:

HTMLElement.propriete = valeur;

Quand on travaille en JavaScript, ça ne sert plus à grand chose de modifier le code HTML.

Ce qui au passage permet d'éviter certains pièges. ;)
30/11/2013, 16h06
NoSmoking

Oui et Non :mouarf:
Ma remarque valait au départ fonction de l'utilisation de createAttribute qui est me semble t-il déprécié.

Lorsque l'on accède/crée un élément dans le DOM il n'est pas plus propre à mon sens de lui affecter une propriété que les navigateurs ajoutent comme attribut à l'élément HTML si il s'agit d'un "vrai" attribut, merci à eux même si il ne sont pas tous égaux aux regards de cela.

Seulement si on utilise setAttibute pour écrire on doit utiliser getAttribute pour lire, c'est la bonne pratique.

Je te rassures je suis le premier à utiliser cette forme raccourcie pour affecter une ID, par exemple, mais je considère que cela reste une bonne pratique devant les écueils rencontrés à une époque en voie de disparition.

Quant à ajouter une propriété, personnelle, à l'objet le fait de passer par setAttribute est effectivement à mon sens une erreur.

Concernant les pièges dont tu parles dans ton exemple en respectant scrupuleusement les consignes que je viens d'énoncer on ne les rencontres pas, toto n'est pas un "vrai" attribut mais comme on utilise setAttribute il est ajouté à la collection attributes pour cette balise ce qui n'est pas le cas de tata. Bon je sais en faisant une affectation directe on n'a également pas le problème.

On pourrait d'ailleurs faire le rapprochement entre attr() et prop() de jQuery.