Button non reconnu par IE dans un dialog

**kap** · 26/11/2013, 17h30

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 :

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
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

**danielhagnoul** · 26/11/2013, 22h20

Bonsoir

Il faut définir le comportement CSS, sinon chaque navigateur fait à sa manière.

**kap** · 27/11/2013, 09h06

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 :

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

	<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

**danielhagnoul** · 27/11/2013, 10h13

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();.

**kap** · 27/11/2013, 10h45

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

Code :

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

$("#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 html :

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

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?

**danielhagnoul** · 27/11/2013, 11h32

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.

**kap** · 27/11/2013, 12h04

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

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
<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

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

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
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;
}

**kap** · 27/11/2013, 12h42

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

Code :

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

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

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 :

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

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

et

Code :

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

input.id=id;

Merci

**NoSmoking** · 27/11/2013, 21h16

Bonjour,

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

quand on utilise jQuery autant l'utiliser pour tout!

Category: Manipulation

**kap** · 29/11/2013, 09h56

Humm, c'est pas faux

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

Merci

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

**NoSmoking** · 30/11/2013, 07h57

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).

**Bovino** · 30/11/2013, 11h26

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 :

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

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.

**NoSmoking** · 30/11/2013, 16h06

Oui et Non

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.

Button non reconnu par IE dans un dialog

jQuery

Discussions similaires

Partager

Partager