Discussion :

[Thébé]

J'ai une page JSP dans laquelle il y a un select (liste déroulante). Lorsqu'une catégorie est sélectionnée, les boutons modifier et supprimer s'activent et un javascript est appelé.

Ce javascript vient ajouter un select ainsi que les trois boutons habituels (A/M/S) en créant les balises dans une variable string qui est placée comme contenu de la div ainsi : laDivEnQuestion.innerHtml = contenu;

Tout va bien, le tout s'affiche et réagit correctement jusqu'au moment ou je clique sur M ou S. Voici mon M(odifier).

Code :

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

1
2
3
4
5
6
7
contenu += "<input type=\"button\" value=\"Modifier\"
            id=\"modifierBP\" class=\"espacer\" disabled=\"disabled\"" +
            "style=\"background-color: #FFFFFF;\"" +
            "onclick=\"window.location=\'" + root + "/Affichage?
para=gererBonnePratique&numero=getElementById(listeBonnesP).value"
                            + "&cible=Modifier&idUsager=" + numeroUsager
                            + "\'\"/>";

J'ai mis le problème en gras. Il se trouve que lorsque mon servlet est appelé, je tente de mettre numero dans une variable int et cela me dit que getElementById(listeBonnesP).value n'est pas un int. Je comprend que la fonction n'est pas évaluée et j'ai tenté plusieurs autre méthodes (comme d'isoler l'appel de la fonction : numero=" + getElem.... + ...) mais, dans aucun cas elle ne l'est et la majorité du temps, rien ne s'affiche (je parle ici des balises) si ma correction est invalide. Je vous offre ce code puisqu'il est le résultat le plus près de la réussite que j'ai.

Contrairement à mon prédécesseur je préfèrerais utiliser le DOM pour ajouter mes balises mais je n'y arrive pas très bien encore. Je continu de plancher la-dessus en attendant une réponse.

Merci

[remi.gaubert]

Il ne manque pas un document devant le getElementById ?
Et je pense qu'il y a des problèmes de cotes :

Code :

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

1
2
3
4
5
6
7
contenu += "<input type=\"button\" value=\"Modifier\"
            id=\"modifierBP\" class=\"espacer\" disabled=\"disabled\"" +
            "style=\"background-color: #FFFFFF;\"" +
            "onclick=\"window.location='" + root + "/Affichage?
para=gererBonnePratique&numero='+document.getElementById(listeBonnesP).value+'"
                            + "&cible=Modifier&idUsager=" + numeroUsager
                            + "'\"/>";

[Thébé]

Oui il manquait document.
Non ce n'est toujours pas évalué.

edit
-------------------
'+document.getElementById(listeBonnesP).value+'"
Je n'avais pas tout a fait regardé ta réponse et j'ai essayé comme tu l'as écris.
Le bouton n'a pas d'action avec ce code.
-------------------

java.lang.NumberFormatException: For input string: "document.getElementById(listeBonnesP).value"

J'ai bientôt fini ma solution avec le DOM. Je prévois la poster dans 20 minutes environ si je ne tombe pas sur un bug.

[remi.gaubert]

Je pense qu'il faudrait faire un premier test pour voir quel valeur vaut ton "document.getElementById(listeBonnesP).value" avec ca :

Code :

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

1
2
3
4
contenu += "<input type=\"button\" value=\"Modifier\"
            id=\"modifierBP\" class=\"espacer\" disabled=\"disabled\"" +
            "style=\"background-color: #FFFFFF;\"" +
            "onclick=\"alert('test :' +document.getElementById(listeBonnesP).value);\"/>";

[Thébé]

Avec DOM les boutons ajouter et modifier.
Tout est parfait mais onclick ne fait rien avec ce code. J'ai essayer en remplaçant le onclick par un alert("toto"). Le alert est appelé lorsque les éléments s'affichent sur la page JSP et pas quand je clique sur le bouton.

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
// Les boutons de gestion (Ajouter/Modifier/Supprimer)
                var objAjouter = document.createElement("input");
                objAjouter.setAttribute("id", "ajouterBP");
                objAjouter.setAttribute("type", "button");
                objAjouter.setAttribute("value", "Ajouter");
                objAjouter.setAttribute("class", "espacer");
                objAjouter.setAttribute("onclick",
                        "window.location=\'" + root
                      + "/Affichage?para=gererBonnePratique&numero=0"
                      + "&cible=Ajouter&idUsager=" + numeroUsager
                      + "&categorie=" + p_numero);
 
                  var objModifier = document.createElement("input");
                objModifier.setAttribute("id", "modifierBP");
                objModifier.setAttribute("type", "button");
                objModifier.setAttribute("value", "Modifier");
                objModifier.setAttribute("class", "espacer");
                objModifier.setAttribute("disabled", "disabled");
                objModifier.setAttribute("onclick",
                        "window.location=\'" + root
                      + "/Affichage?para=gererBonnePratique&numero=" + document.getElementById('listeBonnesPratiques').value
                      + "&cible=Ajouter&idUsager=" + numeroUsager
                      + "&categorie=" + p_numero);

[ElbeDD]

Pour la solution avec le DOM:
J'avais eu problème équivalent avec :

Code :

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

1
2
3
4
5
...
	divACreer.setAttribute('id', nomId);
	divACreer.setAttribute('style','position: absolute');//KO sous IE8=> a refaire
	...//autre attribut + __.appendChild(divACreer)
	document.getElementById(nomId).style.position="absolute";//Pour IE

=> Peut être est-ce la même chose. Utilises-tu : IE ? Firefox ?,...


Pour la solution Non DOM:
Dans la solution de gobygoda, il manque les quotes pour listeBonnesP:

Code :

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

document.getElementById('listeBonnesP').value

[Sauf si listeBonnesP est une variable dans la page]
D'ailleurs, en DOM, tu l'appelles: 'listeBonnesPratiques'

De plus, pour l'appel, je passerai plus par une fonction (avec en paramètre le code action)

[Thébé]

Pour le moment je suis avec firefox, je vais me charger de IE après quand le tout fonctionnera avec mozilla. La raison pour laquelle ça ne fonctionne pas c'est que lorsque dans le JS j'utilise des fonctions comme (this.value (le "undefined" du onchange du select) ou getElementById('listeBonnesP').value (le "defaut" des boutons modifier et supprimer qui correspondent à la valeur de base de la liste déroulante) elle sont évaluées à la création et non pas in real time.

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
 
<div id="contenuBonnesP">
    <strong>Bonnes pratiques :</strong><br>
    <select id="listeBonnesPratiques" onchange="changerStatutBouttons('BP', undefined)">
    <option value="defaut">...</option>
    <option value="113"> Développement de scénario utilisateur</option>
    <option value=" 118"> test1</option>
    <option value=" 119"> test2</option>
    </select>
    <input type="button" id="ajouterBP" value="Ajouter"
                 class="espacer" onclick="'window.location='/CRGL_-
                 _Bonnes_Pratiques/Affichage?para=gererBonnePratique
                 &numero=0&cible=Ajouter&idUsager=23
                 &categorie=26">
 
    <input type="button" id="modifierBP" value="Modifier"
                class="espacer" disabled="disabled" 
                onclick="window.location='/CRGL_-_Bonnes_Pratiques/Affichage?
                para=gererBonnePratique&numero=defaut&cible=Ajouter
                &idUsager=23&amp;categorie=26">
 
    <input type="button" id="supprimerBP" value="Supprimer" class="espacer"
                disabled="disabled" onclick="window.location='/CRGL_-
                _Bonnes_Pratiques/Affichage?para=gererBonnePratique
                &numero=defaut&cible=Ajouter&idUsager=23&categorie=26">
</div>

edit: Ce code est fonctionnel avec la vielle méthode, je préfèrerais avec le DOM mais je vais pouvoir continuer un peu avec cela. Merci
____________________________________

Code :

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

1
2
3
4
5
6
contenu += "<input type=\"button\" value=\"Modifier\" id=\"modifierBP\" class=\"espacer\" disabled=\"disabled\"" +
                        "style=\"background-color: #FFFFFF;\"" +
                        "onclick=\"window.location=\'" + root
                            + "/Affichage?para=gererBonnePratique&numero='+document.getElementById('listeBonnesP').value+'"
                            + "&cible=Modifier&idUsager=" + numeroUsager
                            + "\'\"/>";

[OButterlin]

Tu fais une erreur avec tes boutons, lorsqu'ils sont "disabled", les boutons ne sont pas actif et onclick n'est pas lancé.

[Thébé]

Je l'avais deviné OButterlin
Code de la fonction appelée avec OnChange du select où defaut est la valeur de base.

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
}
...
    else if (p_section == "BP"){
        if (p_option == "defaut") {
            document.getElementById("modifierBP").disabled = true;
            document.getElementById("supprimerBP").disabled = true;
        }
        else {
            document.getElementById("modifierBP").disabled = false;
            document.getElementById("supprimerBP").disabled = false;
        }
...
    }

[Thébé]

J'en profite pour poser une dernière question pour ce thread et désolé pour le double post, je tenais à ce que ce soit visible.

Dans mon jsp appelé par A/M/S (oui un jsp générique pour les trois) se trouve un bouton qui permet d'ajouter des documents tant qu'il en faut (disponible avec A et M). Dans le cas de M et S, je veux aussi afficher les document déjà entrés.

Exemple :
Quand on clique sur le bouton modifier par exemple (celui des post précédents), le servlet envois au jsp des entrées de la BD. La page jsp charge le bouton (une fonction javascript est appelées si on clique) et charge les documents déjà dans la BD. J'aimerait pouvoir appeler ma fonction JS (celle du bouton) pour les documents déjà existants. Je crois avoir lu que c'était impossible du à la synchro serveur, client de javascript et ai beaucoup de mal à me résoudre à placer une partie de la fonction javascript dans la section orange.

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
<div id="contenu_onglet3" class="contenu_onglet" style="display: none">
    <h3>Etape</h3>
     <% if (!cible.equals("Supprimer")) {%>
           <input type="button" id="button" value="Insérer une etape"
                     onclick="addEtape(<%=vide%>)"/>
           <table id="etapes"></table>
           <br/>
     <% }

     if (!cible.equals("Ajouter")) {
        for (int i = 0; i < etapes.size(); i++) {
             addEtapes(((ClEtape) etapes.get(0)).getTexte());
        }
    }%>
</div>

Code :

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

function addEtape(valeur) {

[OButterlin]

Je ne comprends pas bien ce que tu veux faire, et que veut dire "je charge le bouton" ?

Peux-tu être plus précis ?

[Thébé]

Par charger le bouton j'entend que dans la page jsp il y a un bouton qui appele une fonction javascript (voir post précédent).

Si un usager décide d'ajouter (il clique sur ajouter) la page jsp est chargée avec le bouton dont je parle qui permet d'ajouter des inputs pour entrer le lien d'un document et son nom.
Cela ressemblerait à ceci:

Bouton
lien du document nom du document bouton pour le supprimer
...

S'il clique sur modifier au lieu d'ajouter, je charge de la base de données les documents déjà existants. Je voudrait appeler la même fonction javascript du bouton en lui donnant les informations nécessaires (nom du doc et lien).

[OButterlin]

En résumé, tu as un tableau avec 3 colonnes, une pour le lien du document, une pour son nom et une pour y mettre des boutons d'action (modifier+supprimer à priori).
Tu as également un bouton ajouter qui te permet d'ajouter une ligne dans ton tableau.
Pour ajouter une ligne ce que je ne sais pas c'est si tu as besoin d'une liste de documents existants ou si c'est, comme dans le cas d'un file upload, un nouveau à créer. Peux-tu préciser ?

Pour la modification, je ne vois pas trop l'intérêt de faire un aller/retour pour charger des informations, tu as ce qu'il faut dans ta liste, non ?

Pour la suppression, tu peux la faire par ajax et supprimer de ta vue la ligne concernée (par les api du modèle DOM) une fois l'action confirmée par un retour de la fonction ajax.

Bref, dans un premier temps, peux-tu me confirmer cette vue ?

[Thébé]

J'ai une difficulté présentement avec ma base de données, dès qu'elle est réglée je vais éditer mon message. Donc, prendre en compte que demain ce devrait être édité. Je vais faire des impressions d'écran étant donné qu'une image vaut mille mots. Nous pourrons ainsi mieux nous comprendre.

EDIT____________________________

Finalement j'ai réglé mon problème plus vite que prévus. J'en ai profité pour faire quelques impressions. N'ayez crainte, mon fichier zip n'est pas une bombe.

1 : Page JSP ou l'on peut choisir de gérer des catégories ou des Bonnes Pratiques. On commence par choisir une catégorie dans la liste et la seconde liste déroulante s'affiche.

2: Catégorie et bonne pratique (les listes)

a1 : J'ai clique sur le bouton ajouter des bonnes pratiques de l'image 2. "Insérer un document" est le bouton d'ajout d'inputs pour les documents associés à la bonne pratique.

a2 : Ce qui se passe si l'on clique sur "Insérer un document". Oui oui, c'est le code que tu m'as donné qui fait cette merveille OButterlin. De mon côté j'ai codé le bouton pour supprimer une ligne.

m1 : Voilà la même chose avec un bonne pratique de choisie pour la modifier. Quand l'usager choisit modifier (le l'image 2), les informations de la BP sont chargés et affichés dans les inputs correspondants.

Ce que je voudrais c'est pouvoir appeler le code JSP du bouton "Insérer un document", en boucle, pour les fichier qui existent déjà dans ma BD et qu'une fois tout chargé, l'usager peut en rajouter, les modifier, les supprimer ou ne rien faire (le code est fonctionnel pour ça). Mon code JS est dans un fichier distinct, donc pas dans le JSP. Quelque chose ressemblant à ceci (en gras) dans ma page JSP :

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
 
<div id="contenu_onglet2" class="contenu_onglet" style="display: none">
                                    <h3>Document</h3>
                                    <% if (!cible.equals("Supprimer")) {%>
                                    <input type="button" id="button" value="Insérer un document"
                                           onclick="addDoc()"/>
                                    <table id="files"></table>
                                    <br/>
                                    <% }
 
                                    if (!cible.equals("Ajouter")) {
                                        for (int i = 0; i < documents.size(); i++) {
                                             addDoc(/*Les informations du doc*/);
                                        }
                                    }%>
                                </div>

Malheureusement je crois avoir lu quelque part que c'était impossible. Est-ce le cas et si oui, y a t'il une solution alternative où je pourrais concerver ma fonction JS dans un fichier distinct (il y en a 3 autres similaires plus grosses pour cette page et je ne veux pas trop charger mon JSP).

Merci pour tout,
Thébé

[Thébé]

Résolu, j'ai trouvé comment faire pour appeler du js directement par le jsp durant le chargement.

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
 
<script type="text/javascript">
            function InclureDonnees() {
                addDoc("un", "deux");
                addEtape("un");
                addLien("un", "deux");
            }
        </script>
        <title>Gestion d'une bonne pratique</title>
    </head>
 
        <body onload="InclureDonnees()">

Les fonctions seront appelées durant le chargement et je peux passer les paramètres sans problème. Il me reste à trouver comment donner les paramètres. Surement une boucle des ArrayList contenant mes données à afficher.