Discussion :

[okoweb]

Bonsoir à tous.

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
function addselect(service, parent, elt){
	elt.nextAll().remove();
	if ( elt.val() != '-1' ) {
		$.ajax({
			type: 'POST',
			url: 'ajax.php',
			data: 'serviceId='+service+'&parentId='+parent+'&structures=ok',
			dataType: 'json',
			cache: false,
			beforeSend: function(){
				$("<img/>",{src: "assets/img/ajax-loader.gif", id: "loader"}).insertAfter(elt);
			},
			complete: function(){
				$("#loader").remove();
			},
			success: function(data){
				if ( data.result.children.length > 0 ) {
					var items = data.result.children, level = data.result.level;
					if ( level > 0 ) {
						$('<div/>',{id:'localisation','class':'row'}).insertAfter(elt);
					}
					if ( $('#localisation').length > 0 ) $('<select/>',{'class':'form-control'}).insertAfter('#localisation');
					else $('<select/>',{'class':'form-control'}).insertAfter(elt);
					$('<option/>',{value: '-1', html: 'Choisir une structure dans "' + elt.children('option:selected').text() + '"'}).appendTo($('#structuresWrap > select').eq(-1));
					for(var i in items){
						$("<option/>",{value: items[i].struc_id, html: items[i].struc_name}).appendTo($('#structuresWrap > select').eq(-1));
					}
				}					
			}
		});
	}
}
 
$('#structuresWrap').on('change', '> select', function() { 
	addselect($('input[type=radio][name=services]:checked').attr('value'), $(this).children('option:selected').attr('value'), $(this));
});

Ce code me permet de créer dynamiquement à la volée des select à partir d'un retour AJAX. Voir test en ligne ici : http://tamtam-networks.com/test/
Tout marche merveilleusement bien dans les services centraux. Essayez Centrax > Administration centrale > Secrétariat Générale, tout se passe bien.
Essayez : Déconcentrés > Délégation Régionale > Service des marchés d’infrastructures, vous constatez par vous même. Les contenus des 2 derniers select s'insèrent dans le dernier. Et c'est bout de code qui cause ce désastre

Code :

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

1
2
3
if ( level > 0 ) {
	$('<div/>',{id:'localisation','class':'row'}).insertAfter(elt);
}

car var level > 0 pour les services déconcentrés.

Que faire ?

Merci d'avance pour votre aide.

NB. Merci de patienter les retours Ajax pour la création et chargement des select.

[danielhagnoul]

Bonsoir

Un ID doit être unique.

Si la fonction addselect est exécutée plus d'une fois ce n'est plus le cas : $('<div/>',{id:'localisation','class':'row'}).

[okoweb]

Effectivement, cette div n'est créée qu'une seule fois. En fait mon problème c'est sur les select créés après ce div. Si vous avez testé, vous remarquerez que l'avant dernier select après div#localisation se vide et ses options se retrouvent plutôt dans le dernier select. Je ne sais si c'est à ce niveau le problème ?

Code :

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

1
2
3
4
$('<option/>',{value: '-1', html: 'Choisir une structure dans "' + elt.children('option:selected').text() + '"'}).appendTo($('#structuresWrap > select').eq(-1));
for(var i in items){
	$("<option/>",{value: items[i].struc_id, html: items[i].struc_name}).appendTo($('#structuresWrap > select').eq(-1));
}

Merci d'avance...

[okoweb]

Personne pour me venir en aide ?