Affichage formulaire via javascript et remplir un select dynamiquement

Version imprimable

07/07/2009, 16h06
Balthek

Affichage formulaire via javascript et remplir un select dynamiquement

Bonjour tout le monde :D

Dans le cadre d'un projet je dois réaliser un menu de login :
- au début il ne voit qu'un formulaire (dynaform avec validator struts) : il rentre son code et son password et le couple est vérifié au niveau de la bd (jusque là c'est bon)
- quand il envoie son form, si il est valide un autre form contenant uniquement un select doit apparaitre, les options contenues dedans variant selon les utilisateurs (en fait il y a plusieurs enregistrements pas utilisateur dans la db indiquant pour chaque page de l'appli si l'utilisateur y a accès ou non (je mets les JSP sous WEB-INF)). J'ai donc une fonction qui me récup toutes ces pages accessibles (du genre "Gestion des distributeurs") dans un ArrayList.

C'est là que ça se gâte.

1er pb : Pour cacher le formulaire j'utilise un div avec visibility : hidden et je l'affiche avec une fonction javascript (c'est testé de ce côté là, ça marche).
Le premier problème est si je mets le script sur le onSubmit() du premier form, comme la page se recharge il disparait aussitôt.
Je pensais utiliser une variable dans la jsp dont je change la valeur si l'action est bien valide, chargée d'afficher le form au load mais je n'ai réussi à utiliser du js dans <% %> (une balise spéciale?) et de plus j'aimerais éviter de mettre du code java dans la jsp.
Avez-vous une idée? :(

2eme pb : le 2ème problème concerne le 2ème form : comment affecter l'ArrayList (enfin je pensais utiliser une fonction avec un switch pour créer un tableau 2D associant le nom de la fonction dans l'arrayList au nom de la page que je rentre pour ensuite mettre ce nom de page en value et le nom de la fonction en visuel dans la liste déroulante) à un select, sachant que le nombre d'options de ce select varie à chaque utilisation. Sur ce point là je suis assez perdu.

Le premier problème n'est pas très important : si jdois utiliser un autre jsp c'est gênant du tout, le truc m'embêtant vraiment est le 2ème pb.

Merci d'avance :ccool:

Bon j'ai réussi pour le problème 2 (en passant par un autre) j'affiche la réponse, ça pourra aider des gens :
(je donne pas le code pour les actions et form login)

struts-config.xml

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
 
<action-mappings>
        <action path="/Welcome" forward="/welcomeStruts.jsp"/>
 
        <!-- Login action -->
        <action
        path="/login"
        scope="session"
        type="com.BO.struts.LoginAction"
        name="loginForm"
        input="/index.jsp"
        validate="true">
 
            <forward name="success" path="/loadAction.do" />
            <forward name="failure" path="/index.jsp" />
        </action>
 
        <!-- Chargement des options du select -->
        <action
        path="/loadAction"
        scope="session"
        type="com.BO.struts.LoadFunctionAction"
        validate="false">
 
            <forward name="success" path="/WEB-INF/jsp/main.jsp"/>
         </action>
 
        <!-- Menu action (oriente vers les différentes pages) -->
        <action
        name="MenuForm"
        path="/goToFunction"
        scope="request"
        type="com.BO.struts.GoToFunction"
        validate="false">
 
            <forward name="success" path="/WEB-INF/jsp/testreussite.jsp"/>
 
        </action>
 
    </action-mappings>

Function.java (bean associant nom et lien)

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
 
public class Function {
 
    private String functionName;
    private String functionLink;
 
    public String getFunctionLink() {
        return functionLink;
    }
 
    public Function(String functionName, String functionLink) {
        this.functionName = functionName;
        this.functionLink = functionLink;
    }
 
    public void setFunctionLink(String functionLink) {
        this.functionLink = functionLink;
    }
 
    public String getFunctionName() {
        return functionName;
    }
 
    public void setFunctionName(String functionName) {
        this.functionName = functionName;
    }
 
    public Function() {
    }
}

LoadFunctionAction.java

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
 
public ActionForward execute(ActionMapping mapping, ActionForm form,
            HttpServletRequest request, HttpServletResponse response)
            throws Exception {
 
        //On récup le code user et le mdp
        String user = (String) request.getAttribute("user");
        String pass = (String) request.getAttribute("pass");       
 
        UtilisateurDAO utilisateurDAO = new UtilisateurDAO(ConnectionDB.getConnection());
 
        ArrayList<String> list = new ArrayList<String>();
        list = utilisateurDAO.findFonction(user, pass);
 
        Collection functions = new ArrayList<String>();
 
        //On associe les fonctions présentes dans la db à des liens
        functions = organizeFunction(list);
 
 
        //On met la collection dans la jsp ou il y a le select
        request.setAttribute("functions", functions);
 
        return mapping.findForward(SUCCESS);
    }

MenuForm.java

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
 
private String selectedLink;
 
    public String getSelectedLink() {
        return selectedLink;
    }
 
    public void setSelectedLink(String selectedLink) {
        this.selectedLink = selectedLink;
    }
 
    public MenuForm() {
        super();
        // TODO Auto-generated constructor stub
    }

main.jsp

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
<html:form action="/goToFunction" method="post" styleId="login">
 
            <br />
 
            <html:select property="selectedLink">
                <html:optionsCollection name="functions" label="functionName" value="functionLink" />
            </html:select>
 
            <br /> <br />
 
            <html:submit><bean:message key="accueil.valider" /></html:submit>
 
        </html:form>

Je laisse ouvert la discussion pour le problème 1 : comment utiliser du javascript dans une action?
Pour dans cet exemple associer au submit du form du login l'action LoadFunctionAction et dans cette dernière rendre visible une div hidden, puis recharger la même page.

Merci d'avance

08/07/2009, 22h00
c_nvy
Tu peux passer un champ caché à ton formulaire via le tag html:hidden :

Code:

<html:hidden property="formulaire" value="defaut"/>

Tu ajoutes l'attribut onclick dans le tag html:submit de ton formulaire de login pour soumettre une fonction javascript et tu passes en paramètre de cette fonction une valeur.

Code:

<html:submit onclick="setFormulaire('formulaire2');">

Dans cette fonction, tu mets à jour la propriété que j'ai appelé formulaire à partir de cette valeur :
Code:

1 2 3 4 function setFormulaire(value) { document.loginForm.formulaire.value=value ; }
Et enfin, tu fais appel à la fonction javascript qui montre le formulaire où se trouve le tag select dans l'attribut onload du tag body :

Code:

<body onload="show();">
Code:

1 2 3 4 5 6 7 function show() { if ( document.loginForm.formulaire.value == 'formulaire2' ) { document.getElementById("login").style.visibility="visible"; } }
A tester.;)

Petite remarque : je ne trouve pas logique d'affecter l'id "login" au formulaire contenant le select.
09/07/2009, 10h25
Balthek

Merci pour la solution :ccool:

Pour

Citation:

Petite remarque : je ne trouve pas logique d'affecter l'id "login" au formulaire contenant le select.

C'est un oubli dans mon css, faut que je le renomme, ils partagent juste le même style.

Encore merci, je mets en résolu 8-)