Instancier des variables par groupes

Bonjour,

Je viens vous voir car j'ai un soucis en jquery, cependant, avant de vous expliquez quoique ce soit, je vous invite à regarder ce fiddle pour bien comprendre de quoi je parle.

Donc, pour en revenir à nos moutons, j'ai un soucis sur la partie bprule. Je dois en effet avoir dans cette partie des groupes puis pour chaque groupe un ou plusieurs services. Pour les groupes, l'itération se fait bien grâce à ma variable globale "$j", je peux donc changer les id des divs en itérant "$j". La ou je n'y arrive pas, c'est pour faire la même chose avec les services, en fait il me faudrait une variable à itérer pour chaque groupe, j'ai essayer avec un tab[$j] mais ça ne fonctionne pas, lorsque je passe mon tableau à l'index $j dans ma fonction pour ajouter ma div services, le "$i" est "undefined".
Du coup ce que j'aimerais savoir, comment faire pour instancier une variable pour chaque groupe?

Pour ceux qui préfère regarder du code ici je vous met mon script js ici :

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
var contenu = {"admin-pc":["aix_cpu_2"],"apollo3":["aix_cpu","cluster_cpu"],"Cluster-IP3G":["aix_cpu"],"DELL726C6A":["aix_cpu"],"exchange-ip3g":["aix_cpu"],"gitlab":["aix_cpu"],"glpi-ip3g":["aix_cpu"],"ip3g-vcenter":["aix_cpu"],"ip3grammes":["aix_cpu"],"kyocera":["aix_mem"],"lync-ip3g":["rgrgrgg","cpu"],"san_ip3g":["rgrgrgg"],"SG300":["z"],"shinken":["aix_cpu","che_oracle_sga_library_cache_g","aix_mem","aix_net"],"srv-supervision":["aix_cpu"],"srv-vtiger":["aix_cpu","aix_mem"],"supervision-distant":["aix_cpu"],"test":["host_alive"],"test2":["aix_disks","aix_vg"],"testveeam6-5":["aix_cpu","aix_mem"]};
console.log(contenu);
 
var $tab = new Array();
var $j = 0;
 
var enleverservice = function(id){
	console.log(id);
	if(($("#grp1 .service:last").length !== 0) & (id !== 'ser1')){
			$("#grp1 .service:last").remove();
	}
	else{
		console.log("Il existe!");
	}
};
 
var enlevergroup = function(id){
	console.log(id);
};
 
 
var ajoutgroup = function(){
 
	$tab[$j] = 0;
 
	if ($("#removegrp").length === 0){
 
		var $removegrp = $('<input />').attr({ type: 'button', id: 'removegrp'}).val('-').addClass('btn')
			.on('click', enlevergroup($('.group:last').attr('id')));
 
		$("#addgrp").after($removegrp);
	}
 
	var $grp = $("<div />").attr({id: 'grp'+$j}).addClass('input-group group').css({"width":"100%"});
	$grp.appendTo("#bprule");
	console.log('grp'+$j);
 
	var $addser = $('<input />').attr({ type: 'button', id: 'addser'+$j}).val('+').addClass('btn')
	.on('click', function() { $tab[$j] = ajoutservice($tab[$j]); });
	$addser.appendTo("#grp"+$j);
 
	var $removeser = $('<input />').attr({ type: 'button', id: 'removeser'+$j}).val('-').addClass('btn')
	.on('click', function() { enleverservice($('.service:last').attr('id')); });
	$removeser.appendTo("#grp"+$j);
 
	$('#addser'+$j).click();
	++$j;
	console.log('J : '+$j);
	console.log('Tab : '+$tab);
}
 
var ajoutservice = function($i){
 
	if($("#ser"+$i).length === 0){
 
		console.log('I : '+$i);
 
		var $ser = $("<div />").attr({id: 'ser'+$i}).addClass('input-group service').css({"width":"100%"});
		$ser.appendTo("#grp"+$j);
 
		var $lhost = $("<select />").attr({name: 'lhost'+$i, id: 'lhost'+$i}).addClass('form-control selhos').css({"width":"200px", "margin-left":"20px"})
		.on('change', function() {
          changer($(this).val(), $(this).next('.selser').attr('id'));
        });
		$lhost.appendTo("#ser"+$i);
 
		var $optf = $("<option />").text('--').attr({disabled: '', selected:''});
		$optf.appendTo("#lhost"+$i);
 
        $.each(contenu, function(key, val) {
            var $option = $('<option />').val(key).text(key).addClass('opt');
            $('#lhost'+$i).append($option);
        });
 
        var $lservice = $("<select />").attr({name: 'ser'+$i, id: 'lservice'+$i}).addClass('form-control selser').css({"width":"300px", "margin-left":"20px"});
		$lservice.appendTo("#ser"+$i);
 
		var $optfs = $("<option />").text('Veuillez choisir un hôte').attr({disabled: '', selected:''});
		$optfs.appendTo("#lservice"+$i);
	}	
	++$i;
	return $i;
 
};
 
var changer = function(keySelect, idSelect){
	console.log(idSelect);
    $('#'+idSelect).empty();
    $.each(contenu[keySelect], function(key, val) {
        var $option = $('<option />').val(val).text(val).addClass('opt');
        $('#'+idSelect).append($option);
    });
};

Et mon code html associé :

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
<body>
<form  method="post" action="bp-rule-define.php"/>
<div id="global">
	<div class="input-group">
		<span class="input-group-addon">Choisissez votre hôte</span>
    	<select class="form-control" name="hostnameav">
	    	<option disabled="" selected="">--</option>
        	        		<option class="opt" value='admin-pc'  required="">admin-pc</option>
        	        		<option class="opt" value='apollo3'  required="">apollo3</option>
        	        		<option class="opt" value='Cluster-IP3G'  required="">Cluster-IP3G</option>
        	        		<option class="opt" value='DELL726C6A'  required="">DELL726C6A</option>
        	        		<option class="opt" value='exchange-ip3g'  required="">exchange-ip3g</option>
        	        		<option class="opt" value='gitlab'  required="">gitlab</option>
        	        		<option class="opt" value='glpi-ip3g'  required="">glpi-ip3g</option>
        	        		<option class="opt" value='ip3g-vcenter'  required="">ip3g-vcenter</option>
        	        		<option class="opt" value='ip3grammes'  required="">ip3grammes</option>
        	        		<option class="opt" value='kyocera'  required="">kyocera</option>
        	        		<option class="opt" value='lync-ip3g'  required="">lync-ip3g</option>
        	        		<option class="opt" value='san_ip3g'  required="">san_ip3g</option>
        	        		<option class="opt" value='SG300'  required="">SG300</option>
        	        		<option class="opt" value='shinken'  required="">shinken</option>
        	        		<option class="opt" value='srv-supervision'  required="">srv-supervision</option>
        	        		<option class="opt" value='srv-vtiger'  required="">srv-vtiger</option>
        	        		<option class="opt" value='supervision-distant'  required="">supervision-distant</option>
        	        		<option class="opt" value='test'  required="">test</option>
        	        		<option class="opt" value='test2'  required="">test2</option>
        	        		<option class="opt" value='testveeam6-5'  required="">testveeam6-5</option>
        			</select>
	</div>
	<div class="input-group">
		<span class="input-group-addon">Entrez un nom de service</span>
    	<input type="text" class="form-control" size="30" maxlength="30" name="servicename" value="" required/>
    </div>
    <div id="bprule" class="input-group">
		<p>Entrez votre critère de bp rules : </p>
		<input type="button" id="addgrp" class="btn" value="+" onclick="ajoutgroup()" />
    </div>
 
<input type="submit" id="sub" class="btn" name="submit" value="Enregistrer" />
 
</div>
</body>

Si jamais il y a des choses que vous n'avez pas compris, n'hésité pas à me le dire, ce n'est pas forcément simple à expliquer et encore moins à comprendre ^^

Salut je crois que pour ton erreur concernant la création de nouveau groupe de services il faut passé un number a ta function et pas un object, si c'est bien ce que tu souhaite faire.
Code:

1 2 3 var $addser = $('<input />').attr({ type: 'button', id: 'addser'+$j, onclick:'ajoutgroup(' + $j + ');'}).val('+').addClass('btn') .on('click', function() { $tab[$j] = ajoutservice($j); }); //ici tu passe un object au lieu d'un number tab[$j] <--- object array?

Le soucis, c'est que ma variable $j est là pour itérer les groupes en eux même et non pas les services. DU coup j'avais penser que pour chaque groupe j'allais créer une nouvelle valeur dans mon tableau $tab qui commencerait à 0.

J'ai modifier et ajouté un event onclick en plus et j'ai fait passé la variable $j a ta function si tu voit ce qu'il faut faire après ;).
(Je suis dispo sur le chat si ta besoin)