IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

jQuery Discussion :

Button non reconnu par IE dans un dialog


Sujet :

jQuery

Vue hybride

Message précédent Message précédent   Message suivant Message suivant
  1. #1
    kap
    kap est déconnecté
    Membre confirmé
    Inscrit en
    Octobre 2005
    Messages
    188
    Détails du profil
    Informations forums :
    Inscription : Octobre 2005
    Messages : 188
    Par défaut Button non reconnu par IE dans un dialog
    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
    Images attachées Images attachées   

  2. #2
    Rédacteur

    Avatar de danielhagnoul
    Homme Profil pro
    Étudiant perpétuel
    Inscrit en
    Février 2009
    Messages
    6 389
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 74
    Localisation : Belgique

    Informations professionnelles :
    Activité : Étudiant perpétuel
    Secteur : Enseignement

    Informations forums :
    Inscription : Février 2009
    Messages : 6 389
    Billets dans le blog
    125
    Par défaut
    Bonsoir

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

    Blog

    Sans l'analyse et la conception, la programmation est l'art d'ajouter des bogues à un fichier texte vide.
    (Louis Srygley : Without requirements or design, programming is the art of adding bugs to an empty text file.)

  3. #3
    kap
    kap est déconnecté
    Membre confirmé
    Inscrit en
    Octobre 2005
    Messages
    188
    Détails du profil
    Informations forums :
    Inscription : Octobre 2005
    Messages : 188
    Par défaut
    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

  4. #4
    Rédacteur

    Avatar de danielhagnoul
    Homme Profil pro
    Étudiant perpétuel
    Inscrit en
    Février 2009
    Messages
    6 389
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 74
    Localisation : Belgique

    Informations professionnelles :
    Activité : Étudiant perpétuel
    Secteur : Enseignement

    Informations forums :
    Inscription : Février 2009
    Messages : 6 389
    Billets dans le blog
    125
    Par défaut
    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();.

    Blog

    Sans l'analyse et la conception, la programmation est l'art d'ajouter des bogues à un fichier texte vide.
    (Louis Srygley : Without requirements or design, programming is the art of adding bugs to an empty text file.)

  5. #5
    kap
    kap est déconnecté
    Membre confirmé
    Inscrit en
    Octobre 2005
    Messages
    188
    Détails du profil
    Informations forums :
    Inscription : Octobre 2005
    Messages : 188
    Par défaut
    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?

  6. #6
    Rédacteur

    Avatar de danielhagnoul
    Homme Profil pro
    Étudiant perpétuel
    Inscrit en
    Février 2009
    Messages
    6 389
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 74
    Localisation : Belgique

    Informations professionnelles :
    Activité : Étudiant perpétuel
    Secteur : Enseignement

    Informations forums :
    Inscription : Février 2009
    Messages : 6 389
    Billets dans le blog
    125
    Par défaut
    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.

    Blog

    Sans l'analyse et la conception, la programmation est l'art d'ajouter des bogues à un fichier texte vide.
    (Louis Srygley : Without requirements or design, programming is the art of adding bugs to an empty text file.)

Discussions similaires

  1. Disque non reconnu par Windows mais apparait dans le BIOS
    Par Paul TOTH dans le forum Windows 8
    Réponses: 4
    Dernier message: 31/05/2015, 20h49
  2. Mobile non reconnu par Android ADT dans Eclipse
    Par Mister Nono dans le forum Android
    Réponses: 3
    Dernier message: 05/02/2012, 00h37
  3. Disque USB non reconnu par Windows 7 dans VMware sur Imac
    Par chatisis dans le forum Mac OS X
    Réponses: 2
    Dernier message: 17/12/2010, 07h50
  4. [ZF 1.0] Ajout d'une classe dans la libraire "Validate" non reconnu par l'Autoload
    Par psylo66 dans le forum Autres composants
    Réponses: 3
    Dernier message: 22/09/2010, 13h08
  5. [Lomboz] [JBoss] JBoss 3.2.6 non reconnu par Lomboz ?
    Par romain3395 dans le forum Eclipse Java
    Réponses: 4
    Dernier message: 17/12/2004, 16h35

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo