Jquery UI dialog : comportement anormal d'un select ou d'un checkbox

Version imprimable

30/03/2013, 18h42
tonio17

Jquery UI dialog : comportement anormal d'un select ou d'un checkbox

Je désire contrôler l'affichage des différents dans un widget Jquery UI dialog
Pour un input type='text' pas de problème
Mais pour un select ou pour un checkbox, le comportement est incohérent

Voici le code de test : http://jsfiddle.net/UyH64/2/

Après avoir affiché la boîte
on clique sur Monsieur : ok
on clique sur Madame : ok
on clique sur Monsieur : plus rien... définitivement plus rien (idem sur Madame)

on clique sur cocher : ok
on clique sur décocher : ok
on clique sur cocher : plus rien... définitivement plus rien

Qu'est-ce que je rate ?
Merci pour toutes pistes.

Antoine
30/03/2013, 19h15
Lorenzo77

salut,

j'ai exactement le meme probleme quand je dois utiliser des SELECT ou CHECKBOX/RADIO
test ici :
http://jsfiddle.net/LorenzoFR/Kp47z/
lors du 1er tour tout fonctionne mais au 2eme l'affichage reste statique .. comme bloqué (alors que l'HTML est bon)

une bidouille que j'ai trouvé est de forcer l'affichage en effaçant le bloc et ensuite de l'insérer a nouveau ... c'est crade mais j'ai trouvé que ca.

autre chose, si tu testes tel quel ton code sur chrome, rien ne fonctionne !
30/03/2013, 19h28
tonio17

Ce n'est pas des bonnes nouvelles, tout ça.
J'ai bien pensé à une solution bourrin, mais je me suis dit qu'il devait exister néanmoins une solution plus propre.

Merci de ta réponse.
30/03/2013, 19h44
Lorenzo77

surement, il y a toujours une solution, le probleme va etre de la trouver !
au moins tu sais que ca ne vient pas du Dialog de JQ UI et tu sais dans quel sens chercher :
pourquoi l'affichage n'est plus mis a jour au 2eme tour des options ?

il est aussi possible qu'on fasse ca de la mauvaise maniere ..

-----
quelques tests + poussés en forcant (supprimer le bloc et le re-inserer) ou non
opera : parfait dans les 2 cas
chrome : fonctionne en forcant l'affichage
FF : merdouille dans les 2 cas
IE : ... pas besoin de tester
30/03/2013, 21h34
Lorenzo77

je viens de tester mais sans utiliser JQ (JS pur) ... ca fonctionne, donc il faut maintenant trouver ou sa merdouille dans JQ.

dans ton cas si tu te fous de savoir pourquoi, tu peux refaire ton code en JS pur ce qui évitera ton probleme.
30/03/2013, 21h56
Lorenzo77

le probleme vient de JQ 1.9.1, je n'ai pas ce comportement avec les versions antérieurs :
1.6.4
1.7.2
1.8.3
j'essaye de suivre ce qui se passe dans JQ mais avec 10000 lignes de code et que des fonctions anonymes c'est une vraie galère !

si quelqu'un avait une piste ça pourrait être économique au niveau temps :)

Bonsoir

Il y a pourtant longtemps que la méthode prop() a été introduite.

J'en ai parlé à l'époque dans les annonces de nouvelle version jQuery et dans les réponses aux questions sur le forum.

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
var $dialog = $('<div></div>')
	.html('<form id="myform" action=""><input type="checkbox" id="check0" name="check0" value="" />text<br /><select id="titre"><option value="0"></option><option value="1">Monsieur</option><option value="2">Madame</option></select></form>')
	.dialog({
		autoOpen: false,
		title: 'Checkbox et select',
		buttons: {
			"Submit Form": function() {alert('Submit...'); },
			"Cancel": function() {$(this).dialog("close");}
		}
	});
 
$('#dialogue').click(function() {
	$dialog.dialog('open');
	return false;
});
 
var c ="X";
 
$('#bouton1').click(function() {
	var civilite = "Monsieur"; //alert(civilite);
	$("#titre > option").each(function() {
		if($(this).text() == civilite)
			$(this).prop('selected', true );
		else
			$(this).prop('selected', false);
	});
});
 
$('#bouton2').click(function() {
	var civilite = "Madame"; //alert(civilite);
	$("#titre > option").each(function() {
		if($(this).text() == civilite)
			$(this).prop('selected', true);
		else
			$(this).prop('selected', false);
	});
});
 
$('#check').click(function() {
	if (c != '') {
		$('#check0').prop('checked', true);
		c = '';
		$('#check').val('Décocher');
	}
	else {
		$('#check0').prop('checked', false);
		c = 'X';
		$('#check').val('Cocher');
	}
});

30/03/2013, 22h50
Lorenzo77

je viens de tester mais prop() merdouille encore plus, il n'arrive pas a rajouter l'attribut selected, j'ai pourtant essayé les 2 formes :

Code:

$('#select1>option:eq(0)').prop('selected', true);

Code:

$('#select1>option:eq(0)').prop('selected', 'selected');

prop() arrive a lire ou enlever l'attribut mais pas a l'ajouter :calim2:

----
j'ai repris la "HTML 4.01 Specification" http://www.w3.org/TR/1999/REC-html40...ms.html#h-17.6 et d'aprés cette doc "selected" est classé comme attribut ... j'ai du mal a faire la différence entre un attribut et une propriété !

Bonsoir,
à essayer de supprimer le selected avant de l'attribuer

Code:

1
2
3
4
5
6
7
8
$('#bouton1').click(function() {
  var civilite = "Monsieur"; //alert(civilite);
  $("#titre > option").each(function() {
    $(this).prop('selected', '');
    if($(this).text() == civilite)
      $(this).prop('selected', 'selected');            
  });
});

Citation:
Envoyé par danielhagnoul
Bonsoir

Il y a pourtant longtemps que la méthode prop() a été introduite.

J'en ai parlé à l'époque dans les annonces de nouvelle version jQuery et dans les réponses aux questions sur le forum.
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 var $dialog = $('<div></div>') .html('<form id="myform" action=""><input type="checkbox" id="check0" name="check0" value="" />text<br /><select id="titre"><option value="0"></option><option value="1">Monsieur</option><option value="2">Madame</option></select></form>') .dialog({ autoOpen: false, title: 'Checkbox et select', buttons: { "Submit Form": function() {alert('Submit...'); }, "Cancel": function() {$(this).dialog("close");} } }); $('#dialogue').click(function() { $dialog.dialog('open'); return false; }); var c ="X"; $('#bouton1').click(function() { var civilite = "Monsieur"; //alert(civilite); $("#titre > option").each(function() { if($(this).text() == civilite) $(this).prop('selected', true ); else $(this).prop('selected', false); }); }); $('#bouton2').click(function() { var civilite = "Madame"; //alert(civilite); $("#titre > option").each(function() { if($(this).text() == civilite) $(this).prop('selected', true); else $(this).prop('selected', false); }); }); $('#check').click(function() { if (c != '') { $('#check0').prop('checked', true); c = ''; $('#check').val('Décocher'); } else { $('#check0').prop('checked', false); c = 'X'; $('#check').val('Cocher'); } });
Pour les attributs booléens : prop( selector, value ); le paramètre value doit être true ou false.

Référence : http://api.jquery.com/prop/

Citation:

According to the W3C forms specification, the checked attribute is a boolean attribute, which means the corresponding property is true if the attribute is present at all—even if, for example, the attribute has no value or is set to empty string value or even "false". This is true of all boolean attributes.

Nevertheless, the most important concept to remember about the checked attribute is that it does not correspond to the checked property. The attribute actually corresponds to the defaultChecked property and should be used only to set the initial value of the checkbox. The checked attribute value does not change with the state of the checkbox, while the checked property does. Therefore, the cross-browser-compatible way to determine if a checkbox is checked is to use the property:

if ( elem.checked )
if ( $(elem).prop("checked") )
if ( $(elem).is(":checked") )

The same is true for other dynamic attributes, such as selected and value.

Depuis jQuery 1.6, il faut arrêter de confondre les attributs HTML et les propriétés du DOM.

Le HTML et ses attributs ne servent qu'à l'initialisation de la page web, le DOM et ses propriétés (qui portent généralement le même nom que les attributs, mais qui ne se comportent pas toujours comme les attributs) existent pendant toute la durée de vie de la page web.

31/03/2013, 13h59
Lorenzo77

j'aurais du faire un message a part pour ne pas alourdir le sujet de tonio ..

quand je dis que "prop()" ne fonctionne pas, c'est quand je le test ici :
http://jsfiddle.net/LorenzoFR/Kp47z/

fais le test et tu verras que ca fonctionne plus du tout avec prop() des qu'il remplace "removeAttr()" et "attr()"

pour en revenir au code du test, il y a bien un bug avec JQ 1.9.1 puisque les autres versions fonctionnent.

Rebonjour,

J'avais délaissé cette discussion... pour cause de fermeture d'ordinateur pour 24 heures, après ma prise de tête sur cette question.
La discussion qui s'en est suivi est intéressante et m'a fait connaître, au débutant que je suis sur JQuery, la méthode prop().

Et pour ma part (sous Firefox 19.0.2) la solution proposée par danielhagnoul me satisfait tout à fait : http://jsfiddle.net/UyH64/3/ :ccool:
Je n'ai plus qu'à la compléter pour les boutons radios.

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
var $dialog = $('<div></div>')
	.html('<form id="myform" action=""><input type="checkbox" id="check0" name="check0" value="" />text<br /><select id="titre"><option value="0"></option><option value="1">Monsieur</option><option value="2">Madame</option></select></form>')
	.dialog({
		autoOpen: false,
		title: 'Checkbox et select',
		buttons: {
			"Submit Form": function() {alert('Submit...'); },
			"Cancel": function() {$(this).dialog("close");}
		}
	});
 
$('#dialogue').click(function() {
	$dialog.dialog('open');
	return false;
});
 
var c ="X";
 
$('#bouton1').click(function() {
	var civilite = "Monsieur";
	$("#titre > option").each(function() {
		if($(this).text() == civilite)
			$(this).prop('selected', true );
		else
			$(this).prop('selected', false);
	});
});
 
$('#bouton2').click(function() {
	var civilite = "Madame";
	$("#titre > option").each(function() {
		if($(this).text() == civilite)
			$(this).prop('selected', true);
		else
			$(this).prop('selected', false);
	});
});
 
$('#check').click(function() {
	if (c != '') {
		$('#check0').prop('checked', true);
		c = '';
		$('#check').val('Décocher');
	}
	else {
		$('#check0').prop('checked', false);
		c = 'X';
		$('#check').val('Cocher');
	}
});

Merci à vous deux. Bien cordialement et Bonnes fêtes de Pâques !
Antoine

Citation:

Envoyé par Lorenzo77

j'aurais du faire un message a part pour ne pas alourdir le sujet de tonio ..

quand je dis que "prop()" ne fonctionne pas, c'est quand je le test ici :
http://jsfiddle.net/LorenzoFR/Kp47z/

fais le test et tu verras que ca fonctionne plus du tout avec prop() des qu'il remplace "removeAttr()" et "attr()"

pour en revenir au code du test, il y a bien un bug avec JQ 1.9.1 puisque les autres versions fonctionnent.

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
<!DOCTYPE html>
<html lang="fr" dir="ltr">
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="initial-scale=1.0">
	<meta name="author" content="Daniel Hagnoul">
	<title>Forum jQuery</title>
	<script src="http://cdnjs.cloudflare.com/ajax/libs/headjs/0.99/head.min.js"></script>
	<script>
		"use strict";
 
		head.js( 
			"http://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js", 
			"http://code.jquery.com/jquery-1.9.1.min.js",
			"http://danielhagnoul.developpez.com/lib/dvjh/base.js",
			function(){
 
				$( function(){
 
					var jObjSelect = $( "#select1" ),
						jObjOptions = jObjSelect.children(),
						nbOption = jObjOptions.length,
						optionValue = jObjSelect.val(),
						i = 0,
						ObjInterval = setInterval( function(){
 
							jObjOptions
								.prop( "selected", false )
								.eq( i )
								.prop( "selected", true );
 
							console.log( "i : ", i );
						    console.log( "optionValue : ", jObjSelect.val() );
						    console.log( "nb option selected : ", jObjOptions.filter( ":selected" ).length );
						    console.log( "total option : ", nbOption );
						    console.log( "-------------------------------" );
 
						    ( i < nbOption - 1 ) ? ( i++ ) : ( i = 0 );
 
						}, 500 );
 
					// 27 = touche "Esc"
					$( "body" ).on( 'keydown', function(ev){
					    if ( ev.which === 27 ){
					        clearInterval( ObjInterval );
					    }
					});
 
				});
 
				$( window ).load( function(){
 
					$( window ).on( "online offline", function( event ){
						console.log( event.type, event.timeStamp );
					});
 
				});
			}
		);
	</script>
	<link href='http://fonts.googleapis.com/css?family=Sofia|Ubuntu:400|Kreon'>
	<link rel="stylesheet" href="http://danielhagnoul.developpez.com/styles/dvjhRemBase.css">
	<style>
		/* TEST -- Nota bene : ici 1 rem est égal à 1 px, voir dvjhRemBase.css */
		select { font-size: 150%; background-color: #ffffaa; }
	</style>
</head>
<body>
	<header>
		<hgroup>
			<h1>Forum jQuery</h1>
			<h2>
				<a href="">Lien</a>
			</h2>
		</hgroup>
	</header>
	<section class="conteneur">
 
		<div class="txtcenter">
		    <select id="select1">
		        <option value="1" selected>texte 1</option>
		        <option value="2">texte 2</option>
		        <option value="3">texte 3</option>
		        <option value="4">texte 4</option>
		        <option value="5">texte 5</option>
		    </select>
		</div>
 
	</section>
	<footer itemscope itemtype="http://danielhagnoul.developpez.com/">
		<time datetime="2013-03-31T22:39:49.552+02:00" pubdate>2013-03-31T22:39:49.552+02:00</time>
		<span itemprop="name">Daniel Hagnoul</span>
		<a href="http://www.developpez.net/forums/u285162/danielhagnoul/" itemprop="url">@danielhagnoul</a>
		<a href="http://danielhagnoul.developpez.com/" itemprop="url">Mon cahier d’exercices</a>
		<a href="http://javascript.developpez.com/faq/jquery/" itemprop="url">FAQ</a>
		<a href="http://javascript.developpez.com/cours/?page=frameworks#jquery" itemprop="url">Tutoriels</a>
	</footer>
</body>
</html>

01/04/2013, 13h50
Lorenzo77

je viens enfin de comprendre ... quand on utilise 'prop', il ne faut pas utiliser le sélecteur :

Code:

var idCourant = $('#select1>option[selected]').index();

mais plutot

Code:

var idCourant = $('#select1>option:selected').index();

pourtant je pensais que les 2 étaient semblable ...