Elements ajoutés dynamiquement non récupérés coté servlet

Version imprimable

19/04/2011, 17h07
Angelo121

Elements ajoutés dynamiquement non récupérés coté servlet

Bonjour,

dans le cadre de mon projet de stage je réalise une application web.
Dans une des pages l'utilisateur peut ajouter des éléments dynamiquement.
Pour ceci j'utilise du javascript et la fonction innerHTML.
Une fois les informations entrée l'utilisateur valide via un submit l'ensemble des informations situées dans le "form".
Ces informations sont récupérées coté Servlet pour traitement.

Le problème que j'ai, est que lorsque je valide le formulaire, tout ce qui a été ajouté via le innerHTML est ignoré, pour être plus technique, les "getParameter" me retournent "null".

Je n'ai rien trouvé sur les autres posts qui traite de ce problème, si quelqu'un à déjà rencontré ce problème, je suis preneur
20/04/2011, 09h35
jowo

Bonjour,

Assure-toi que ton innerHTML insère bien des éléments HTML input et qu'ils soient placés dans le formulaire.
20/04/2011, 09h37
noOneIsInnocent

Bonjour

est-ce que tu utilises un framework ?
et est-que tes éléments ajoutés dynamiquement sont bien dans ta balise form ?
sinon pour voir ce qui est envoyé à ta servlet tu peux utiliser un plugin firefox pour voir les requêtes HTTP qui passent. je crois que le plugin s'appelle Http live ..tu trouveras facilement et il doit certainement y en avoir d'autres

postes nous aussi du code sinon ça va être difficile de t'aider

Bonjour,

le innerHTML m'ajoute bien les éléments dans le formulaire.
Je n'utilise pas de framework en particulier.

Voici mon code

Dans ma jsp

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
 
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">
 
<html>
    <head>
        <jsp:include page="../commun/tete.jspf"/>
    </head>
    <body>
        <jsp:include page="../commun/entete.jspf"/>
        <jsp:include page="../commun/menus.jspf"/>
        <div id="corps">
            <h1>Cas de test</h1>
            <p>Les cas de tests réprésentent les résumés textuels des tests effectués.</p>
            <form method="post" action="/OutilQualif/CasTest?action=ajout">
                <div id="etapes">
                    <table>
                        <tr>
                            <td>Etapes</td>
                        </tr>
                    </table>
                    <div id="1" class="etape">
                        <table>
                            <tr>
                                <td>Etape</td>
                                <td>
                                    <input name="numE1" type="text" value="1" size="1"/>
                                    <input type="button" value="+" onclick="create_champ();"/>
                                </td>
                            </tr>
                            <tr>
                                <td>Nom Etape</td>
                                <td><input name="nomE1" type="text"/></td>
                            </tr>
                        </table>
                    </div>
                </div>
                <div align="center" style="clear: both">
                    <input type="hidden" value="0" name="i" />
                    <input type="button" value="Ajouter cas" onclick="verif_formulaire_castest(this.form)"/>
                </div>
            </form>
        </div>
    </body>
</html>

Dans ma servlet

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
 
public class CasTest extends HttpServlet {
 
    protected void processRequest(HttpServletRequest request, HttpServletResponse response)
    throws ServletException, IOException {
        response.setContentType("text/html;charset=UTF-8");
        PrintWriter out = response.getWriter();
        try {
            String action =  request.getParameter("action");
            if(action.equals("ajout")){
                String i = request.getParameter("i");
 
                int ii = Integer.parseInt(i);
                for(int j=1; j<ii; j++){
                    String numE = request.getParameter("numE"+j);
                    if(numE!=null){
                        String nomE = request.getParameter("nomE"+j);
                    }
                }
            }
 
            ServletContext contexte = getServletContext();
            RequestDispatcher dispatcher = contexte.getRequestDispatcher("/WEB-INF/vues/castest.jsp");
            dispatcher.forward(request, response);
 
        }catch(Exception e){
            e.printStackTrace();                    
        } finally {
            out.close();
        }
    }

Et mon code Javascript

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
 
var i = 2;
 
function create_champ(){
    var newdiv = "<div id='"+i+"' class=\"etape\">"+
        "<table><tr><td>Etape</td>"+
        "<td><input id=\"numE"+i+"\" type=\"text\" value=\""+i+"\" size=\"1\"/>"+
        "<input type=\"button\" value=\"+\" onclick=\"create_champ();\"/>"+
        "<input type=\"button\" value=\"-\" onclick=\"remove_champ("+i+");\"/></td></tr>"+
        "<tr><td>Nom Etape</td>"+
        "<td><input id=\"nomE"+i+"\" type=\"text\"/></td></tr></table>"+
        "</div>";
 
    document.getElementById('etapes').innerHTML += newdiv;
    i++;
}
 
function verif_formulaire_castest(formulaire){
    document.getElementById('i').value = i;
    formulaire.submit();
}

Je développe sous IE6 (imposé), et pour je ne sais quelle raison le submit ne fonctionne pas sous Firefox, donc je peux pas
tester avec l'addon

Le problème se voit au niveau du "for" dans la servlet, si le j est supérieur à 1 (c'est à dire s'il s'agit d'un div ajouté via innerHTML) le résultat du "String numE = request.getParameter("numE"+j);" donne numE=null

20/04/2011, 10h45
jowo

Le problème vient probablement que tu ne renseignes pas l'attribut name des éléments input dans la fonction create_champ.
20/04/2011, 10h48
Angelo121

OMG, mais quel boulet je fais !

Oui c'est bien ça, honte à moi.

Merci beaucoup.
20/04/2011, 10h49
noOneIsInnocent

ça c'est ton premier problème
si ça ne fonctionne pas avec Firefox c'est que tu dois avoir une erreur JS
tu devrais installer firebug pour firefox qui te permettra de voir tes erreurs
pour l'instant ton développement n'est valable que pour IE 6 mais vu qu'on est déjà à la version 9 je te conseille de vérifier pour les autres versions et pour FF
20/04/2011, 11h02
Angelo121

Oui je vais regarder pourquoi cela ne fonctionne pas sous Firefox.
En fait c'était IE8 je me suis trompé.
Je marque tout de même résolu.

Merci