Afficher un div avec innerHTML en javascript

**AlinoCFC** · 09/11/2017, 16h07

Bonjour tout le monde. Voil� quelques heures je gal�re avec ces lignes des codes. En effet, je voudrais afficher le contenu de la variable recap1 apr�s le clic sur le bouton valider de la page recharge.jsp. Je ne comprends pas pour quelles raisons, rien ne s'affiche. Est-ce que quelqu'un y trouve des probl�mes?

le fichier recharge.jsp

Code HTML :

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
<html>
    <head>
        <link href="css/recapitulation.css" rel="stylesheet" type="text/css" media="all" />
        <title>Recharge</title>
    </head>
    <body>
          <div id="conteneur" class="fullScreen1 opacOut" style="display: none; z-index: 12;">
              <div id="dim_div" class="overlay" style="margin-right: 10px;"></div>
              <div class="corner_right" >		
                  <a id='closeATag' href="javascript:;" onclick="fermerFenetre('conteneur');">
                      <img id='closeImg' alt="fermer" src="images/close.png"></a>
                </div>
              <div class="dialogContent_block">
                <div id='conteneurChild'></div>
             </div>
        </div>
 
    </body>
</html>

le fichier recapitulatif.js

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
var toCall;
function recapituler(){
    var phone = document.getElementById('phone').value;
    var montant=document.getElementById('montant').value;
 
    var recap1 = '<div'+
                      'style="background-color: white; margin-left :30%; margin-right : 30px; width : 35%; overflow : auto; overflow-style : scrollbar;" align = "center">'+
                      '<div class="title0"></div> &Ecirc;tes-vous certains de vouloir valider les informations ci-dessous : <br><br><br>'+
                      '<table class="table_\">'+
                      '<tr style="background : black; color : white;\">'+
                      '<td>NUMERO</td><td>'+phone+'</td></tr>'+
                      '<tr style="background : black; color : white;\">'+
                      '<td>MONTANT</td><td>'+montant+'</td></tr>'
                      '</table>'+
                      '<input type="submit" id="validator\" value="OUI" class="form-buttons" style="margin-top: 4px;margin-bottom: 0px;"'+
                                         'onclick=""/>'+
                     '<input type="submit" value="NON" class="form-buttons" style="margin-left :10px; margin-top: 4px;margin-bottom: 0px;"'+
                                         '"onclick="fermerFenetre("conteneur")/>"'+
                      '</div><br><br><br><br><br><br><br><br><br><br><br>';
 
            showDialog('conteneur', 'conteneurChild', recap1);
            document.getElementById('validator').onclick = function(){
                toCall = function(){
                    recharger();
                };   
            };
 
}
 
function showDialog(idDialog, idDialogContent, msg){
    var dialog = document.getElementById(idDialog).value;
    var dialogContent = document.getElementById(idDialogContent).value;
    dialogContent.innerHTML = "";
    dialog.style.display = "block";
    dialogContent.innerHTML = msg;
    //dialogContent.style.display = "block";
    /*------ loading image block -----------*/
    var imgDiv = createLoadingImageBlock();
    dialogContent.appendChild(imgDiv);
    /*--------------------------------------*/
}
 
function fermerConteneur(idDialog){
    var dialog = document.getElementById(idDialog);
    dialog.style.display = "none";
}

le fichier recapitulation.css

Code CSS :

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
.fullScreen1{
    position:fixed;width:100%;top:0;left:0;
    height:auto;
}
#dialogContent{  
    display: inline-block;
    height: auto;
    width: 92%;
    margin-left:  3.8%;
    margin-bottom: 50px;
}
 
.dialogContent_block{
    position: fixed;
    height: auto;
    width: 100%;
    margin-top: 50px;
    overflow-y: auto;
    max-height: 100%;
    padding-top: 1px;
    z-index: 3;
    background: rgba(000,000,000,0.3);
}
 
.opacOut{
    animation-name: opacityOut;
    animation-duration: 0.5s;
    animation-iteration-count: 1;
    animation-timing-function: ease-out;
}
 
.corner_right #closeImg{
    height: 39px;
    width: 39px;
}
.corner_right #closeATag{
    display: inline-block;
    height: 40px;
    width: 40px;
    border-radius: 50px;
    background: linear-gradient(#aebcbf,#6e7774, #0a0e0a,#0a0809);
    background: -webkit-linear-gradient(#aebcbf,#6e7774, #0a0e0a,#0a0809);
    background: -moz-linear-gradient(#aebcbf,#6e7774, #0a0e0a,#0a0809);
    text-align: center;
}

**Michel** · 09/11/2017, 16h21

Bonjour,
Je n'ai pas test� le tout mais je suis tomb� sur

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
'<div'+  
'style="background-color: white; margin-left :30%;  margin-right : 30px; width : 35%; overflow : auto; overflow-style :  scrollbar;" align = "center">'

qui risque donner quelque chose comme

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

<divstyle = ....etc.

ce qui n'est pas une balise div
En fait, il manque un espace apr�s div ou avant style.

**AlinoCFC** · 10/11/2017, 10h08

je viens de rajouter un espace entre div et style, mais il n'y a toujours pas un rendu dans ma page

**Archim�de** · 10/11/2017, 12h14

Je n'ai pas tout lu mais :

Code javascript :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
3
4
5
 
    var dialog = document.getElementById(idDialog).value;
    var dialogContent = document.getElementById(idDialogContent).value;
    dialogContent.innerHTML = "";
    dialog.style.display = "block";

il me semble que tes param�tres identifiants pointent en utilisant ta fonction sur des div... donc si tu veux utiliser les propri�t�s de ces objets, le value n'a pas de sens...

Code javascript :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
3
4
5
6
 
 var dialog = document.getElementById(idDialog);
 var dialogContent = document.getElementById(idDialogContent);
 dialogContent.innerHTML = "";
 dialog.style.display = "block";
 ......

Regarde les Cours JavaScript

**Watilin** · 10/11/2017, 15h36

innerHTML c�est sous-optimal et source d�erreurs. Utilise les m�thodes du DOM :

Code JS :

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
var recap1 = document.createElement("div");
recap1.classList.add("recap1");
 
var title0 = document.createElement("div");
title0.classList.add("title0");
recap1.appendChild(title0);
 
var text = document.createTextNode("\xCAtes-vous certain(e) de " +
  "vouloir valider les informations ci-dessous\u202F?");
recap1.appendChild(text);
 
var table = document.createElement("table");
table.classList.add("table_");
recap1.appendChild(table);
 
var tr0 = table.insertRow();
tr0.insertCell().textContent = "Numéro";
tr0.insertCell().textContent = phone;
 
var tr1 = table.insertRow();
tr1.insertCell().textContent = "Montant";
tr1.insertCell().textContent = montant;
 
var inputOui = document.createElement("input");
inputOui.type = "submit";
inputOui.id = "validator";
inputOui.value = "Oui";
inputOui.classList.add("form-buttons");
recap1.appendChild(inputOui);
 
var inputNon = document.createElement("input");
inputNon.type = "submit";
inputNon.value = "Non";
inputNon.classList.add("form-buttons");
recap1.appendChild(inputNon);
 
inputNon.addEventListener("click", function (event) {
  event.preventDefault();
  fermerFenetre("conteneur");
});

Et ceci � rajouter dans le code CSS :

Code CSS :

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
.recap1 { background-color: white;
          margin-left: 30%;
          margin-right: 30px;
          width: 35%;
          overflow: auto;
          overflow-style: scrollbar;
          text-align: center;
        }
 
.recap1 tr { background: black;
             color: white;
           }
 
.recap1 td:first-child { font-variant: small-caps;
                       }
 
#validator { margin-top: 4px;
             margin-bottom: 0px;
           }
 
input[type="submit"][value="NON"] { margin-left: 10px;
                                    margin-top: 4px;
                                    margin-bottom: 0px;
                                  }

Pour des petits fragments de HTML tu peux utiliser insertAdjacentHTML, c�est d�j� plus performant, mais �a ne r�gle pas le probl�me des risques d�erreurs d�s aux guillemets.

Docs :

Note : avec la nouvelle m�thode append, tu peux te passer de createTextNode, mais ce n�est pas encore compatible partout.

Pour �viter les attributs onclick qui salissent le code HTML : addEventListener. Et je rajouterais que les liens javascript: sont g�n�ralement consid�r�s comme une mauvaise pratique. Pour rendre tes liens plus accessibles, rajoute-leur des attributs aria ; ou mieux, remplace-les par des boutons, car le r�le initial d�un lien est de mener vers une autre page, pas de d�clencher un comportement dans la page.

Edit : tu remarqueras que j�ai supprim� les pleines capitales. La seule situation o� leur usage est justifi�, c�est pour indiquer que quelqu�un est en train de crier. Autrement, c�est une faute de typographie. Les petites capitales peuvent �tre utilis�es mais c�est un choix purement stylistique, et il doit �tre exprim� par du CSS uniquement. C�est pourquoi j�ai rajout� la r�gle font-variant: small-caps.

**NoSmoking** · 11/11/2017, 16h58

Bonjour,

...apr�s le clic sur le bouton valider de la page recharge.jsp

cela doit surement �tre ma vue mais dans le code du fichier recharge.jsp que tu fournis je ne vois pas de bouton � Valider � !?!

**AlinoCFC** · 13/11/2017, 08h38

Bonjour NoSmoking. En fait j'ai juste plac� un extrait de script de la page. C'est ainsi que le bouton Valider n'est pas sorti.

**AlinoCFC** · 13/11/2017, 08h44

Bonjour Watilin. Je suis entrain d'exploiter votre solution en utilisant les DOM. Mais je trouve la proc�dure si complexe. Toute fois je me suis d�j� mis pour d'abord comprendre la logique de fonctionnement de DOM et ensuite commencer � coder. Merci pou votre coup de pouce.

**AlinoCFC** · 13/11/2017, 10h19

Solution trouv�e. En fait c'�tait juste que je faisais mal l'appel de mon fichier recharge.js
Merci tout le monde pour votre participation � cette discussion.

Afficher un div avec innerHTML en javascript

JavaScript

Discussions similaires

Partager

Partager