Discussion :

[tonio17]

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

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

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

[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

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

[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

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

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

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

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

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

Code :

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

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

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


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

[NoSmoking]

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

Code :

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

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

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

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

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.

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