[AJAX] Listes liées - CodeIgniter
Bonjour,
je suis entrain de travailler sur un formulaire où j'ai 4 listes qui doivent s'actualiser en fonction du choix de l'option de la précédente.
J'utilise le framework CodeIgniter. Je suis débutant dans l'ajax et le fait de combiner les 2, me déstabilise encore plus.
Sur les 2 premières listes, il n'y a pas de problèmes, ça marche correctement. Je choisi un élément dans la première liste et la seconde s'actualise en fonction de ce choix.
Par contre quand je choisi un élément dans la deuxième liste, la troisième ne s'actualise pas.
J'ai remarqué que quand j'essaye de récupérer la valeur de l'item sélectionne dans la deuxième liste, celle-ci est vide et donc la requête à la bdd ne peut pas s'effectuée.
Je pense donc que le problème vient de la, mais je ne vois pas comment le régler.
De plus, est-ce normal quand je fais afficher le code source de la page après avoir sélectionné un élément dans la première liste, il n'y ai rien dans mon deuxième select ?
Voici ma vue :
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
| <div class="bloc">
<div class="bleft">
<label for="secteurPro">Secteur professionnel</label>
</div>
<div class="bright">
<select id="secteurPro" name="secteurPro" class="secteurPro">
<option value="0">-- Choisissez --</option>
<?php
if(isset($secteurs[0]))
{
for($i=0; $i < count($secteurs); $i++)
{
echo '<option value="'.$secteurs[$i]->id_sect_pro.'">'.$secteurs[$i]->lib_sect_pro.'</option>';
}
}
?>
</select>
<?php echo form_error('secteurPro', '<div class="notice error"><i class="icon-remove-sign icon-large"></i><a href="#close" class="icon-remove"></a>', '</div>'); ?>
</div>
<div class="clear"></div>
</div>
<div class="bloc">
<div class="bleft">
<label for="sousDomaine" id="l_ss">Sous domaine</label>
</div>
<div class="bright">
<select id="sousDomaine" name="sousDomaine" class="sousDomaine">
<option value="0">-- Choisissez un secteur --</option>
</select>
<?php echo form_error('sousDomaine', '<div class="notice error"><i class="icon-remove-sign icon-large"></i><a href="#close" class="icon-remove"></a>', '</div>'); ?>
</div>
<div class="clear"></div>
</div>
<div class="bloc">
<div class="bleft">
<label for="precisionSousDomaine" id="l_prec">Précision du sous domaine</label>
</div>
<div class="bright">
<select id="precisionSousDomaine" name="precisionSousDomaine" class="precisionSousDomaine">
<option value="0">-- Choisissez --</option>
</select>
<?php echo form_error('precisionSousDomaine', '<div class="notice error"><i class="icon-remove-sign icon-large"></i><a href="#close" class="icon-remove"></a>', '</div>'); ?>
</div>
</div> |
Mon controleur :
Code:
1
2
3
4
5
6
7
8
9
10
11
| public function sous_domaine($secteurPro)
{
header('Content-Type: application/x-json; charset=utf-8');
echo(json_encode($this->M_Experience->sous_domaine($secteurPro)));
}
public function prec_sous_domaine($sous_domaine)
{
header('Content-Type: application/x-json; charset=utf-8');
echo(json_encode($this->M_Experience->prec_sous_domaine($sous_domaine)));
} |
Le script :
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
| $(document).ready(function() {
$('#secteurPro').change(function(){
var region_id = $('#secteurPro').val();
if (region_id != ""){
var post_url = "sous_domaine/" + region_id;
$.ajax({
type: "POST",
dataType: "json",
url: post_url,
success: function(sousDomaine){
$('#sousDomaine').empty();
$('#sousDomaine,#l_ss').show();
$('#sousDomaine').append('<option>-- Choisissez un sous-domaine --</option>'); // On ajoute l'option manquante
$.each(sousDomaine,function(sousDomaine_ID,sousDomaineNom) {
var opt = $('<option/>');
opt.val(sousDomaine_ID.id_ss_dom_pro);
opt.text(sousDomaineNom.lib_ss_dom_pro);
$('#sousDomaine').append(opt);
});
} //end success
}); //end AJAX
}
else
{
$('#sousDomaine').empty();
$('#sousDomaine').hide();
}//end if
}); //end change
});
$(document).ready(function() {
$('#sousDomaine').change(function(){
var sousDomaine_id = $('#sousDomaine').val; // Ici c'est vide :s
if (sousDomaine_id != "")
{
var post_url = "prec_sous_domaine/" + sousDomaine_id;
$.ajax({
type: "POST",
dataType: "json",
url: post_url,
success: function(district)
{
$('#precisionSousDomaine').empty();
$('#precisionSousDomaine,#l_prec').show();
$('#precisionSousDomaine').append('<option>-- Choisissez un sous-domaine --</option>');
$.each(district,function(District_ID,DistrictNom)
{
var opt = $('<option/>');
opt.val(District_ID.id_prec_ss_dom_pro);
opt.text(DistrictNom.lib_prec_ss_domaine);
$('#precisionSousDomaine').append(opt);
});
} //end success
}); //end AJAX
}
else
{
$('#precisionSousDomaine').empty();
$('#precisionSousDomaine').hide();
}//end if
}); //end change
}); |
Je n'ai pas réussi à trouver de réponse après plusieurs heures de recherches. Soit les sujets parlent de 2 listes liées maximum soit codeigniter n'est pas présent.
Merci
[EDIT] : Je viens de trouver l'erreur :
c'était un problème avec les clés et les valeurs :
Code:
1
2
3
4
5
6
7
|
$.each(sousDomaine,function(sousDomaine_ID,sousDomaineNom){
var opt = $('<option/>');
opt.val(sousDomaine_ID.id_ss_dom_pro);
opt.text(sousDomaineNom.lib_ss_dom_pro);
$('#sousDomaine').append(opt);
}); |
devient
Code:
1
2
3
4
5
6
7
|
$.each(sousDomaine,function(sousDomaine_ID,sousDomaineNom){
var opt = $('<option/>');
opt.val(sousDomaineNom.id_ss_dom_pro);
opt.text(sousDomaineNom.lib_ss_dom_pro);
$('#sousDomaine').append(opt);
}); |
