Discussion :

[Beltharion]

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 :

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
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 :

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
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...

[Beltharion]

Finalement j'ai résolu mon problème.

Je me suis rendu compte que le faire appel à une fonction

Code :

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

1
2
 
<input ... onclick="maj_commerce()"/>

sans le this n'était pas une bonne idée.

Du coup j'ai le code suivant :
dans le html :

Code :

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

1
2
 
<input type="radio" ... onclick="maj_commerce(this)"/>

dans mon js :
1) j'ai ajouté un argument aux fonctions maj_commerce() et get_commerce():

Code :

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

1
2
3
4
 
function maj_commerce(btnRadio){
	get_commerce(btnRadio);
}

2) dans la fonction get_commerce(btnRadio), var ajaxData devient :

Code :

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

1
2
3
4
5
6
7
 
function get_commerce(btnRadio){
	var ajaxData = {
		inlineRadioOptions: $(btnRadio).val()
	};
	...
}

Voilà du coup c'est résolu !