Mise à jour tableau en fonction d'un radio button
Salut tous le monde !!!!
Je me tourne vers pour avoir un petit coup de main. Comme l'indique l'intitulé de la discussion, je souhaite mettre à jour un tableau en fonction du radio button sélectionné.
Mon code html contenant les radio et le tableau :
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
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
|
<form action="" method="post" class="text-center">
<fieldset class="scheduler-border text-center">
<legend class="scheduler-border">Choix du continent</legend>
<label class="radio-inline"> <input type="radio"
name="inlineRadioOptions" id="inlineRadio" value="Atrodia"
checked="checked" onClick="maj_commerce()"> Atrodia </label>
<label class="radio-inline"> <input type="radio"
name="inlineRadioOptions" id="inlineRadio" value="Corlantae"
onClick="maj_commerce()">
Corlantae </label>
<label class="radio-inline"> <input type="radio"
name="inlineRadioOptions" id="inlineRadio" value="Hepothysus"
onClick="maj_commerce()">
Hepothysus
</label>
<label class="radio-inline"> <input type="radio"
name="inlineRadioOptions" id="inlineRadio" value="Olegea"
onClick="maj_commerce()">
Olegea
</label>
<label class="radio-inline"> <input type="radio"
name="inlineRadioOptions" id="inlineRadio" value="Revus"
onClick="maj_commerce()">
Revus
<label class="radio-inline"> <input type="radio"
name="inlineRadioOptions" id="inlineRadio" value="Tertio"
onClick="maj_commerce()">
Tertio
</label>
<label class="radio-inline"> <input type="radio"
name="inlineRadioOptions" id="inlineRadio" value="Verkonos"
onClick="maj_commerce()">
Verkonos
</label>
</fieldset>
</form>
<table>
<tr>
<th class="vendu" colspan="4">Vendu</th>
<th class="recherche" colspan="4">Recherché</th>
</tr>
<tr>
<th class="viv_mat" colspan="2">Vivre</th>
<th class="viv_mat" colspan="2">Matériau</th>
<th class="viv_mat" colspan="2">Vivre</th>
<th class="viv_mat" colspan="2">Matériau</th>
</tr>
<tr>
<td>Nom</td>
<td>Prix (PA)</td>
<td>Nom</td>
<td>Prix (PA)</td>
<td>Nom</td>
<td>Prix (PA)</td>
<td>Nom</td>
<td>Prix (PA)</td>
</tr>
<tr>
<td id="viv1"></td>
<td id="prix_v1"></td>
<td id="mat1"></td>
<td id="prix_m1"></td>
<td id="viv_r"></td>
<td id="prix_rv"></td>
<td id="mat_r"></td>
<td id="prix_rm"></td>
</tr>
<tr>
<td id="viv2"></td>
<td id="prix_v2"></td>
<td id="mat2"></td>
<td id="prix_m2"></td>
<td id="viv_r"></td>
<td id="prix_rv"></td>
<td id="mat_r"></td>
<td id="prix_rm"></td>
</tr>
<tr>
<td id="viv3"></td>
<td id="prix_v3"></td>
<td id="mat3"></td>
<td id="prix_m3"></td>
<td id="viv_r"></td>
<td id="prix_rv"></td>
<td id="mat_r"></td>
<td id="prix_rm"></td>
</tr>
<tr>
<td id="viv4"></td>
<td id="prix_v4"></td>
<td id="mat4"></td>
<td id="prix_m4"></td>
<td id="viv_r"></td>
<td id="prix_rv"></td>
<td id="mat_r"></td>
<td id="prix_rm"></td>
</tr>
<tr>
<td id="viv5"></td>
<td id="prix_v5"></td>
<td id="mat5"></td>
<td id="prix_m5"></td>
<td id="viv_r"></td>
<td id="prix_rv"></td>
<td id="mat_r"></td>
<td id="prix_rm"></td>
</tr>
<tr>
<td id="viv6"></td>
<td id="prix_v6"></td>
<td id="mat6"></td>
<td id="prix_m6"></td>
<td id="viv_r"></td>
<td id="prix_rv"></td>
<td id="mat_r"></td>
<td id="prix_rm"></td>
</tr>
</table> |
Ma procédure :
J'ai un scipt.js (ajax) pour mettre à jour l'affichage du tableau :
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
|
// Fonction de mise à jour
$(document).ready(function() {get_commerce();});
// Evenement sur les radio bouton commerce
function maj_commerce(){
$(document).ready(function (){
get_commerce();
});
}
function get_commerce(){
var ajaxData = {
inlineRadioOptions: $('#inlineRadio').val()
};
$.ajax({
method: 'POST',
url: "includes/php/commerce.php",
data: ajaxData,
dataType: 'json'
}).done(function(jsonResult){
var taille = jsonResult.commerce_normal.length;
var id_html_v = Array('#viv1','#viv2','#viv3','#viv4','#viv5'
,'#viv6');
var id_html_vp = Array('#prix_v1','#prix_v2','#prix_v3','#prix_v4','#prix_v5'
,'#prix_v6');
var id_html_m = Array('#mat1','#mat2','#mat3','#mat4','#mat5'
,'#mat6');
var id_html_mp = Array('#prix_m1','#prix_m2','#prix_m3','#prix_m4','#prix_m5'
,'#prix_m6');
for (var i=0 ; i<taille+1 ; i++){
//Affichage vivres
$(id_html_v[i]).html(jsonResult.commerce_normal[i].vivre);
// Affichage du prix des vivres
$(id_html_vp[i]).html(jsonResult.commerce_normal[i].vp);
//Affichage du prix des materiaux
$(id_html_mp[i]).html(jsonResult.commerce_normal[i].mp);
//Affichage materiaux
$(id_html_m[i]).html(jsonResult.commerce_normal[i].materiau);
}
});
} |
L'ajax fait appel à un code php qui me retourne le bon résultat.
Mon problème
Lorsque je charge la page, la fonction get_commerce() est bien appelée et mon tableau se remplit avec les valeurs attendues.
Cependant lorsque je click sur un autre radio button, la fonction get_commerce() est bien appelé mais garde la valeur par défaut.
Ainsi le tableau ne se met pas à jour et je ne comprend pas pourquoi...
