Affichage du résultat de la rêquete Ajax

**shouwy** · 02/11/2012, 12h34

Bonjour,

J'ai un petit problème lors de l'affichage de ma requête Ajax. Je reçois bien ma requête mais elle ne s'affiche pas dans mon div prévu à cet effet.

Le code de la page qui doit afficher cette requête.

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
 
    <script language="JavaScript" src="<%=contextPath%>/javascript/prototype.js"></script>
    <script language="JavaScript" src="<%=contextPath%>/javascript/rico.js"></script>
....
 
<script type="text/JavaScript">
function bodyOnLoad()
{
  ajaxEngine.registerRequest('customizeTarif','mesure.do;jsessionid=<%=session.getId()%>');
  ajaxEngine.registerAjaxElement('divCustomizeTarif');
  activeChampsAlertes();
}
function loadTarifCustomization()
{
  var d = $('divCustomizeTarif');
  d.innerHTML="chargement (veuillez patienter) ...";
  d.style.border="1px dotted orange";
  ajaxEngine.sendRequest('customizeTarif', "event=contentForTarifCustomization",
		"tarif="+document.forms[1].tarif.value,"prefs="+document.forms[1].tarifPrefs.value);
}
</script>
 
.....
 
    <tr>
        <td class="label" style="text-align:right;vertical-align:top;"><%= u.i18n("Tarif") %></td>
		<td align="left">
			<html:hidden property="tarifPrefs"/>
	  		<select name="tarif" onchange="loadTarifCustomization();">
	     		<option value="">---</option>
<%
Mesure m = (Mesure)session.getAttribute( Constants.MESURE_KEY );
TreeMap tarifs = MesureStatic.getTarifs();
Iterator it = tarifs.keySet().iterator();
while (it.hasNext()) {
  String key = ""+it.next();
  String selected="";
  if (key.equals(m.getTarif()))
    selected=" selected";
  if ( key.endsWith("separator"))
    out.println( "<option disabled class=\"category\">"+tarifs.get(key)+"</option>\n");
  else
    out.println( "<option value=\""+key+"\""+selected+">"+tarifs.get(key)+"</option>\n");
}
%>
	  		</select>
	  		<span style="cursor:pointer;color:blue;font-size:80%;" onclick="loadTarifCustomization()">&gt;&gt;&nbsp;<%=u.i18n("PersonnaliserLeTarif") %></span>
	  		<div style="margin-left:2px;padding:2px;" id="divCustomizeTarif"></div>
		</td>
	</tr>
....

Ce que je récupère de ma requête.

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
 
<ajax-response>
  <response type="element" id="divCustomizeTarif">
<u>Configuration du tarif EDF Vert A5 LU:</u><br/><div style="padding:2px 5px 3px 5px;">
Puissances souscrites :PTE <input class="field" type="text" name="TarifPrefsPS1" value="510" size="4"/> 
HPH <input class="field" type="text" name="TarifPrefsPS2" value="510" size="4"/> 
HCH <input class="field" type="text" name="TarifPrefsPS3" value="510" size="4"/> 
HPE <input class="field" type="text" name="TarifPrefsPS4" value="510" size="4"/> 
HCE <input class="field" type="text" name="TarifPrefsPS5" value="510" size="4"/> 
<table>
<tr><td>Heures de pointe</td>
<td> de <input class="field" type="text" name="TarifPrefsPTEhm1" value="900" size="3"/> à <input class="field" type="text" name="TarifPrefsPTEhm2" value="1100" size="3"/> 
 et de <input class="field" type="text" name="TarifPrefsPTEhm3" value="1800" size="3"/> à <input class="field" type="text" name="TarifPrefsPTEhm4" value="2000" size="3"/>
</td></tr>
<tr><td>Heures pleines</td><td> de <input class="field" type="text" name="TarifPrefsHPhm1" value="600" size="3"/> à <input class="field" type="text" name="TarifPrefsHPhm2" value="2200" size="3"/>  et de <input class="field" type="text" name="TarifPrefsHPhm3" value="0" size="3"/> 
à <input class="field" type="text" name="TarifPrefsHPhm4" value="0" size="3"/>
</td></tr></table>
Ristourne abonnement : <input class="field" type="text" name="TarifPrefsRistourneAbonnement" value="0.0" size="2"/> %
<br/>Minoration/Majoration mode de paiement : <input class="field" type="text" name="TarifPrefsMinoMajoPaiement" value="0.0" size="2"/> %
<br/><u>Composante Alimentation Complémentaires et de Secours :</u><br/>CACS : <input style="text-align:right;" type="text" name="TarifPrefsCACS" value="0.0" size="4"> euro/an
<br/></input>Taxes municipales = <input type="text" name="TarifPrefsTaxesMuni" value="8.0" size="2"></input> %
 ; Taxes départementales = <input type="text" name="TarifPrefsTaxesDept" value="4.0" size="2"></input> %
 <br/>Pourcentage d'exonération de la TICFE : <input class="field" type="text" name="TarifPrefsTauxExonerationTICFE" value="0.0" size="2"/> %
<br/>
Pourcentage d'exonération de la TCFE (TCCFE + TDCFE): <input class="field" type="text" name="TarifPrefsTauxExonerationTCFE" value="0.0" size="2"/> %
<br/></div>
  </response>
</ajax-response>

J'ai pensé à plusieurs choses comme l'id du div, l'encodage.
Il y avait peut-être un autre truc car j'avais splité le fichier rico.js en plusieurs car il comprend plein d'outil dont on ne se sert pas. Mais même en remettant le fichier tel quel, cela ne fait rien.

**vermine** · 02/11/2012, 16h04

Bonjour,

Que donne le HTML généré ? Avant et après l'appel Ajax.

**shouwy** · 02/11/2012, 17h13

Merci à vous de vous penchez sur mon problème.

Voici le code HTML avant :

Code :

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

1
2
3
4
5
6
7
8
9
 
....
 
<input type="hidden" value="TauxExonerationTICFE=0.0 TauxExonerationTCFE=0.0 RistourneAbonnement=0.0 TaxesMuni=8.0 TaxesDept=4.0 MinoMajoPaiement=0.0 CACS=0.0 PTEhm4=2000 PTEhm3=1800 PTEhm2=1100 PTEhm1=900 PS5=510 PS4=510 PS3=510 HPhm4=0 PS2=510 HPhm3=0 PS1=510 HPhm2=2200 HPhm1=600 " name="tarifPrefs">
<select onchange="loadTarifCustomization();" name="tarif">
<span onclick="loadTarifCustomization()" style="cursor:pointer;color:blue;font-size:80%;">>> Personnaliser le tarif</span>
<div id="divCustomizeTarif" style="margin-left:2px;padding:2px;"></div>
 
....

Et voici celui après la requête :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
 
....
 
<td align="left">
<input type="hidden" value="TauxExonerationTICFE=0.0 TauxExonerationTCFE=0.0 RistourneAbonnement=0.0 TaxesMuni=8.0 TaxesDept=4.0 MinoMajoPaiement=0.0 CACS=0.0 PTEhm4=2000 PTEhm3=1800 PTEhm2=1100 PTEhm1=900 PS5=510 PS4=510 PS3=510 HPhm4=0 PS2=510 HPhm3=0 PS1=510 HPhm2=2200 HPhm1=600 " name="tarifPrefs">
<select onchange="loadTarifCustomization();" name="tarif">
<span onclick="loadTarifCustomization()" style="cursor:pointer;color:blue;font-size:80%;">>> Personnaliser le tarif</span>
<div id="divCustomizeTarif" style="margin-left: 2px; padding: 2px; border: 1px dotted orange;">chargement (veuillez patienter) ...</div>
</td>
 
....

On voit bien que le clic a été pris en compte car il affiche la phrase d'attente mis en JS. Mais à réception, il n'affiche pas le contenu de la response.

**vermine** · 02/11/2012, 17h22

Le code du <select> est complet ou bien vous avez élagué pour la présentation ?

**shouwy** · 05/11/2012, 10h15

Oui il s'agit du code tronqué, j'ai une liste assez longue mais je vais mettre les lignes qui nous intéressent celle qui est selected.
Avant :

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
<tr>
<td class="label" style="text-align:right;vertical-align:top;">Tarif</td>
<td align="left">
<input type="hidden" value="TauxExonerationTICFE=0.0 TauxExonerationTCFE=0.0 RistourneAbonnement=0.0 TaxesMuni=8.0 TaxesDept=4.0 MinoMajoPaiement=0.0 CACS=0.0 PTEhm4=2000 PTEhm3=1800 PTEhm2=1100 PTEhm1=900 PS5=510 PS4=510 PS3=510 HPhm4=0 PS2=510 HPhm3=0 PS1=510 HPhm2=2200 HPhm1=600 " name="tarifPrefs">
<select onchange="loadTarifCustomization();" name="tarif">
<option value="">---</option>
<option class="category" disabled="">EDF Bleu</option>
...
<option class="category" disabled="">EDF Jaune</option>
...
<option class="category" disabled="">EDF Vert A5</option>
<option value="EDFVertA5CU">EDF Vert A5 CU</option>
<option value="EDFVertA5EJPMU">EDF Vert A5 EJP MU</option>
<option value="EDFVertA5EJPTLU">EDF Vert A5 EJP TLU</option>
<option selected="" value="EDFVertA5LU">EDF Vert A5 LU</option>
<option value="EDFVertA5MU">EDF Vert A5 MU</option>
<option value="EDFVertA5TLU">EDF Vert A5 TLU</option>
<option class="category" disabled="">EDF Vert A8</option>
...
<option class="category" disabled="">EDF Vert A Modulable</option>
...
<option value="EDFVertAModMU">EDF Vert A Modulable MU</option>
<option value="EDFVertAModTLU">EDF Vert A Modulable TLU</option>
...
<option class="category" disabled="">EDF Vert B</option>
...
<option class="category" disabled="">EDF Vert C</option>
...
<option class="category" disabled="">Transport HTA</option>
...
<option class="category" disabled="">Transport HTB</option>
...
<option class="category" disabled="">Italia</option>
...
<option class="category" disabled="">TRTAM A5</option>
...
<option class="category" disabled="">TRTAM A8</option>
...
<option class="category" disabled="">TRTAM B</option>
...
<option class="category" disabled="">TRTAM BT</option>
...
<option class="category" disabled="">TRTAM C</option>
...
</select>
<span onclick="loadTarifCustomization()" style="cursor:pointer;color:blue;font-size:80%;">>> Personnaliser le tarif</span>
<div id="divCustomizeTarif" style="margin-left:2px;padding:2px;"></div>
</td>
</tr>

Après :

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
<tr>
<td class="label" style="text-align:right;vertical-align:top;">Tarif</td>
<td align="left">
<input type="hidden" value="TauxExonerationTICFE=0.0 TauxExonerationTCFE=0.0 RistourneAbonnement=0.0 TaxesMuni=8.0 TaxesDept=4.0 MinoMajoPaiement=0.0 CACS=0.0 PTEhm4=2000 PTEhm3=1800 PTEhm2=1100 PTEhm1=900 PS5=510 PS4=510 PS3=510 HPhm4=0 PS2=510 HPhm3=0 PS1=510 HPhm2=2200 HPhm1=600 " name="tarifPrefs">
<select onchange="loadTarifCustomization();" name="tarif">
<option value="">---</option>
<option class="category" disabled="">EDF Bleu</option>
...
<option class="category" disabled="">EDF Jaune</option>
...
<option class="category" disabled="">EDF Vert A5</option>
<option value="EDFVertA5CU">EDF Vert A5 CU</option>
<option value="EDFVertA5EJPMU">EDF Vert A5 EJP MU</option>
<option value="EDFVertA5EJPTLU">EDF Vert A5 EJP TLU</option>
<option selected="" value="EDFVertA5LU">EDF Vert A5 LU</option>
<option value="EDFVertA5MU">EDF Vert A5 MU</option>
<option value="EDFVertA5TLU">EDF Vert A5 TLU</option>
<option class="category" disabled="">EDF Vert A8</option>
...
<option class="category" disabled="">EDF Vert A Modulable</option>
...
<option value="EDFVertAModMU">EDF Vert A Modulable MU</option>
<option value="EDFVertAModTLU">EDF Vert A Modulable TLU</option>
...
<option class="category" disabled="">EDF Vert B</option>
...
<option class="category" disabled="">EDF Vert C</option>
...
<option class="category" disabled="">Transport HTA</option>
...
<option class="category" disabled="">Transport HTB</option>
...
<option class="category" disabled="">Italia</option>
...
<option class="category" disabled="">TRTAM A5</option>
...
<option class="category" disabled="">TRTAM A8</option>
...
<option class="category" disabled="">TRTAM B</option>
...
<option class="category" disabled="">TRTAM BT</option>
...
<option class="category" disabled="">TRTAM C</option>
...
</select>
<span onclick="loadTarifCustomization()" style="cursor:pointer;color:blue;font-size:80%;">>> Personnaliser le tarif</span>
<div id="divCustomizeTarif" style="margin-left: 2px; padding: 2px; border: 1px dotted orange;">chargement (veuillez patienter) ...</div>
</td>
</tr>

**vermine** · 05/11/2012, 11h41

Je suppose que vous avez suivi ce tutoriel. Et d'après ce que je comprends, votre code est bon. Cependant, je constate que les démonstrations sur le site de Rico ne sont plus fonctionnelles. Je pense que c'est dû à un changement de version qui a modifié la philosophie d'origine.

Sur cette page, il dise (menu Introduction & Documentation -> LiveGrid AJAX request & response formats) que les attributs type et id de la balise <response> sont ignorés avec la version 2.0.

Et ils parlent d'une autre façon pour faire des appels, avec différentes méthodes du type :

Code :

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