[AJAX] populer un combox avec Json

**chady** · 02/07/2010, 23h39

bonjour tout le monde , je dois populer un combox avec un object jsonData.
J arrive a bien populer les text mais pas une liste pour le combox voici mon jspx

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
120
121
122
123
124
125
<jsp:root
	xmlns="http://www.w3.org/1999/xhtml"
	xmlns:bean="http://struts.apache.org/tags-bean"
	xmlns:jsp="http://java.sun.com/JSP/Page"	
	xmlns:tiles="http://struts.apache.org/tags-tiles" 
	xmlns:util="cc-utility.tld"
	xmlns:html="http://struts.apache.org/tags-html"
	xmlns:forms="cc-forms.tld"	
	xmlns:ctrl="cc-controls.tld"
	xmlns:convert="cc-converter.tld"
	xmlns:logic="struts-logic"
	xmlns:menu="cc-menu.tld"
	xmlns:base="cc-base.tld"
	version="2.0"
>

<html:form action="/issuer/editIssuer.do">
	<forms:form type="${issuerEntryForm.map.formType}" formid="formid" caption="issuer.form.${issuerEntryForm.map.formType}.title">

		<forms:row>
		<forms:text label="issuer.form.corrId" property="correspondantId" maxlength="5" value="ALLG" styleId="corrId" onblur="retrieveInfo()"/>
			<forms:text label="issuer.form.specimenNumber" property="specimenNumber" maxlength="20" required="true" value="aa25258222"/>	
		</forms:row>
		<forms:row>
			<forms:text label="issuer.form.filerNumber" property="filerNumber" maxlength="9" required="true" value="AA99999" />
			<forms:select label="issuer.form.planRangeStart" property="planAccountStart"  styleId="branchAccountList"/>
		</forms:row>
	
		<forms:row>
			<forms:text label="issuer.form.name1" property="name1" maxlength="50" required="true" value="manu" styleId="name" size="35"/>
			<forms:text label="issuer.form.name2" property="name2" maxlength="30"/>
			<forms:text label="issuer.form.name3" property="name3" maxlength="30"/>
		</forms:row>
	
		<forms:row>
			<forms:text label="issuer.form.address1" property="address1" maxlength="30" size="35" styleId="address1"/>
			<forms:text label="issuer.form.city" property="city" maxlength="28"/>
		</forms:row>
		
		<forms:row>
			<forms:text label="issuer.form.address2" property="address2" maxlength="30" size="35" styleId="address2"/>
			<forms:text label="issuer.form.postalCode" property="postalCode" maxlength="10" required="true" value="A9A 9A9" />
		</forms:row>
		<forms:row>
			<forms:description label="rrsp.form.country">
				<html:radio property="country"  value="" onclick="document.getElementById('changeCountry').name='btnChangeCountry';CCUtility.submitEnclosingForm(this);"/><bean:message key="rrsp.form.none"/>
				<html:radio property="country"  value="CAN" onclick="document.getElementById('changeCountry').name='btnChangeCountry';CCUtility.submitEnclosingForm(this);"/><bean:message key="rrsp.form.can"/>
			    <html:radio property="country"  value="USA" onclick="document.getElementById('changeCountry').name='btnChangeCountry';CCUtility.submitEnclosingForm(this);"/><bean:message key="rrsp.form.usa"/>
		    	<html:radio property="country"  value="OTHER" onclick="document.getElementById('changeCountry').name='btnChangeCountry';CCUtility.submitEnclosingForm(this);"/><bean:message key="rrsp.form.other"/>
					
				<logic:equal name="issuerEntryForm" property="disableOtherCountry" value="true">
					<html:text style="margin-left : 15px;background-color : #CFCFCF" property="otherCountry" maxlength="3" disabled="${issuerEntryForm.map.disableOtherCountry}"/>
				</logic:equal>
					
				<logic:notEqual name="issuerEntryForm" property="disableOtherCountry" value="true">
					<html:text style="margin-left : 15px;" property="otherCountry" maxlength="3" disabled="${issuerEntryForm.map.disableOtherCountry}"/>
				</logic:notEqual>
			</forms:description>
			
			<forms:select label="rrsp.form.province" property="province">
				<base:options property="provinceStateTypeOptions" labelProperty="localeName" keyProperty="name" localize="true" style="text-transform:uppercase"/>
		 	</forms:select>
		</forms:row>
	
	
	<forms:section title="issuer.form.action">
		<forms:buttonsection default="btnSave">
			<forms:button   name="btnSave"   text="issuer.form.edit.save"   title="issuer.form.edit.save"/>
			<forms:button   name="btnBack"     text="issuer.form.edit.cancel"     title="issuer.form.edit.cancel" />
	 	</forms:buttonsection>
 	</forms:section>
 	
 	<input type="hidden" id="changeCountry" name="" value="x"/>

	</forms:form>
</html:form>
<script type="text/javascript">
window.onload = function () {
 
}


function retrieveInfo(){ 
    var id = document.getElementById("corrId");
    var url = "/xml2cra/issuer/corrId?id=" + escape(id.value); 
    name.value="?"+name.value;
    if (window.XMLHttpRequest){ 
         req = new XMLHttpRequest();
     } 
     else if (window.ActiveXObject){ 
         req = new ActiveXObject("Microsoft.XMLHTTP");
    } 
    req.open("Get",url,true); 
    req.onreadystatechange = callbackInfo;
    req.send(null);
} 

function populateIssu(){
    var jsonData = req.responseText;
    var myJSONObject = eval('(' + jsonData + ')');
    var address1 = document.getElementById('address1');
    	address1.value=myJSONObject.location.address1;
    var address2 = document.getElementById('address2');
    	address2.value=myJSONObject.location.address2;
   
   var branchAccountList = document.getElementById('branchAccountList');
    	 branchAccountList.value=myJSONObject.location.branchAccountList;


    	 var name = document.getElementById('name');
     	name.value=myJSONObject.location.name;
     	 
}

function callbackInfo(){ 
    if (req.readyState==4){
        if (req.status == 200){ 
            populateIssu();   
        } 
    } 
} 
</script>
	
</jsp:root>

et mon code java

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

	public HashMap<Object, Object> findInfoIssu(HashMap<Object, Object> issuInfoMap) {
		String id = (String)issuInfoMap.get("Issuer ID");
		TcrspnInfo infoIssu = tcrspnInfoDao.findInfoIssu(id);
		List<String> branchAccoutList =tcrspnBrAcctDao.findFranchAccoutListForInfoIssuId(id);
		infoIssu.setBranchAccountList(branchAccoutList);
		
		issuInfoMap.put("address1", infoIssu.getAdress1());
		issuInfoMap.put("address2", infoIssu.getAdress2());
		issuInfoMap.put("name", infoIssu.getCrspnNm());
		issuInfoMap.put("name", infoIssu.getCrspnNm());
issuInfoMap.put("branchAccountList",infoIssu.getBranchAccountList());         
		return issuInfoMap;
	}

alors mon probleme comment decompose ma liste branchAccountList

pour l ajoute a mon combox styleId="branchAccountList
dans mon javaScritAjax

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
function populateIssu(){
    var jsonData = req.responseText;
    var myJSONObject = eval('(' + jsonData + ')');
    var address1 = document.getElementById('address1');
    	address1.value=myJSONObject.location.address1;
    var address2 = document.getElementById('address2');
    	address2.value=myJSONObject.location.address2;
 
    	 var branchAccountList = document.getElementById('branchAccountList');
    	 branchAccountList.value=myJSONObject.location.branchAccountList;
 
 
    	 var name = document.getElementById('name');
     	name.value=myJSONObject.location.name;
 
}

merci je sais pas si j ai ete assez clair.

**E.Bzz** · 06/07/2010, 14h42

Bonjour,
je ne peux pas juger le traitement lui-même, mais à ce que je vois il contient des sources d'erreurs potentielles :

un identifiant (en particulier de variable) ne doit pas correspondre à l'id d'un élément de la page
Code : Sélectionner tout - Visualiser dans une fenêtre à part
```
var branchAccountList = document.getElementById('branchAccountList');
```
IE permettant de faire référence à un objet directement via son id, ça l'embrouille
En l'occurrence, pour lui branchAccountList correspond à l'objet lui même il ne peut donc apparaitre à gauche d'un signe d'affectation.
il ne faut pas utiliser les termes réservés du langage comme identifiant
Code : Sélectionner tout - Visualiser dans une fenêtre à part
```
var name = document.getElementById('name');
```

A noter que dans le 2° point, tu cumules les 2 warning : non seulement name est un terme réservé en JavaScript (entre autres) mais en plus il correspond à un id de la page (qu'il faudra donc aussi changer)

J'ajouterais un warning optionnel : rester logique

s'agissant d'un id, nomme le id_trucmuche et non pas name_trucmuche. Ceux qui prendraient la suite pour maintenir ton code t'en seront éternellement reconnaissants

A+

[AJAX] populer un combox avec Json

AJAX

Vue hybride

Discussions similaires

Partager

Partager