Discussion :

[boboss123]

Bonjour,

Voici mon code pour générer une listBox à la volée

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
var $listBox = $("#foo");
var $newListBox = $('<select id="foo" ></select>');
 
var i=1000;
for(i=5; i<10000; i*=10){
	var $entry = $('<option/>');
	$entry.val(i);
	$entry.text(i + " - bla bla bla");
 
	$newListBox.append($entry);
}
 
$newListBox.replaceAll($listBox);

Le problème est que vu que la chaine générée par la variable i est de taille variable, le text " - bla bla bla" n'est pas aligné : y a t-il une methode pour que tout soit aligné ?


PS : c'est bien comme ça qu'il faut faire pour généré ma listBox de manière performante ?

merci d'avance,

[SpaceFrog]

Code :

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

1
2
var $listBox = $("#foo");
var $newListBox = $('<select id="foo" ></select>');

tu as deux id foo ???
un id doit être unique sur la page ...

sinon pour l'alignement

Code :

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

.css('text-align','center')

pourquoi faire un replace et recréer le select alors qu'il te suffit de vider le select avec un empty() et le repeupler ... ???

http://jsfiddle.net/9eFHs/1/

[boboss123]

tu as deux id foo ???
un id doit être unique sur la page ...

=> non, vu que je remplace un bloc par un autre : tant que je ne fais pas un .append(), mon bloque est bien non lié à ma page web ?

sinon pour l'alignement

Code :

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

.css('text-align','center')

=> ce n'est pas ce que je voudrai. Je veux que le caractères '-' de chaque ligne soit les uns en face des autres (verticalement) (remarque : i < 10000 => 4 caractères max). En langage c, ça donnerait un truc du genre : printf("%4s - bla bla bla\n", i);

pourquoi faire un replace et recréer le select alors qu'il te suffit de vider le select avec un empty() et le repeupler ... ???

Pour éviter le rafraichissement intempestif de la page pendant la création de l’élément... mais je ne sais pas du tout si ça change vraiment quelque chose

[SpaceFrog]

Je confirme que avec ceci

Code :

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

1
2
3
 
var $listBox = $("#foo");
var $newListBox = $('<select id="foo" ></select>');

je confirme que tu as deux ids identiques dans le dom ...

Sinon pour aligner les - il te faut passer par une font monospace (chasse fixe)
et html et non text

http://jsfiddle.net/9eFHs/2/

[danielhagnoul]

Bonsoir

ID : il n'y a pas de doublon, lors de l'incorporation dans le DOM le nouveau remplace l'ancien.

Alignement : il n'y a pas de solution CSS valable dans tous les navigateurs, la solution de SpaceFrog (ajout de caractère insécable) est la seule qui fonctionne partout.

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
var jObjSelect = $( '<select id="foo"></select>' ),
    jObjOption = $( '<option value="0">"0"</option>' );
 
for ( var i = 5; i < 10000; i *= 10 ){
	jObjOption
		.clone( true, true )
		.val( i )
		.text( i + " - bla bla bla" )
		.appendTo( jObjSelect );
}
 
jObjSelect.replaceAll( "#foo" );

[SpaceFrog]

@daniel
tu veux dire que tant qu'il n'y a pas d'append, l'objet n'est pas dans le DOM ?

Code :

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

var $newListBox = $('<select id="foo" ></select>');

ça parait logique vu que les selecteurs recherchent dans le document, et que sans append l'objet n'est qu'une variable js.

Par contre nul besoin de faire un replace de la balise select ici vu qu'il s'agit juste d'en modifier le contenu si je ne m'abuse ...

[danielhagnoul]

Oui et oui, seul le remplacement du contenu est nécessaire.

[boboss123]

oki merci