remplir une combo suite à un évènement ajax avec dwr

Version imprimable

Bonjour, je suis confronté à un problème dont je suis sur vous avez la solution ;)

J'utilise une première combo sur laquel un évènement onChange() est associé. Quand on choisi un élément, cela appelle une fonction ajax grace au framework DWR. En retour cela me retourne un tableau dont j'aimerais me servir pour remplir une deuxième combo. Mais voila, je ne sais pas comment faire, avec struts et la balise html:select, pour que cette collection soit utilisée pour remplir une deuxième combo... j'ai fais pas mal de recherche sur le net mais je ne trouve rien qui m'apporte une solution...

voila mon code :
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 <%@ page language="java" contentType="text/html; charset=ISO-8859-1" pageEncoding="ISO-8859-1"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <%@ taglib uri="/WEB-INF/tags/struts-logic" prefix="logic"%> <%@ taglib uri="/WEB-INF/tags/struts-html" prefix="html"%> <%@ taglib uri="/WEB-INF/tags/struts-bean" prefix="bean"%> <html> <head> <script src='http://localhost:8080/ThinClient/dwr/interface/Tranche.js'></script> <script src='http://localhost:8080/ThinClient/dwr/engine.js'></script> <script src='http://localhost:8080/ThinClient/dwr/util.js'></script> <script type="text/javascript"> function updateTranches() { var site = dwr.util.getValue("site"); Tranche.tranches(site, function(data) { dwr.util.setValue("resultat", data); }); } </script> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> <title>Insert title here</title> </head> <body> <html:form action="choix.do"> <html:select property="site" onchange="updateTranches()"> <html:options collection="sites" property="id" labelName="Site Id" /> </html:select>  <html:select property="tranche"> <html:options name="resultat" collection="????ici je dois mettre la collection retourné par DWR mais comment faire ????" property="id" labelName="Tranche Id" /> </html:select> <html:submit value="Send"></html:submit> </html:form> </body> </html>
Donc en fait, mon problème c'est que la fonction dwr.util.setValue("resultat", data); cherche une propriéré value dans le tag html:select...

je suis coincé je sais plus comment faire ...

j'avais pensé utilisé un champ caché (ce que j'ai testé) pour récupérer la collection, mais après le problème reste le meme, comment itérer dynamiquement sur cette collection pour créer une combo ?

please help me :cry:

merci à tous

08/07/2007, 13h51
crossmen

vous pouvez nous envoyer votre action

Bonjour, merci de vous y interessé :)

voila mon action :

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
 
 
package org.getahead.dwrdemo.simpletext;
 
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
 
import org.apache.struts.action.Action;
import org.apache.struts.action.ActionForm;
import org.apache.struts.action.ActionForward;
import org.apache.struts.action.ActionMapping;
 
public class ChoixAction extends Action {
 
	public ActionForward execute(ActionMapping mapping, ActionForm form,
			HttpServletRequest request, HttpServletResponse response)
			throws Exception {
 
		Choix choixForm = (Choix) form;
 
		String site = choixForm.getSite();
 
		String tranche = choixForm.getTranche();
 
		System.out.println(site);
		System.out.println(tranche);
 
		return mapping.findForward("success");
	}
}

07/01/2008, 10h02
seb4480

Bonjour,

j'ai été confronté au même problème et je poste donc ici la solution si quelqu'un d'autre se pose aussi la question.

Pour alimenter un <select>, il ne faut pas utiliser la méthode dwr.util.setValue car celle-ci permet seulement d'indiquer l'élement que l'on souhaite sélectionner dans la liste. Il faut utiliser la méthode dwr.util.addOptions.

Pour plus de détails :
http://getahead.org/dwr/browser/addoptions
http://getahead.org/dwr/browser/lists
04/02/2008, 15h10
jadey

Citation:

Pour alimenter un <select>, il ne faut pas utiliser la méthode dwr.util.setValue car celle-ci permet seulement d'indiquer l'élement que l'on souhaite sélectionner dans la liste. Il faut utiliser la méthode dwr.util.addOptions.

Et dans le cas d'un <html:multibox> ?
05/02/2008, 14h07
jadey

je me permet de poster ici puisque j'ai exactement le même problème help :( une semaine entière que je cherche sans resultat :aie:

dwr.util.addOptions et jQuery("#optionName option").each(function(index)

Bonjour,
Le post date un peu, mais j'ai eu à résoudre un problème qui lui ressemble

Contexte:
Ma servlet me retourne une liste d'objets du type "DefaultKeyValue" {Key, Value}, dans la liste déroulante je devais afficher certains éléments de cette liste avec une couleur différente ou en GRAS et ceci en fonction de leur état.

Avant la modif j'avais dans ma jsp :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
 
var updateOptionsListe =  function() {
 
    var id = 'selectName';
    var idElt = $('#'+id);
 
 
monServiceDWR.populateOptionsListe(function(data){
 
            dwr.util.removeAllOptions(id);
            dwr.util.addOptions( id, data, 'key', 'value');
            dwr.util.setValue(id, idElt);
 
           });
}

Code:

1
2
3
4
5
6
7
8
 
<select name="selectName">
 
<c:forEach items="${listeElements}" var="element">
<option value="${element.key}">${element.value}</option>
</c:forEach>
 
</select>

J'ai modifié le type des objets contenu dans la liste de retour, j'ai créé une petite classe DefaultKeyValueAvecCssInfos par exemple qui étend DefaultKeyValue.

j'ai rajouté un membre cssFontWeight a cette classe dérivée et l'information est renvoyé avec le reste.

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
 
var updateOptionsListe =  function() {
 
    var id = 'selectName';
    var idElt = $('#'+id);
 
monServiceDWR.populateOptionsListe(function(data){
 
            dwr.util.removeAllOptions(id);
            dwr.util.addOptions( id, data, 'key', 'value');
            dwr.util.setValue(id, idElt);
 
            jQuery("#optionName option").each(function(index){
            	var index = $(this).attr('index');
            	if(data!=null){
	            	if(data[index] != null){
						var key  = data[index].key;
						var value  = data[index].value;
						var cssFontWeight  = data[index].cssFontWeight;
						$(this).css('font-weight',cssFontWeight);
					}
            	}
            });

Code:

1
2
3
4
5
6
7
 
<select name="selectName">
<c:forEach items="${listeElements}" var="element">
<option cssStyle="font-weight:${element.cssFontWeight};" value="${element.key}">${element.value}</option>
</c:forEach>
 
</select>

un lien utile : http://directwebremoting.org/dwr/doc...til/lists.html