[DOM] Déclarer une variable sur plusieurs lignes

Version imprimable

15/05/2007, 22h59
fgallnii

[DOM] Déclarer une variable sur plusieurs lignes
Bonsoir,

Cela fait quelques temps que je cherche à savoir s'il est possible de déclarer une variable Javascript sur plusieurs lignes.

Voici ce que j'aimerais faire :
Code:

1 2 3 4 5 var maVar = "<div> <h1>blablablalblabla</h1> <div class='contain'>re blabla...</div> ... </div>";
J'ai essayer les simples quotes (ca ne marche pas non plus, sniff...)

Pour ceux qui souhaitent avant tout savoir pourquoi je m'embete à vouloir faire ca, et bien c'est tout simplement pour avoir un code plus lisible lorsque certaines de mes variables Javascript contiennent une structure Html ou Xml (par exemple).

Merci d'avance à tous :D

Pourquoi pas :

Code:

1
2
3
4
var maVar = "<div>"+
               " <h1>blablablalblabla</h1>"+
               "  <div class='contain'>re blabla...</div>"+
             "</div>";

15/05/2007, 23h32
fgallnii

C'est déjà un premier bon élément de réponse (et peut-être le seul possible d'ailleurs).

Seulement ce qui me dérange c'est d'être obligé de rajouter des + et " à foison alors qu'il serait tellement plus "soft" pour tout développeur de ne s'occuper que du ";" qui termine la déclaration de la chaine de caractères (et en plus le code serait davantage plus propre).

En Php, par exemple le ";" fait office de fin d'instruction. Alors peut-être qu'en Javascript le ";" n'est pas synonyme de fin d'instructions ??

Il existe la balise <<EOF en Php aussi pour déclarer sur plusieurs lignes avec une chaine contenant des " et ' non-échappé. Ya t-il un équivalent en Javascript ?

Enfin bon, merci bien LEK ta solution est déjà un premier pas et puis peut-être que d'autres ont la solution...
16/05/2007, 00h05
Auteur
bonsoir,

en javascript, le ; de fin d'instruction n'est pas obligatoire (hélas :( ), donc le retour chariot peu suffire comme fin d'intruction.
LEK te propose une solution correcte.

Sinon tu as un peu plus lourd :? :
Code:

1 2 3 4 5 6 7 var maVar =""; maVar = "<div>"; mavar += " <h1>blablablalblabla</h1>"; maVar += " <div class='contain'>re blabla...</div>"; maVar += "</div>";
16/05/2007, 08h55
SpaceFrog

l'idée de clareté du code est en soi assez louable ...

cependant ce qui l'est beaucoup moins c'est de mettre du code html dasn des variables ...

Quel est l'utilisation de ce code html ...
il serait plus judicieux de passer par le DOM avec createElement ...:roll:
16/05/2007, 09h06
LEK
Je dirais même que l'on ne peut pas comparer deux moteurs d'interprétation différents (je parle de php/javascript)...
Un autre moyen qui n'utilise pas le dom, reste multiplateforme et assez "propre" :
Code:

1 2 3 4 5 6 <textarea name='my_template' style='display:none'> <div> <h1>blablablalblabla</h1> <div class='contain'>re blabla...</div> </div> </textarea>
Code:

1 2 3 4 <script> var maVar = document.nomFormu.value; </script>
16/05/2007, 09h08
SpaceFrog

sinon pre aussi avec innerHTML ... (j'ai pas testé)
16/05/2007, 09h38
fgallnii

La solution du createElement m'étais venue à l'idée mais ma variable qui contient du Html ne doit pas forcément être affichée et je ne veux pas bidouiller en jouant sur le display de l'élément que j'aurai crée.
En fait, j'ai besoin de ceci car je crée une application reposant sur le framework Dojo et donc j'ai des objets qui parfois doivent afficher une certaine structure Html parfois une autre.

Je vous remercie pour vos réponses, on ce qui me concerne, je retiens celle de LEK qui se rapproche le plus de ce que je recherche.

Bonne journée à tous, et merci pour votre réactivité. Très très bon forum, à consommer sans modération !
16/05/2007, 09h45
SpaceFrog

Heu sisi on est là pour modérer ...
Donc avec modération :mouarf3:
28/10/2008, 13h21
gabole

hello,alors je me permet de reprendre ce post car il traite d'un sujet qui me semble similaire à mon problème actuel...

je souhaite remplacer le contenu d'une balise div ("content") avec du code html grace à la commande innerHTML

mon code html à inclure est assez long, et tiens sur plusieurs lignes.
je me suis donc débrouillé à générer quelque chose comme ceci:

var tab_express = "<form method=\"post\" name=\"location\" enctype=\"multipart/form-data\" action=\"mail.php\">";

var tab_express+="<table width=\"100%\" border=\"1\" cellpadding=\"0\" cellspacing=\"0\" bordercolor=\"#173F7C\">";

var tab_express+=" <tr>";

etc...voici le code avec le innerHTML:

var ID = "content";
document.all[ID].innerHTML = express;

et la, l'appel de la fonction me ressort une jolie erreur "objet attendu"

j'ai également essayé de me contenter de la premiere ligne de déclaration de "tab_express:

var tab_express = "<form method=\"post\" name=\"location\" enctype=\"multipart/form-data\" action=\"mail.php\">";

var ID = "content";
document.all[ID].innerHTML = express;

et la l'erreur est "erreur d'exécution inconnue"...

bref je cale, si quelqu'un pouvait m'aider...

merci !
28/10/2008, 13h35
fgallnii

Salut,
Est-ce que tu as essayé :

Code:

document.getElementById("content").innerHTML = express;

Si oui, il faut s'assurer que tu as bien un élément avec un id "content" dans ta page ou ton application (et qu'il est bien unique). Je te conseilles d'utiliser firebug soit pour parcourir le dom à la recherche de ton élément soit pour directement examiner le contenu :

Code:

console.debug(document.getElementById("content"));

Si ta page contient bien un élément avec un id "content", il n'a pas de raison que ce ne passe pas...

J'ai oublié un autre détail dans la déclaration de ta variable. Tu la redéclaire tout le temps alors qu'il la déclarer que la première fois :
Code:

1 2 3 4 5 var tab_express = "<form method=\"post\" name=\"location\" enctype=\"multipart/form-data\" action=\"mail.php\">"; var tab_express+="<table width=\"100%\" border=\"1\" cellpadding=\"0\" cellspacing=\"0\" bordercolor=\"#173F7C\">"; var tab_express+=" <tr>";
Ce qui est en rouge est à supprimer....

hello

merci pour ta réponse ultra expresse...bon aprés rajout de simple quotes ( et la suppresion des "var" superflus), ca fonctionne parfaitement sous firefox et pas sous ie7 (ca doit etre une blague, innerHTML a été introduit par ie non :mouarf:)

donc aucun bug ds firebug, et toujours le message erreur d'exécution inconnue sous ie :/

pour infos voici le code complet (un peu long désolé mais peut etre cela pourra aider):

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
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
function SetDiv() {
var ID = "content";
var form = document.getElementById.content;
var tab_express = '<form method=\"post\" name=\"location\" enctype=\"multipart/form-data\" action=\"mail.php\">';
tab_express+='<table width=\"100%\" border=\"1\" cellpadding=\"0\" cellspacing=\"0\" bordercolor=\"#173F7C\">';
tab_express+='  <tr>';
tab_express+='    <td bgcolor=\"#173F7C\" class=\"txtCartPrice\">Informations personnelles</td>';
tab_express+='  </tr>';
tab_express+='  <tr>';
tab_express+='    <td bordercolor=\"#FFFFFF\"><table width=\"100%\" border=\"0\">';
tab_express+='      <tr>';
tab_express+='        <td width=\"25%\"><div align=\"left\"><font size=\"2\" face=\"Arial, Helvetica, sans-serif\">Nom</font></div></td>';
tab_express+='        <td width=\"75%\"><div align=\"left\">';
tab_express+='          <input name=\"nom\" type=\"text\" class=\"field\" id=\"nom\" size=\"35\" />';
tab_express+='        </div></td>';
tab_express+='      </tr>';
tab_express+='      <tr>';
tab_express+='        <td><div align=\"left\"><font size=\"2\" face=\"Arial, Helvetica, sans-serif\">Pr&eacute;nom</font></div></td>';
tab_express+='        <td><div align=\"left\">';
tab_express+='          <input name=\"prenom\" type=\"text\" class=\"field\" id=\"prenom\" size=\"35\" />';
tab_express+='        </div></td>';
tab_express+='      </tr>';
tab_express+='      <tr>';
tab_express+='        <td><div align=\"left\"><font size=\"2\" face=\"Arial, Helvetica, sans-serif\">Email</font></div></td>';
tab_express+='        <td><div align=\"left\">';
tab_express+='          <input name=\"email\" type=\"text\" class=\"field\" id=\"email2\" size=\"35\" />';
tab_express+='        </div></td>';
tab_express+='      </tr>';
tab_express+='      <tr>';
tab_express+='        <td><div align=\"left\"><font size=\"2\" face=\"Arial, Helvetica, sans-serif\">T&eacute;l&eacute;phone mobile</font></div></td>';
tab_express+='        <td><div align=\"left\">';
tab_express+='          <input name=\"tel\" type=\"text\" class=\"field\" id=\"tel\" />';
tab_express+='        </div></td>';
tab_express+='      </tr>';
tab_express+='      <tr>';
tab_express+='        <td><div align=\"left\"><font size=\"2\" face=\"Arial, Helvetica, sans-serif\">T&eacute;l&eacute;phone autre</font></div></td>';
tab_express+='        <td><input name=\"tel2\" type=\"text\" class=\"field\" id=\"tel2\" /></td>';
tab_express+='      </tr>';
tab_express+='    </table></td>';
tab_express+='  </tr>';
tab_express+='</table>';
tab_express+='<br>';
tab_express+='<table width=\"100%\" border=\"1\" cellpadding=\"0\" cellspacing=\"0\" bordercolor=\"#173F7C\">';
tab_express+='  <tr>';
tab_express+='    <td bgcolor=\"#173F7C\" class=\"txtCartPrice\">Je souhaite acqu&eacute;rir un voilier / Bateau &agrave; moteur</td>';
tab_express+='  </tr>';
tab_express+='  <tr>';
tab_express+='    <td bordercolor=\"#FFFFFF\"><table width=\"100%\" border=\"0\" align=\"left\">';
tab_express+='      <tr>';
tab_express+='        <td width=\"25%\"><div align=\"left\"><font size=\"2\" face=\"Arial, Helvetica, sans-serif\">Type</font></div></td>';
tab_express+='        <td width=\"75%\"><div align=\"left\"><font size=\"2\" face=\"Arial, Helvetica, sans-serif\">';
tab_express+='          <select name=\"type2\" class=\"fields2\" id=\"type2\" onChange=\"changeDays()\">';
tab_express+='            <option value=\"x\" selected=\"selected\">Faire un choix</option>';
tab_express+='                        <option value=\"3\">Moteur cruiser</option>';
tab_express+='                        <option value=\"2\">Moteur day-boat</option>';
tab_express+='                        <option value=\"1\">Voilier</option>';
tab_express+='                      </select>';
tab_express+='        </font></div></td>';
tab_express+='      </tr>';
tab_express+='      <tr>';
tab_express+='        <td><div align=\"left\"><font size=\"2\" face=\"Arial, Helvetica, sans-serif\">Longueur</font></div></td>';
tab_express+='        <td><div align=\"left\">';
tab_express+='          <select name=\"Longueur\" id=\"Longueur\">';
tab_express+='            <option value=\"&lt; 8m\">&lt; 8m</option>';
tab_express+='            <option value=\"de 8 Ã  10m\">de 8 &agrave; 10m</option>';
tab_express+='            <option value=\"de10 Ã  12m\">de 10 &agrave; 12m</option>';
tab_express+='            <option value=\"&gt; 12m\">&gt; 12m</option>';
tab_express+='          </select>';
tab_express+='        </div></td>';
tab_express+='      </tr>';
tab_express+='      <tr>';
tab_express+='        <td><div align=\"left\"><font size=\"2\" face=\"Arial, Helvetica, sans-serif\">Budget</font></div></td>';
tab_express+='        <td><div align=\"left\">';
tab_express+='          <label></label>';
tab_express+='          <input name=\"budget\" type=\"text\" class=\"field\" id=\"budget\" size=\"35\" />';
tab_express+='        </div></td>';
tab_express+='      </tr>';
tab_express+='      <tr>';
tab_express+='        <td valign=\"top\"><div align=\"left\"><font size=\"2\" face=\"Arial, Helvetica, sans-serif\">D&eacute;tails</font></div></td>';
tab_express+='        <td><div align=\"left\">';
tab_express+='          <textarea name=\"details\" cols=\"35\" rows=\"5\" class=\"field\" id=\"tel5\"></textarea>';
tab_express+='        </div></td>';
tab_express+='      </tr>';
tab_express+='    </table></td>';
tab_express+='  </tr>';
tab_express+='</table>';
tab_express+='<p align=\"center\">';
tab_express+='  <input type=\"hidden\" name=\"case\" id=\"case\" />';
tab_express+='  <input name=\"Submit3\" type=\"submit\" class=\"field2\" value=\"Envoyer\" />';
tab_express+='</p>';
tab_express+='</form>';
 
document.getElementById("content").innerHTML = tab_express;
 
   }

merci d'avance !

Cordialement

Gabriel

28/10/2008, 15h15
gabole2

ok c'est bon, j'ai trouvé: il faut supprimer les balises "<form ..." et </form>

j'espère que ca évitera à d'autres de se manger le cerveau...par contre si quelqu'un à une explication logique à cela ca m'intéresse :D

Merci encore pour votre aide et votre réactivité

Gabriel
28/10/2008, 15h32
Auteur

quel code indigeste gabole2 ! :vomi: Tu ferais mieux d'utiliser des fonctions DOM !

Quand au message d'erreur sous IE ce n'est pas un bug :roll: mais une mauvaise utilisation de innerHTML cf. cette discussion (et d'autres dans le forum JS).