Exécuter une fonction java à l'intérieur d'une fonction javascript

Version imprimable

Bonjour à tous,

j'ai un problème avec l'exécution de la boucle while de mon javascript.
Sur ma page jsp, j'ai le script ci-dessous qui me permet d'imprimer des données provenant de mon bean saisieReception
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 <h:panelGroup rendered="#{!saisieReception.multiPrintConditionnementVide}"> <ui:param name="numCarton" value="#{saisieReception.currentConditionnements.indexOf(saisieReception.printConditionnement)+1}" /> <ui:param name="numCartonRsd" value="#{numCarton}/#{saisieReception.nbCartonRsd}" /> <ui:param name="numCartonHdd" value="#{numCarton}/#{saisieReception.nbCartonHdd}" /> <script type="text/javascript"> $(document).ready(function() { alert("panel multiPrintConditionnement -> size = "+ '#{saisieReception.multiPrintConditionnement.size()}'); var i = '#{saisieReception.multiPrintConditionnement.size()}'; var test = 0; while (i>0){ test = '#{saisieReception.impressionEtiquettes}'; alert("test print "+test); printReception(1, '#{saisieReception.printConditionnement.itemId}', '#{saisieReception.currentArticle.pn}','#{saisieReception.numeroReception}', '#{saisieReception.currentFabricant.referenceFabricant}','#{saisieReception.currentArticle.libArticle}', #{saisieReception.printConditionnement.quantite},'#{saisieReception.currentArticle.hdd ? numCartonHdd : numCartonRsd}','#{saisieReception.formattedDateReception}', '#{saisieReception.currentPays.idePays}','#{saisieReception.currentAffectation.idEmplacement}'); i--; } }); </script> </h:panelGroup>
dans mon while j'appelle une fonction du bean saisieReception.getImpressionEtiquettes qui met à jour mon objet saisieReception.printConditionnement ce objet est ensuite passé en paramètre à la function javascript printReception() pour impression, ci-dessous la fonction du bean saisieReception.getImpressionEtiquettes
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 public Integer getImpressionEtiquettes(){ if(inc < nbConditionnement){ clearPrintConditionnement(); setPrintConditionnement(multiPrintConditionnement.get(inc)); inc = inc +1; LOGGER.info("inc => " +inc); return inc; }else { LOGGER.info("dans le else => " +inc); // à ce niveau inc doit etre = à nbConditionnement inc = 0; return 0; } }
mon problème c'est que la fonction saisieReception.getImpressionEtiquettes n'est appelé qu'une seule fois dans la boucle while ce qui fait que: si par exple mon i = 4 dans le while, il boucle bien 4 fois et imprime 4 étiquettes mais avec les memes données parce que la fonction saisieReception.getImpressionEtiquettes est exécutée une seule fois

Quelqu'un aurait-il une idée du pourquoi ma boucle while de ma fonction javascript n'appelle qu'une fois au premier tour la fonction du bean et pas les autres fois? Je vous remercie d'avance!

02/04/2014, 11h53
fredoche

Citation:

Envoyé par nakry

Quelqu'un aurait-il une idée du pourquoi ma boucle while de ma fonction javascript n'appelle qu'une fois au premier tour la fonction du bean et pas les autres fois? Je vous remercie d'avance!

salut

oui tu confonds exécution coté client (navigateur web - javascript) et coté serveur. (JSP)

regarde ton code source dans le navigateur, tu vas comprendre. Ta boucle javascript boucle 4 fois (i fois) sur les mêmes données
02/04/2014, 13h42
nakry

Citation:

Envoyé par fredoche

regarde ton code source dans le navigateur, tu vas comprendre. Ta boucle javascript boucle 4 fois (i fois) sur les mêmes données

oui j'ai vu le code source dans le navigateur et je crois comprendre ce que tu veux dire,

mais justement la méthode java qui est à l'intérieur du while est censé raffraichir ces données,

ce que je ne comprends pas c'est que cette méthode est quand meme appelée une fois dans le while pas les autres fois
02/04/2014, 15h49
fredoche

la méthode est appelée une fois coté serveur, elle insère les données dans ton flux http, ta page html par exemple

la boucle est exécutée coté client, elle est appelée i fois, mais les données ont déjà été insérées coté serveur, elle ne changeront pas si tu gardes ce schéma d'exécution
02/04/2014, 16h16
nakry

Merci fredoche pour cet éclairecissement, je vais éssayer une autre méthode (les web service par exemple) je vous tiens au courant de l'avancé

:)
02/04/2014, 20h57
freddou17

Salut,

Tu ne veux pas regarder tu coté de l'ajax avant d'aller regarder les webservices...8O :D

++
03/04/2014, 10h28
nakry

OK entendu et merci encore :ccool:

Bonjour à tous,

je reviens vers vous parce que je n'en sors pas avec le javascript :aie:

voilà ce que j'ai fais:

j'ai défini cette fonction javascript multiImpression() dans ma vue saisie-reception.xhtml

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
 
<h:outputScript library="js" name="cab-printer.js" />
	<script type="text/javascript">
		function multiImpression(){
			alert ("dans le multiimpression ajax "); 
			var request = getXhr();
			var test;
			var url = '#{saisieReception.impressionEtiquettes}'; //	saisieReception est mon controleur  et impressionEtiquettes la méthode java que je veux exécuter
 
			// On défini ce qu'on va faire quand on aura la réponse 
			request.onreadystatechange = function(){ //c'est le callback 
				// On ne fait quelque chose que si on a tout reçu et que le serveur est ok 
				if(request.readyState == 4){
					if(request.status == 200){
						alert(request.responseText);														
						printReception(1, '#{saisieReception.printConditionnement.itemId}', '#{saisieReception.currentArticle.pn}','#{saisieReception.numeroReception}', '#{saisieReception.currentFabricant.referenceFabricant}','#{saisieReception.currentArticle.libArticle}', #{saisieReception.printConditionnement.quantite},'#{saisieReception.currentArticle.hdd ? numCartonHdd : numCartonRsd}','#{saisieReception.formattedDateReception}', '#{saisieReception.currentPays.idePays}','#{saisieReception.currentAffectation.idEmplacement}');		
					}							
				}
			}
 
			alert ("url = "+url);
			request.open("GET",url,true);
			request.send(null);
		}
	</script>

la fonction getXhr(); est définie dans le fichier cab-printer.js comme suit:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
 
function getXhr(){
	var xhr = null; 
	if(window.XMLHttpRequest) // Firefox et autres
	   xhr = new XMLHttpRequest(); 
	else if(window.ActiveXObject){ // Internet Explorer 
		try {
			xhr = new ActiveXObject("Msxml2.XMLHTTP");
        } catch (e) {
            xhr = new ActiveXObject("Microsoft.XMLHTTP");
        }
	}
	else { // XMLHttpRequest non supporté par le navigateur 
	   alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest..."); 
	   xhr = false; 
	} 
    return xhr;
}

j'appelle un peu plus haut dans ma vue la fonction multiImpression() dans un <h:panelGroup>

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
 
<h:panelGroup rendered="#{!saisieReception.multiPrintConditionnementVide}">
				<ui:param name="numCarton" value="#{saisieReception.currentConditionnements.indexOf(saisieReception.printConditionnement)+1}" />				
				<ui:param name="numCartonRsd" value="#{numCarton}/#{saisieReception.nbCartonRsd}" />
				<ui:param name="numCartonHdd" value="#{numCarton}/#{saisieReception.nbCartonHdd}" />
				<script type="text/javascript">				
					$(document).ready(function() {
						alert("panel multiPrintConditionnement -> size = "+ '#{saisieReception.multiPrintConditionnement.size()}'); 
						var i = '#{saisieReception.multiPrintConditionnement.size()}';
						while (i>0){
							alert("dans le while i = "+i); 
							multiImpression();
							i--;	
							alert("dans le while i-- = "+i);						
						}			
					});
				</script>
			</h:panelGroup>

lorsque j'exécute mon code, il se passe rien côté appel ajax et dans Firebug j'ai une erreur comme quoi la méthode multiImpression() est indéfinie :(

c'est certainement due au fait que j'ai mal écris mes fonctions javascripts pour faire l'appel ajax, mais je ne sais pas comment rectifier car j'ai peu d'expérience dans ce domaine, j'ai essayé les 2 méthodes POST et GET mais ça marche toujours pas

aidez moi SVP

09/04/2014, 13h20
freddou17

Essaie de tester de manière indépendante l'appel AJAX.
- test avec des valeurs bouchonnées
- ressort ton $document.ready...

Tu peux donner le code généré de ta page stp

Citation:

Envoyé par freddou17

Essaie de tester de manière indépendante l'appel AJAX.
- test avec des valeurs bouchonnées
- ressort ton $document.ready...

je fais le test et je te dis ça tout de suite

Citation:

Envoyé par freddou17

Tu peux donner le code généré de ta page stp

code source de ma page après que j'ai tenté l'appel ajax

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
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head><link type="text/css" rel="stylesheet" href="/reception/javax.faces.resource/theme.css.jsf?ln=primefaces-aristo" /><link type="text/css" rel="stylesheet" href="/reception/javax.faces.resource/primefaces.css.jsf?ln=primefaces&amp;v=4.0" /><script type="text/javascript" src="/reception/javax.faces.resource/jquery/jquery.js.jsf?ln=primefaces&amp;v=4.0"></script><script type="text/javascript" src="/reception/javax.faces.resource/jquery/jquery-plugins.js.jsf?ln=primefaces&amp;v=4.0"></script><script type="text/javascript" src="/reception/javax.faces.resource/primefaces.js.jsf?ln=primefaces&amp;v=4.0"></script><link type="text/css" rel="stylesheet" href="/reception/javax.faces.resource/normal.css.jsf?ln=css" />
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<title>Reception Web</title></head><body>
<form id="j_idt6" name="j_idt6" method="post" action="/reception/saisie-reception.jsf" enctype="application/x-www-form-urlencoded">
<input type="hidden" name="j_idt6" value="j_idt6" />
<div id="j_idt6:j_idt7" class="ui-panel ui-widget ui-widget-content ui-corner-all" style="width: 400px; position: absolute; right: 0px;" data-widget="widget_j_idt6_j_idt7"><div id="j_idt6:j_idt7_header" class="ui-panel-titlebar ui-widget-header ui-helper-clearfix ui-corner-all"><span class="ui-panel-title">Utilisateur : SOUMAH FATOUMATA (99999990)</span></div><div id="j_idt6:j_idt7_content" class="ui-panel-content ui-widget-content"><a href="/reception/accueil.jsf">Accueil</a> - 
			<a id="j_idt6:j_idt11" href="#" class="ui-commandlink ui-widget" onclick="PrimeFaces.addSubmitParam('j_idt6',{'j_idt6:j_idt11':'j_idt6:j_idt11'}).submit('j_idt6');return false;">Déconnecter</a></div></div><script id="j_idt6:j_idt7_s" type="text/javascript">PrimeFaces.cw('Panel','widget_j_idt6_j_idt7',{id:'j_idt6:j_idt7'});</script><input type="hidden" name="javax.faces.ViewState" id="javax.faces.ViewState" value="2421317389409543805:-3836440385584729294" autocomplete="off" />
 
</form>
<form id="searchReceptionForm" name="searchReceptionForm" method="post" action="/reception/saisie-reception.jsf" enctype="application/x-www-form-urlencoded" style="display: none;">
<input type="hidden" name="searchReceptionForm" value="searchReceptionForm" />
<input id="searchNumReception" type="hidden" name="searchNumReception" /><input id="searchLngReception" type="hidden" name="searchLngReception" /><input id="searchCodeVendeur" type="hidden" name="searchCodeVendeur" /><input id="explicitSearch" type="hidden" name="explicitSearch" value="false" /><button id="searchReception" name="searchReception" class="" onclick="PrimeFaces.ab({source:'searchReception',update:'formSaisie'});return false;" type="submit"><span class="ui-button-text ui-c">ui-button</span></button><script id="searchReception_s" type="text/javascript">PrimeFaces.cw('CommandButton','widget_searchReception',{id:'searchReception'});</script>
		<script type="text/javascript">
		function searchReception() {
			$("#searchNumReception").val($("#numeroReception").val());
			$("#searchLngReception").val($("#ligneReception").val());
			$("#searchCodeVendeur").val($("#codeVendeur").val());
			$("#searchReception").click();
		}
		function trySearchReception() {
			$("#explicitSearch").val("false");
			searchReception();
		}
		function explicitSearchReception() {
			$("#explicitSearch").val("true");
			searchReception();
		}
		</script><input type="hidden" name="javax.faces.ViewState" id="javax.faces.ViewState" value="2421317389409543805:-3836440385584729294" autocomplete="off" />
</form>
<form id="formReception" name="formReception" method="post" action="/reception/saisie-reception.jsf" enctype="application/x-www-form-urlencoded" style="width: 830px;">
<input type="hidden" name="formReception" value="formReception" />
<div id="formSaisie" class="ui-panel ui-widget ui-widget-content ui-corner-all" style="border: none; padding: 0px; margin: 0px;" data-widget="widget_formSaisie"><div id="formSaisie_content" class="ui-panel-content ui-widget-content"><div id="globalMessages" class="ui-messages ui-widget" aria-live="polite"></div><input id="receptionConditionnement" type="hidden" name="receptionConditionnement" value="false" /><input id="saisieNumSerieHdd" type="hidden" name="saisieNumSerieHdd" value="false" /><input id="rsd" type="hidden" name="rsd" value="false" /><input id="hdd" type="hidden" name="hdd" value="false" /><fieldset id="receptionSet" class="ui-fieldset ui-widget ui-widget-content ui-corner-all ui-hidden-container ui-fieldset-toggleable" data-widget="receptionSet"><legend class="ui-fieldset-legend ui-corner-all ui-state-default"><span class="ui-fieldset-toggler ui-icon ui-icon-minusthick"></span>Informations sur la réception</legend><div class="ui-fieldset-content"><table id="receiptPanel">
<tbody>
<tr>
<td class="field-label"><label for="numeroReception">
 
Numéro de réception : </label></td>
<td class="field-value"><input id="numeroReception" name="numeroReception" type="text" onchange="trySearchReception()" class="ui-inputfield ui-inputtext ui-widget ui-state-default ui-corner-all" /><script id="numeroReception_s" type="text/javascript">PrimeFaces.cw('InputText','widget_numeroReception',{id:'numeroReception'});</script></td>
<td class="field-message"><div id="j_idt15" aria-live="polite" class="ui-message"></div></td>
</tr>
<tr>
<td class="field-label"><label for="ligneReception">
Ligne de réception : </label></td>
<td class="field-value"><input id="ligneReception" name="ligneReception" type="text" onchange="trySearchReception()" class="ui-inputfield ui-inputtext ui-widget ui-state-default ui-corner-all" /><script id="ligneReception_s" type="text/javascript">PrimeFaces.cw('InputText','widget_ligneReception',{id:'ligneReception'});</script></td>
<td class="field-message"><div id="j_idt17" aria-live="polite" class="ui-message"></div></td>
</tr>
<tr>
<td class="field-label"><label for="dateReception">
Date de réception : </label></td>
 
<td class="field-value"><span id="dateReception"><input id="dateReception_input" name="dateReception_input" type="text" value="09/04/14" class="ui-inputfield ui-widget ui-state-default ui-corner-all" onchange="$('#enreg').click()" /></span><script id="dateReception_s" type="text/javascript">$(function(){PrimeFaces.cw('Calendar','widget_dateReception',{id:'dateReception',popup:true,locale:'fr_FR',dateFormat:'dd/mm/y',defaultDate:'09/04/14',showOn:'button'});});</script></td>
<td class="field-message"><div id="j_idt19" aria-live="polite" class="ui-message"></div></td>
</tr>
<tr>
<td class="field-label"><label for="quantite">
Quantité totale reçue : </label></td>
<td class="field-value"><input id="quantite" name="quantite" type="text" onchange="$('#enreg').click()" class="ui-inputfield ui-inputtext ui-widget ui-state-default ui-corner-all" /><script id="quantite_s" type="text/javascript">PrimeFaces.cw('InputText','widget_quantite',{id:'quantite'});</script></td>
<td class="field-message"><div id="j_idt21" aria-live="polite" class="ui-message"></div></td>
</tr>
</tbody>
</table>
<button id="j_idt22" name="j_idt22" type="button" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-icon-left" style="float: right;" onclick="explicitSearchReception(); return false;;window.open('/reception/saisie-reception.jsf','_self')"><span class="ui-button-icon-left ui-icon ui-c ui-icon-search"></span><span class="ui-button-text ui-c">Rechercher cette réception</span></button><script id="j_idt22_s" type="text/javascript">PrimeFaces.cw('Button','widget_j_idt22',{id:'j_idt22'});</script></div><input type="hidden" id="receptionSet_collapsed" name="receptionSet_collapsed" value="false" /></fieldset><script id="receptionSet_s" type="text/javascript">PrimeFaces.cw('Fieldset','receptionSet',{id:'receptionSet',toggleable:true,collapsed:false,toggleSpeed:500});</script><fieldset id="commandeSet" class="ui-fieldset ui-widget ui-widget-content ui-corner-all ui-hidden-container ui-fieldset-toggleable" data-widget="commandeSet"><legend class="ui-fieldset-legend ui-corner-all ui-state-default"><span class="ui-fieldset-toggler ui-icon ui-icon-minusthick"></span>Informations sur la commande</legend><div class="ui-fieldset-content"><table id="orderPanel">
 
<tbody>
<tr>
<td class="field-label"><label for="numeroCommande">
Numéro de commande : </label></td>
<td class="field-value"><input id="numeroCommande" name="numeroCommande" type="text" onchange="$('#enreg').click()" class="ui-inputfield ui-inputtext ui-widget ui-state-default ui-corner-all" /><script id="numeroCommande_s" type="text/javascript">PrimeFaces.cw('InputText','widget_numeroCommande',{id:'numeroCommande'});</script></td>
<td class="field-message"><div id="j_idt24" aria-live="polite" class="ui-message"></div></td>
</tr>
<tr>
<td class="field-label"><label for="ligneCommande">
Ligne de commande : </label></td>
<td class="field-value"><input id="ligneCommande" name="ligneCommande" type="text" onchange="$('#enreg').click()" class="ui-inputfield ui-inputtext ui-widget ui-state-default ui-corner-all" /><script id="ligneCommande_s" type="text/javascript">PrimeFaces.cw('InputText','widget_ligneCommande',{id:'ligneCommande'});</script></td>
<td class="field-message"><div id="j_idt26" aria-live="polite" class="ui-message"></div></td>
</tr>
 
<tr>
<td class="field-label"><label for="codeVendeur">
Code vendeur : </label></td>
<td class="field-value"><input id="codeVendeur" name="codeVendeur" type="text" onchange="$('#enreg').click()" class="ui-inputfield ui-inputtext ui-widget ui-state-default ui-corner-all" /><script id="codeVendeur_s" type="text/javascript">PrimeFaces.cw('InputText','widget_codeVendeur',{id:'codeVendeur',behaviors:{change:function(event,ext){PrimeFaces.bc(this,event,ext,['PrimeFaces.ab({source:\'codeVendeur\',event:\'change\',process:\'codeVendeur\',update:\'orderPanel\'}, arguments[1]);']);}}});</script></td>
<td class="field-message"><div id="j_idt28" aria-live="polite" class="ui-message"></div></td>
</tr>
</tbody>
</table>
</div><input type="hidden" id="commandeSet_collapsed" name="commandeSet_collapsed" value="false" /></fieldset><script id="commandeSet_s" type="text/javascript">PrimeFaces.cw('Fieldset','commandeSet',{id:'commandeSet',toggleable:true,collapsed:false,toggleSpeed:500});</script><fieldset id="articleSet" class="ui-fieldset ui-widget ui-widget-content ui-corner-all ui-hidden-container ui-fieldset-toggleable" data-widget="articleSet"><legend class="ui-fieldset-legend ui-corner-all ui-state-default"><span class="ui-fieldset-toggler ui-icon ui-icon-minusthick"></span>Informations sur l'article</legend><div class="ui-fieldset-content"><table id="articlePanel">
<tbody>
<tr>
<td class="field-label"><label for="codeArticle">
Code article : </label></td>
 
<td class="field-value"><input id="codeArticle" name="codeArticle" type="text" class="ui-inputfield ui-inputtext ui-widget ui-state-default ui-corner-all" /><script id="codeArticle_s" type="text/javascript">PrimeFaces.cw('InputText','widget_codeArticle',{id:'codeArticle',behaviors:{change:function(event,ext){PrimeFaces.bc(this,event,ext,['PrimeFaces.ab({source:\'codeArticle\',event:\'change\',process:\'codeArticle\',update:\'articlePanel\'}, arguments[1]);']);}}});</script></td>
<td class="field-message"><div id="j_idt30" aria-live="polite" class="ui-message"></div></td>
</tr>
<tr>
<td class="field-label"><label for="typeArticle">
Type : </label></td>
<td class="field-value"><span id="typeArticle"></span></td>
<td class="field-message"><div id="j_idt32" aria-live="polite" class="ui-message"></div></td>
</tr>
<tr>
<td class="field-label"><label for="paysArticle">
Pays d'origine : </label></td>
<td class="field-value"><div id="paysArticle" class="ui-selectonemenu ui-widget ui-state-default ui-corner-all ui-helper-clearfix ui-state-disabled"><div class="ui-helper-hidden-accessible"><select id="paysArticle_input" name="paysArticle_input" disabled="disabled"><option value="" selected="selected"></option></select></div><div class="ui-helper-hidden-accessible"><input id="paysArticle_focus" name="paysArticle_focus" type="text" disabled="disabled" /></div><label id="paysArticle_label" class="ui-selectonemenu-label ui-inputfield ui-corner-all">&nbsp;</label><div class="ui-selectonemenu-trigger ui-state-default ui-corner-right"><span class="ui-icon ui-icon-triangle-1-s"></span></div><div id="paysArticle_panel" class="ui-selectonemenu-panel ui-widget-content ui-corner-all ui-helper-hidden ui-shadow"><div class="ui-selectonemenu-items-wrapper" style="height:auto"><ul class="ui-selectonemenu-items ui-selectonemenu-list ui-widget-content ui-widget ui-corner-all ui-helper-reset"><li class="ui-selectonemenu-item ui-selectonemenu-list-item ui-corner-all" data-label="&amp;nbsp;">&nbsp;</li></ul></div></div></div><script id="paysArticle_s" type="text/javascript">$(function(){PrimeFaces.cw('SelectOneMenu','paysArticleVar',{id:'paysArticle',onchange:function(){$('#enreg').click()}});});</script></td>
 
<td class="field-message"><div id="j_idt35" aria-live="polite" class="ui-message"></div></td>
</tr>
<tr>
<td class="field-label"><label for="fabricantArticle">
fabricant : </label></td>
<td class="field-value"><div id="fabricantArticle" class="ui-selectonemenu ui-widget ui-state-default ui-corner-all ui-helper-clearfix ui-state-disabled"><div class="ui-helper-hidden-accessible"><select id="fabricantArticle_input" name="fabricantArticle_input" disabled="disabled"></select></div><div class="ui-helper-hidden-accessible"><input id="fabricantArticle_focus" name="fabricantArticle_focus" type="text" disabled="disabled" /></div><label id="fabricantArticle_label" class="ui-selectonemenu-label ui-inputfield ui-corner-all">&nbsp;</label><div class="ui-selectonemenu-trigger ui-state-default ui-corner-right"><span class="ui-icon ui-icon-triangle-1-s"></span></div><div id="fabricantArticle_panel" class="ui-selectonemenu-panel ui-widget-content ui-corner-all ui-helper-hidden ui-shadow"><div class="ui-selectonemenu-items-wrapper" style="height:auto"><ul class="ui-selectonemenu-items ui-selectonemenu-list ui-widget-content ui-widget ui-corner-all ui-helper-reset"></ul></div></div></div><script id="fabricantArticle_s" type="text/javascript">$(function(){PrimeFaces.cw('SelectOneMenu','widget_fabricantArticle',{id:'fabricantArticle',onchange:function(){$('#enreg').click()}});});</script></td>
<td class="field-message"><div id="j_idt38" aria-live="polite" class="ui-message"></div></td>
</tr>
</tbody>
</table>
</div><input type="hidden" id="articleSet_collapsed" name="articleSet_collapsed" value="false" /></fieldset><script id="articleSet_s" type="text/javascript">PrimeFaces.cw('Fieldset','articleSet',{id:'articleSet',toggleable:true,collapsed:false,toggleSpeed:500});</script>
 
			<script type="text/javascript">
				var snMatcher = /([a-zA-Z0-9]{0})/
			</script><div id="commande1" class="ui-panel ui-widget ui-widget-content ui-corner-all" style="border: none;" data-widget="widget_commande1"><div id="commande1_content" class="ui-panel-content ui-widget-content"><button id="enreg" name="enreg" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-icon-left" onclick="PrimeFaces.ab({source:'enreg',update:'formSaisie',onerror:function(xhr,status,error){updateFieldsetStatus();;},oncomplete:function(xhr,status,args){updateFieldsetStatus();;}});return false;" type="submit"><span class="ui-button-icon-left ui-icon ui-c ui-icon-disk"></span><span class="ui-button-text ui-c">Enregistrer</span></button><script id="enreg_s" type="text/javascript">PrimeFaces.cw('CommandButton','widget_enreg',{id:'enreg'});</script><button id="end" name="end" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-icon-left ui-state-disabled" onclick="PrimeFaces.ab({source:'end',update:'formSaisie',oncomplete:function(xhr,status,args){expandAll();;}});return false;" type="submit" disabled="disabled"><span class="ui-button-icon-left ui-icon ui-c ui-icon-circle-check"></span><span class="ui-button-text ui-c">Terminer</span></button><script id="end_s" type="text/javascript">PrimeFaces.cw('CommandButton','widget_end',{id:'end'});</script></div></div><script id="commande1_s" type="text/javascript">PrimeFaces.cw('Panel','widget_commande1',{id:'commande1'});</script></div></div><script id="formSaisie_s" type="text/javascript">PrimeFaces.cw('Panel','widget_formSaisie',{id:'formSaisie'});</script><input type="hidden" name="javax.faces.ViewState" id="javax.faces.ViewState" value="2421317389409543805:-3836440385584729294" autocomplete="off" />
 
</form><input id="keyscan" type="text" name="keyscan" value="" size="50" style="display: none;" /><script type="text/javascript" src="/reception/javax.faces.resource/keyscan.js.jsf?ln=js"></script>
	<script type="text/javascript">
	//<![CDATA[
		var recepMatcher = /([0-9]+):([0-9]+):([a-zA-Z0-9]+)/
		var cmdMatcher = /([0-9]+):([0-9]+)/
		var articleMatcher = /.+-.+/
		var qtyMatcher = /^([0-9]{1,4})$/
		var paysMatcher = /([A-Z]{2,3})/
		var modelMatcher = /([a-zA-Z0-9\-]{4,})/
		var rsdMatcher = /([a-zA-Z0-9]{4,})/
		bindKeyScan($("#keyscan"), function() {
			var value = $.trim($("#keyscan").val());
			$("#keyscan").val("");
			if($("#receptionConditionnement").val().toLowerCase() == "false") { //on n'est pas en reception de conditionnement 
				//step 1 
				if(recepMatcher.test(value)) {
					var groups = recepMatcher.exec(value)
					$("#numeroReception").val(groups[1]);
					$("#ligneReception").val(groups[2]);
					$("#codeVendeur").val(groups[3]);
					trySearchReception();
					$('#enreg').click()
				} else if(cmdMatcher.test(value)) {
					var groups = cmdMatcher.exec(value)
					$("#numeroCommande").val(groups[1]);
					$("#ligneCommande").val(groups[2]);
					$('#enreg').click()
				} else if(articleMatcher.test(value)) {
					$("#codeArticle").val(value);
					$("#codeArticle").change();
					$('#enreg').click()
				} else if(qtyMatcher.test(value)) {
					var groups = qtyMatcher.exec(value)
					$("#quantite").val(groups[1]);
					$('#enreg').click()
				} else if(paysMatcher.test(value)) {
					var groups = paysMatcher.exec(value)
					PF('paysArticleVar').selectValue(groups[1]);
					$('#enreg').click()
				}
			} else if($("#saisieNumSerieHdd").val().toLowerCase() == "false"){ 
				//step 2 
				if(qtyMatcher.test(value)) {
					var groups = qtyMatcher.exec(value);
					$("#quantiteDansLeConditionnement").val(groups[1]);
					if($("#hdd").val() == "false") {// - Pas dans le cas d'un HDD car il faudra saisir les numéros de série 
						//On essaye de valider automatiquement. 						
						if($("#rsd").val() == "false" || !$.empty($("#numConditionnement").val())) {
							//- Dans le cas d'un RSD, on vérifie que l'id RSD a déjà été renseigné  
							$("#addConditionnement").click();
						}
					}
				} else {
					if($("#hdd").val() == "true") {
						if(modelMatcher.test(value)) {
							var groups = modelMatcher.exec(value);
							$("#modeleHdd").val(groups[1]);
							$('#enreg').click();
						}
					} else if($("#rsd").val() == "true") {
							if(rsdMatcher.test(value)) {
								var groups = rsdMatcher.exec(value);
								$("#numConditionnement").val(groups[1]);
								//On essaye de valider automatiquement
								if(!$.empty($("#quantiteDansLeConditionnement").val())) { // - On vérifie que la quantité est déjà renseignée 									
									$("#addConditionnement").click();
								}
							}
						} 
				}
			} else {
				//Step 3
				if(snMatcher.test(value)) {
					var groups = snMatcher.exec(value);
					$("#numSerie").val(groups[1]);
					$('#ajouterNumSerie').click();
				}
			}
		});
 
		function expandAll() {
			if(receptionSet.cfg.collapsed) {
				receptionSet.toggle();
			}
			if(commandeSet.cfg.collapsed) {
				commandeSet.toggle();
			}
			if(articleSet.cfg.collapsed) {
				articleSet.toggle();
			}
		}
		function collapseAll() {
			if(!receptionSet.cfg.collapsed) {
				receptionSet.toggle();
			 }
			 if(!commandeSet.cfg.collapsed) {
				commandeSet.toggle();
			}
			if(!articleSet.cfg.collapsed) {
				articleSet.toggle();
			}
		}
 
		function updateFieldsetStatus() {
			if($("#receptionConditionnement").val() == "true" || $("#saisieNumSerieHdd").val() == "true") {
				collapseAll();
			} else {
				expandAll();
			}
		}
		//]]>
	</script><script type="text/javascript" src="/reception/javax.faces.resource/cab-printer.js.jsf?ln=js"></script>
	<script type="text/javascript">
		function printReception(quantiteEtiquette, itemId, pn, numReception, refFournisseur, libArticle, quantiteArticle, numConditionnement, date, coo, emplacement) {
			var values = {};
			values["TITEMID"] = 'ID : ' + itemId;
			values["BITEMID"] = itemId;
			values["TNUMRCP"] = numReception;
			values["BNUMRCP"] = numReception;
			values["REF"] = refFournisseur;
			values["LIBART"] = libArticle;
			values["TQTE"] = 'Qte : ' + quantiteArticle;
			values["BQTE"] = quantiteArticle;
			values["CONDI"] = numConditionnement;
			values["TDATE"] = 'Reception : ' + date;
			//values["BDATE"] = date;
			values["COO"] = 'COO : ' + coo;
			values["TPN"] = pn;
			values["BPN"] = pn;
			values["EMPLACE"] = emplacement;
			print("RECEPTIO.LBL", values, quantiteEtiquette, function(response) {
				//OK Callback 
					//alert("OK"); 
				}, function(errorCode, response) {
					//alert(errorCode +" : "+response); 
				});
		}
	</script>
	<script type="text/javascript">
		function multiImpression(){
			alert ("dans le multiimpression ajax ");
			var request = getXhr();
			var multiPrint = {};
			var test;
			var url = '0';	
 
			// On défini ce qu'on va faire quand on aura la réponse 
			request.onreadystatechange = function(){ //c'est le callback 
				// On ne fait quelque chose que si on a tout reçu et que le serveur est ok 
				if(request.readyState == 4){
					if(request.status == 200){
						alert(request.responseText);														
						printReception(1, '', '','', '','', ,'0/','09/04/14', '','');		
					}							
				}
			}
 
			alert ("url = "+url);
			request.open("GET",url,true);
			request.send(null);
		}
	</script></body>
</html>

Citation:

Envoyé par freddou17

Essaie de tester de manière indépendante l'appel AJAX.
- test avec des valeurs bouchonnées
- ressort ton $document.ready...

je l'ai sorti du $document.ready... comme ci-dessous

Code:

1
2
3
4
5
<script type="text/javascript">							
				alert("appel de multiImpression" ); 
				multiImpression();
				alert("fin appel de multiImpression" ); 
			</script>

et j'ai modifier l'url en mettant le nom de mon controleur / le nom de la méthode que je veux appeler parce que dans le code source de la page j'ai constaté qu'il ne voit pas mon controller

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
<h:outputScript library="js" name="cab-printer.js" />
	<script type="text/javascript">
		function multiImpression(){
			alert ("dans le multiimpression ajax ");
			var request = getXhr();
			var multiPrint = {};
			var test;
			var url = 'SaisieReceptionController.java/getImpressionEtiquettes';	
 
			// On défini ce qu'on va faire quand on aura la réponse 
			request.onreadystatechange = function(){ //c'est le callback 
				// On ne fait quelque chose que si on a tout reçu et que le serveur est ok 
				if(request.readyState == 4){
					if(request.status == 200){
						alert(request.responseText);														
						printReception(1, '#{saisieReception.printConditionnement.itemId}', '#{saisieReception.currentArticle.pn}','#{saisieReception.numeroReception}', '#{saisieReception.currentFabricant.referenceFabricant}','#{saisieReception.currentArticle.libArticle}', #{saisieReception.printConditionnement.quantite},'#{saisieReception.currentArticle.hdd ? numCartonHdd : numCartonRsd}','#{saisieReception.formattedDateReception}', '#{saisieReception.currentPays.idePays}','#{saisieReception.currentAffectation.idEmplacement}');		
					}							
				}
			}
 
			alert ("url = "+url);
			request.open("GET",url,true);
			request.send(null);
		}
	</script>

mais dand firebug il dit que multiImpression() est indéfinie du coup l'appel ajax marche pas

Citation:

Envoyé par nakry

je l'ai sorti du $document.ready... comme ci-dessous

Ce code là doit être après la définition de ta fonction multiImpression

CODE 1

Code:

1
2
3
4
5
<script type="text/javascript">							
				alert("appel de multiImpression" ); 
				multiImpression();
				alert("fin appel de multiImpression" ); 
			</script>

et j'ai modifier l'url en mettant le nom de mon controleur / le nom de la méthode que je veux appeler parce que dans le code source de la page j'ai constaté qu'il ne voit pas mon controller

CODE 2

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
<h:outputScript library="js" name="cab-printer.js" />
	<script type="text/javascript">
		function multiImpression(){
			alert ("dans le multiimpression ajax ");
			var request = getXhr();
			var multiPrint = {};
			var test;
			var url = 'SaisieReceptionController.java/getImpressionEtiquettes';	
 
			// On défini ce qu'on va faire quand on aura la réponse 
			request.onreadystatechange = function(){ //c'est le callback 
				// On ne fait quelque chose que si on a tout reçu et que le serveur est ok 
				if(request.readyState == 4){
					if(request.status == 200){
						alert(request.responseText);														
						printReception(1, '#{saisieReception.printConditionnement.itemId}', '#{saisieReception.currentArticle.pn}','#{saisieReception.numeroReception}', '#{saisieReception.currentFabricant.referenceFabricant}','#{saisieReception.currentArticle.libArticle}', #{saisieReception.printConditionnement.quantite},'#{saisieReception.currentArticle.hdd ? numCartonHdd : numCartonRsd}','#{saisieReception.formattedDateReception}', '#{saisieReception.currentPays.idePays}','#{saisieReception.currentAffectation.idEmplacement}');		
					}							
				}
			}
 
			alert ("url = "+url);
			request.open("GET",url,true);
			request.send(null);
		}
	</script>

mais dand firebug il dit que multiImpression() est indéfinie du coup l'appel ajax marche pas

Tu définis ta fonction trop tard...inverse Code 1 et Code 2

09/04/2014, 15h35
nakry

j'ai inversée les 2 codes mais j'ai toujours la même erreur multiImpression is not defined

????

Test basique car là....

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
 
 
<script type="text/javascript">
		function multiImpression(){
			alert ("dans le multiimpression ajax ");
			var request = getXhr();
			var multiPrint = {};
			var test;
			var url = 'SaisieReceptionController.java/getImpressionEtiquettes';	
 
			// On défini ce qu'on va faire quand on aura la réponse 
			request.onreadystatechange = function(){ //c'est le callback 
				// On ne fait quelque chose que si on a tout reçu et que le serveur est ok 
				if(request.readyState == 4){
					if(request.status == 200){
						alert(request.responseText);														
						printReception(1, '#{saisieReception.printConditionnement.itemId}', '#{saisieReception.currentArticle.pn}','#{saisieReception.numeroReception}', '#{saisieReception.currentFabricant.referenceFabricant}','#{saisieReception.currentArticle.libArticle}', #{saisieReception.printConditionnement.quantite},'#{saisieReception.currentArticle.hdd ? numCartonHdd : numCartonRsd}','#{saisieReception.formattedDateReception}', '#{saisieReception.currentPays.idePays}','#{saisieReception.currentAffectation.idEmplacement}');		
					}							
				}
			}
 
			alert ("url = "+url);
			request.open("GET",url,true);
			request.send(null);
		}
 
 
 
               multiImpression();
	</script>

Tu ne devrais pas avoir de undefined...si jamais tu en as un mets juste un alert dans la fonction multiImpression:roll::roll:

09/04/2014, 16h04
freddou17

Peux tu aussi remplacer

Code:

var multiPrint = {};

par

Code:

var multiPrint = new Array();

++

cette variable n'est plus utiliser, je viens de faire un nouveau test avec ce code

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<script type="text/javascript">
			function multiImpression(){
				alert ("dans le multiimpression ajax ");
				var request = getXhr();
				var url = 'SaisieReceptionController.java/getImpressionEtiquettes';	
 
				// On défini ce qu'on va faire quand on aura la réponse 
				request.onreadystatechange = function(){ //c'est le callback 
					// On ne fait quelque chose que si on a tout reçu et que le serveur est ok 
					if(request.readyState == 4){
						if(request.status == 200){
							alert(request.responseText);														
							printReception(1, '#{saisieReception.printConditionnement.itemId}', '#{saisieReception.currentArticle.pn}','#{saisieReception.numeroReception}', '#{saisieReception.currentFabricant.referenceFabricant}','#{saisieReception.currentArticle.libArticle}', #{saisieReception.printConditionnement.quantite},'#{saisieReception.currentArticle.hdd ? numCartonHdd : numCartonRsd}','#{saisieReception.formattedDateReception}', '#{saisieReception.currentPays.idePays}','#{saisieReception.currentAffectation.idEmplacement}');		
						}							
					}
				}
 
				alert ("url = "+url);
				request.open("GET",url,true);
				request.send(null);
			}
		</script>

mais j'ai toujours le undefined

Citation:

Envoyé par freddou17

????

Test basique car là....

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
 
 
<script type="text/javascript">
		function multiImpression(){
			alert ("dans le multiimpression ajax ");
			var request = getXhr();
			var multiPrint = {};
			var test;
			var url = 'SaisieReceptionController.java/getImpressionEtiquettes';	
 
			// On défini ce qu'on va faire quand on aura la réponse 
			request.onreadystatechange = function(){ //c'est le callback 
				// On ne fait quelque chose que si on a tout reçu et que le serveur est ok 
				if(request.readyState == 4){
					if(request.status == 200){
						alert(request.responseText);														
						printReception(1, '#{saisieReception.printConditionnement.itemId}', '#{saisieReception.currentArticle.pn}','#{saisieReception.numeroReception}', '#{saisieReception.currentFabricant.referenceFabricant}','#{saisieReception.currentArticle.libArticle}', #{saisieReception.printConditionnement.quantite},'#{saisieReception.currentArticle.hdd ? numCartonHdd : numCartonRsd}','#{saisieReception.formattedDateReception}', '#{saisieReception.currentPays.idePays}','#{saisieReception.currentAffectation.idEmplacement}');		
					}							
				}
			}
 
			alert ("url = "+url);
			request.open("GET",url,true);
			request.send(null);
		}
 
 
 
               multiImpression();
	</script>

Tu ne devrais pas avoir de undefined...si jamais tu en as un mets juste un alert dans la fonction multiImpression:roll::roll:

Regardes bien ce que j'ai écris, juste avant de fermer ma balise script je fais appel à la fonction multiImpression(); et dans le code que tu as posté je n'ai pas l'impression que tu fasses cet appel.

Code:

1
2
3
4
5
6
7
8
9
 
 
<script type="text/javascript">
		function multiImpression(){
			alert ("dans le multiimpression ajax ");
		}
 
               multiImpression();
</script>

Peux tu essayer ce script, normalement ça doit passer sans souci...

Pense aussi qu'avec firebug tu peux faire du debug

10/04/2014, 14h45
nakry

oui je l'ai éssayé il passe bien dedans l'alert est bien affiché.

En fait dans mon code j'appelle multiImpression(); à un autre endroit autre que dans la balise script de sa définition et avec votre code il est bien appelé à cet endroit aussi parce que j'ai l'alerte à ce niveau

Citation:

Envoyé par freddou17

Pense aussi qu'avec firebug tu peux faire du debug

j'utilise biensure firebug, c'est lui qui m'indiquait le undefined

Bonjour à tous,

j'essaie de procéder d'une autre façon.

En effet, au lieu d'appeler ma fonction getImpressionEtiquettes() je vais tout simplement récupérer mon objet multiPrintConditionnement qui est une liste d'objet printConditionnement sous forme de tableau ou d'objet Json à partir d'ajax et ensuite dans mon code javascript, les manipuler comme des tableaux ou des objet Json si possible.

voici ma fonction ajax
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 <h:outputScript library="js" name="cab-printer.js" /> <script type="text/javascript"> function multiImpression(){ alert ("dans le multiimpression ajax "); var request = getXhr(); var url = "http://localhost:8480/reception/saisie-reception.jsf"; // On défini ce qu'on va faire quand on aura la réponse request.onreadystatechange = function(){ //c'est le callback // On ne fait quelque chose que si on a tout reçu et que le serveur est ok if(request.readyState == 4){ if(request.status == 200){ alert("le test => "+request.responseText); // affiche tout le code source ce ma page alert("le JSON => "+request.responseJSON); // affiche undefined } } } request.open("GET",url,true); //request.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); // pour le POST request.send(null); } </script>
maintenant mon problème c'est comment indiquer à la requête ajax de recupérer que mon objet multiPrintConditionnement, pour l'instant ça me retourne tout le code de ma page lorsque j'appelle la fonction getImpressionEtiquettes() :(

aidez moi s'il vous plait, je galère dessus depuis plusieurs jours déjà :')

11/04/2014, 17h00
freddou17

L'Ajax est du coté client donc si ton appel AJAX retourne une jsp complète il va te renvoyer la jsp interprétée, c'est donc normal que tu récupères le code source.
Le responseJSON ne marche pas car il n'arrive pas à parser ton flux qui n'est pas au format Json

Pour récupérer ton objet java tu dois le mettre en forme coté serveur pour qu'il soit interprétable coté client. regardes du coté de Xstream par exemple.

Une question, tu utilises jsf? N'y a t il pas des composants AJAX qui te permette de travailler (plus) simplement (je ne suis pas expert JSF)

Code:

<f:ajax...

++
14/04/2014, 10h52
nakry

Citation:

Envoyé par freddou17

Une question, tu utilises jsf? N'y a t il pas des composants AJAX qui te permette de travailler (plus) simplement (je ne suis pas expert JSF)

Code:

<f:ajax...

++

Bonjour freddou17, oui j'utilise JSF2 (PrimeFaces) avec maven

je vais donc regarder du côté des composants ajax de PrimeFaces, je te tiens au courant, et merci pour tes réponses

Bonjour à tous,

voilà j'ai enfin trouvé la solution à mon problème et ça marche nikel,
c'était tout con :) mais bon quand on est débutant ça arrive souvent ces genre de choses (:aie:) bon bref

voici à quoi ressemble mon panelGroup final
Code:

1 2 3 4 5 6 7 8 9 10 11 12 <h:panelGroup rendered="#{saisieReception.lancerMultiImpression()}"> <ui:param name="numCarton" value="#{saisieReception.currentConditionnements.indexOf(saisieReception.printConditionnement)+1}" /> <ui:param name="numCartonHdd" value="#{numCarton}/#{saisieReception.nbCartonHdd}" /> <c:forEach items="#{saisieReception.multiPrintConditionnement}" var="condi"> <ui:param name="numCartonRsd" value="#{saisieReception.multiPrintConditionnement.indexOf(condi)+1}/#{saisieReception.nbCartonRsd}" /> <script type="text/javascript"> printReception(1, '#{condi.itemId}', '#{saisieReception.currentArticle.pn}', '#{saisieReception.numeroReception}', '#{saisieReception.currentFabricant.referenceFabricant}', '#{saisieReception.currentArticle.libArticle}', #{condi.quantite}, '#{saisieReception.currentArticle.hdd ? numCartonHdd : numCartonRsd}', '#{saisieReception.formattedDateReception}', '#{saisieReception.currentPays.idePays}', '#{saisieReception.currentAffectation.idEmplacement}'); </script> </c:forEach> </h:panelGroup>
un simple c:forEach a suffit pour faire ce que je voulais c'est à dire recupérer ma liste d'étiquettes sur le serveur et la traiter dans ma jsp pour imprimer mes étiquettes

Comme l'a dit plus haut

Citation:

Envoyé par freddou17

oui tu confonds exécution coté client (navigateur web - javascript) et coté serveur. (JSP)
....

c'était vraiment ça mon soucis, je comptais taiter ma liste dans la jsp avec du javascript et je m'attendais à ce que ma fonction javascript appelle une méthode de mon bean (mon controller) qui elle renvoie un à un les éléments de ma liste :roll:

ce casse-tête de débutant m'a permis de bien comprendre plein de chose et surtout le fonctionnement d'ajax

je remercie tout ce qui ont bien voulu m'aider et surtout un grand merci à freddou17 pour son aide :merci: