Discussion :

[Clampu]

Bonjour à tous,

J'ai un petit soucis sur ma page. Pour faire simple, j'ai un checkbox qui remplace le contenu d'un DIV dynamiquement. J'utilise pour cela le code suivant dans ma page JSP :

Code :

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

1
2
3
4
5
6
7
if (document.getElementById('cb1').checked)
                       {                    
                           document.getElementById('cb1_div').innerHTML = 
                               '<div id="cb1_div"><input type="checkbox" id="cb1" name="listerClients" value="Utiliser un client déjà listé" onchange="switch_client()"> Utiliser un client déjà listé<br>'  +
                               '<%@include file="/inc/formCreationClient.jsp" %>'+'</div>';
 
                       }

Le soucis est que la page html générée ressemble à ceci :

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
if (document.getElementById('cb1').checked)
                       {                    
                           document.getElementById('cb1_div').innerHTML = 
                               '<div id="cb1_div"><input type="checkbox" id="cb1" name="listerClients" value="Utiliser un client déjà listé" onchange="switch_client()"> Utiliser un client déjà listé<br>'  +
                               '<fieldset>
    <legend>Informations client</legend>    
    <label for="nomClient">Nom <span class="requis">*</span></label>
    <input type="text" id="nomClient" name="nomClient" value="" size="20" maxlength="20" />    
    <span class="erreur"></span><br />        
    <label for="prenomClient">Prénom </label>    
    <input type="text" id="prenomClient" name="prenomClient" value="" size="20" maxlength="20" />    
    <span class="erreur"></span><br />    
    <label for="adresseClient">Adresse de livraison <span class="requis">*</span></label>    
    <input type="text" id="adresseClient" name="adresseClient" value="" size="20" maxlength="20" />
    <span class="erreur"></span><br />    
    <label for="telephoneClient">Numéro de téléphone <span class="requis">*</span></label>    
    <input type="text" id="telephoneClient" name="telephoneClient" value="" size="20" maxlength="20" />
    <span class="erreur"></span><br />        
    <label for="emailClient">Adresse email</label>    
    <input type="email" id="emailClient" name="emailClient" value="" size="20" maxlength="60" />    
    <span class="erreur"></span>    <br />
</fieldset>'+'</div>';
 
                       }

On remarque grâce à la colorisation syntaxique (au moins celle de firefox, sur l'interpréteur de ce forum il colorie bien en rouge la string) que le code de la JSP inclue n'est pas à l'intérieur des apostrophes.
Voici le screen sur firefox :


On voit bien qu'après fieldset, le code n'est plus interprété comme string JS (plus colorié en orange).


Le JS n'est donc pas capable de concaténer toute la page en une string, il plante. Si je supprime les retours à la ligne gênants dans la jsp inclue, il n'y a plus de soucis car le JS n'a plus de retour à la ligne à effectuer :

Code :

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

1
2
3
4
5
6
7
if (document.getElementById('cb1').checked)
                       {                    
                           document.getElementById('cb1_div').innerHTML = 
                               '<div id="cb1_div"><input type="checkbox" id="cb1" name="listerClients" value="Utiliser un client déjà listé" onchange="switch_client()"> Utiliser un client déjà listé<br>'  +
                               '<fieldset><legend>Informations client</legend>    <label for="nomClient">Nom <span class="requis">*</span></label>    <input type="text" id="nomClient" name="nomClient" value="" size="20" maxlength="20" />    <span class="erreur"></span>    <br />        <label for="prenomClient">Prénom </label>    <input type="text" id="prenomClient" name="prenomClient" value="" size="20" maxlength="20" />    <span class="erreur"></span>    <br />    <label for="adresseClient">Adresse de livraison <span class="requis">*</span></label>    <input type="text" id="adresseClient" name="adresseClient" value="" size="20" maxlength="20" />    <span class="erreur"></span>    <br />    <label for="telephoneClient">Numéro de téléphone <span class="requis">*</span></label>    <input type="text" id="telephoneClient" name="telephoneClient" value="" size="20" maxlength="20" />    <span class="erreur"></span>    <br />        <label for="emailClient">Adresse email</label>    <input type="email" id="emailClient" name="emailClient" value="" size="20" maxlength="60" />    <span class="erreur"></span>    <br /></fieldset>'+'</div>';
 
                       }

Une idée ? Je comprend bien le soucis : un retour à la ligne dans le JS fait fermer le string délimité par une '. Mais je n'arrive pas à trouver de solution sans supprimer les retours à la ligne.

Merci d'avance

[freddou17]

Bonjour,

Ce que je ferrais,
1) Essaie d'utiliser des variables

Code :

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

var monElmtDom = document.getElementById("cb1") //penses au double quotes

2) Mets ton inner dans une variable

Code :

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

1
2
3
4
5
 
var textAInserer = "<div id='cb1_div'><input type='checkbox' id='cb1' name='listerClients' value='Utiliser un client déjà listé' onchange='switch_client()'> Utiliser un client déjà listé<br>";
textAInserer+=	"<fieldset><legend>Informations client</legend>    <label for='nomClient'>Nom <span class='requis'>*</span></label>";// je n'ai pas repris tout ton code à toi de le mettre en entier
//par rapport à ton code inverse simples quotes/double quotes
 monElmtDom.innerHTML = textAInserer;

Je te laisse tester...
++

[Clampu]

Merci pour ta réponse.

1) Pourquoi faire ? mon div est bien détecté, d'ailleurs cela fonctionne bien pour peu que je mette ma JSP appelée sur une seule ligne. Pas de soucis de ce coté là (fonctionne parfaitement si j'enlève <%@include file="/inc/formCreationClient.jsp" %>.

2) Tu me demandes ici de mettre le code en dur (ce qui fonctionnerai) mais ce n'est pas ce que je souhaite faire : le code que j'ai produit est celui cité lors de ma première citation, les 2 autres ne sont que le résultat coté client. Je peux éventuellement faire comme ceci pour suivre ta logique pour découper :

Code :

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

1
2
3
4
5
 
         var monElmtDom = document.getElementById('cb1_div').innerHTML;     		
         var textAInserer  = '<div id="cb1_div"><input type="checkbox" id="cb1" name="listerClients" value="Utiliser un client déjà listé" onchange="switch_client()"> Utiliser un client déjà listé<br>';
        textAInserer  += '<%@include file="/inc/formCreationClient.jsp" %>'+'</div>';
        monElmtDom = textAInserer;

Exactement le même soucis : ne fonctionne que si la page inclue formCreationClient est sur une seule ligne. Le code ainsi écrit se transforme en :

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
var monElmtDom = document.getElementById('cb1_div').innerHTML;   
var textAInserer  = '<div id="cb1_div"><input type="checkbox" id="cb1" name="listerClients" value="Utiliser un client déjà listé" onchange="switch_client()"> Utiliser un client déjà listé<br>';
              			textAInserer  += '<fieldset>
	<legend>Informations client</legend>    
	<label for="nomClient">Nom <span class="requis">*</span></label>
	<input type="text" id="nomClient" name="nomClient" value="" size="20" maxlength="20" />    
	<span class="erreur"></span><br />        
	<label for="prenomClient">Prénom </label>    
	<input type="text" id="prenomClient" name="prenomClient" value="" size="20" maxlength="20" />    
	<span class="erreur"></span><br />    
	<label for="adresseClient">Adresse de livraison <span class="requis">*</span></label>    
	<input type="text" id="adresseClient" name="adresseClient" value="" size="20" maxlength="20" />
	<span class="erreur"></span><br />    
	<label for="telephoneClient">Numéro de téléphone <span class="requis">*</span></label>    
	<input type="text" id="telephoneClient" name="telephoneClient" value="" size="20" maxlength="20" />
	<span class="erreur"></span><br />        
	<label for="emailClient">Adresse email</label>    
	<input type="email" id="emailClient" name="emailClient" value="" size="20" maxlength="60" />    
	<span class="erreur"></span>    <br />
</fieldset>'+'</div>';
              			document.getElementById('cb1_div').innerHTML = textAInserer;
               		}

Les retours à la ligne empêchent encore de faire une variable JS. En gros, il faudrait trouver comment supprimer les retours à la ligne avant l'interprétation pas JS (au niveau du JSP donc). Autrement dis, j'aimerai qu'en JS écrite ça

Code :

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

1
2
var i = 'aaa
bbbb';

soit la même chose que d'écrire

Code :

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

1
2
var i = 'aaa'+
'bbbb';

[freddou17]

Merci pour ta réponse.

1) Pourquoi faire ? mon div est bien détecté, d'ailleurs cela fonctionne bien pour peu que je mette ma JSP appelée sur une seule ligne. Pas de soucis de ce coté là (fonctionne parfaitement si j'enlève <%@include file="/inc/formCreationClient.jsp" %>.

C'était juste pour eviter d'écrire plusieurs fois getElementById...

...[/CODE]

J'avais pas fait attention à ta première citation ...

Ce que je te propose c'est de faire quelquechose comme ci-dessous

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
 
<h3>Page de test</h3>
 
 
<div id="test"></div>
 
<div id="test2" style="display:none"><%@include file='./test1.jsp' %></div>
 
<script>
 
function onclickDeTaCheckBox(){
var innerAinserer = document.getElementById("test2").innerHTML;
var innerAinserer2 = "<div id='cb1_div'><input type='checkbox' id='cb1' name='listerClients' value='Utiliser un client déjà listé' onchange='switch_client()'> Utiliser un client déjà listé<br>";
 
var tot = innerAinserer2 + innerAinserer + "</div>";
 
document.getElementById("test").innerHTML = tot;
 
}
</script>

J'ai testé et aucun problème, sinon tu peux aussi utiliser l'AJAX.
Par contre pourquoi ne pas insérer directement ton fieldset dans ton formulaire et l'afficher ou non selon le click sur la checkbox (en CSS).

++

[Clampu]

Je vais finir par penser que mon truc n'est pas possible. Je peux effectivement utiliser une solution de contournement (cacher le div, éventuellement AJAX (pas testé)), mais le faire à ma manière (pour la science on va dire, ou parce que je suis têtu et que je veux cette solution là) ne semble pas possible. Il faut savoir que le code généré par le <%@include file="/inc/formCreationClient.jsp" %> ressemble à ceci :

Code :

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

1
2
3
4
5
6
7
8
9
10
BLABLA
      out = pageContext.getOut();
      _jspx_out = out;
 
      out.write("<!DOCTYPE html>\r\n");
      out.write("<html>\r\n");
      out.write("    <head>\r\n");
BLABLA
try{out.clearBuffer();}
BLABLA

La variable 'out' est fermée à l'intérieur donc du <%@include file="/inc/formCreationClient.jsp" %>. Je ne voit pas comment la modifier avant qu'elle soit interprétée pour le JS.

Je ne met pas le topic en résolu (car ne l'est pas totalement), donc si vous avez une idée (genre une option dans le <%@include %>) pour spliter les \r\n, faites moi signe, sinon ne vous embêtez pas, il est possible de faire autrement (hide du div).

Merci beaucoup