Naviguation dynamique en Js

Bonjour,

Je suis plutot nouveau en javascript.
Je suis en train de creer un site web sur lequel l'utilisateur pourrait naviguer d'une page à une autre en javascript, à l'interieur d'un même fichier HTML.

J'ai donc ma page HTML avec une balise div quelque part au milieu:

Code:

---

<div id="contenu"></div>

---

et un bouton "Suivant" un peu plus loin qui permet de générer le contenu dans ma balise "contenu":

Code:

---

<input type="button" id="contenuSuivant" value="Suivant"/>

---

Le bouton est attaché à un listener (en js):

Code:

---

$(document).ready(function () {("#contenuSuivant").click(genereContenu); });

---

Et finalement une fonction javascript genereContenu() qui produit du contenu pour le div:

Code:

---

1 2 3 4 5 6

function genereContenu() { alert('Nouveau contenu');   document.getElementById("contenu").innerHTML = "Voici le contenu"; }

---

Et tout marche super bien jusque là!
Mon probleme maintenant est tout simple. Le contenu que je voudrais generer est bien plus compliqué que "Voici le contenu". Il y a en fait une 30aine de lignes de code, qui manipule des variables, appel d'autres fonctions, etc. Je pourrais tout mettre à l'arrache comme ça :

Code:

---

document.getElementById("contenu").innerHTML = "Concatenation de plus de 30 lignes de code <br/> Sans coloration syntaxique <br/> Sans retour à la ligne <br/>Impossible à relire et très difficile à débuger <br/> etc. etc. etc.";

---

Mais c'est très sale et ça ne me convient pas.

Je suis sûr qu'il y a une methode plus conventionnelle pour faire ça, mais je ne la trouve pas pour le moment.

Est-ce que quelqu'un pourrait m'aider svp?

Merci bcp par avance!

Salut piteon !

innerHTML est un très bien pour débuter. Ou alors via createElement et appendChild. (voir tuto pour manipuler le DOM)

D'ailleurs, je vois que tu utilises jQuery. Donc utilise le jusqu'au bout et remplace innerHTML par le jQuery équivalent : $("#contenu").html("Voici le contenu"); (ou alors n'utilise pas jQuery :D )


Pour aller plus loin, il y a des méthodes plus élégantes :
- le templating client : Suivez le guide de SylvainPV
- le data binding (voir Tuto Angular par exemple)

Salut Kaamo et merci pour ta réponse.

Je lis les tutos sur les DOMs, et je commence à mieux comprendre.
Honnetement, j'aurais espéré une solution plus simple. Faire du templating client c'est plutot décourageant parcequ'il faut que je me familiarise avec tout un tas de fonctions, bibliotheques, templates et tout ça... Et je suis encore débutant en Js.

Mais bon apparement je n'ai pas trop le choix.

Sinon j'ai pensé mettre tout mon contenu dans ma page HTML entre des balises <contenu1></contenu1> , avec un style="display:none" pour que ça ne soit pas visible. Ensuite j'appelle la fonction javascript:

Code:

---

document.getElementById("contenu").innerHTML = document.getElementById("contenu1").innerHTML

---

De cette façon, je peux beneficier de la coloration et faciliter le debugage.

Mais ça ne marche pas bien parceque le contenu n'est pas dynamique (meme en introduisant des lignes javascript dans <contenu1></contenu1> les variables ne sont pas mises à jour lorsque je le passe dans la zone <contenu>).
Peut-etre que quelqu'un aurais une solution plus "débutant" pour moi?

Je t'ai donné les techniques pour faire ce que tu souhaites. Le templating et data binding c'est clairement "Pour aller plus loin" comme je l'ai marqué et pour que tu saches ce qui se fait.

Bien sûr, pour ton cas, la solution la plus simple est :$("#contenu").html("Voici le contenu");

un vieux truc pour le principe
http://www.developpez.net/forums/d22...-elements-dom/

A+JYT