Florent V. a écrit :
Bonjour,
Il faudrait que tu décrives plus précisément ce que tu souhaites faire. À vue de nez, c'est de la manipulation du DOM, donc les renvois vers une documentation sur la manipulation du DOM en JavaScript me semblent pertinents.
Bonjour Florent,
Mon besoin est somme toute assez simple.
Comme je l'expliquais, j'ai un tableau HTML assez complexe dont je souhaite mettre à jour le contenu des cellules. Le contenu est calculé "à la volée" par du javascript associé avec de l'Ajax. En gros, ce tableau est un résumé d'informations financières que l'utilisateur a rempli dans la page.
Actuellement, j'ai créé un fichier qui contient le code HTML du tableau. J'ai identifié le contenu des cellules qui m'intéressent par des pseudos variables (%montant%, %capital%,...).
Voici un exemple succint de ce que pourrait être mon modèle :
<table>
<tr>
<td>Montant de la prime</td>
<td>%montantPrime%</td>
</tr>
</table>
Le fichier HTML subit en fait deux niveaux de modification :
- d'abord par le PHP. A ce niveau, je remplace certaines "variables" qui ne sont pas influencées par les choix de l'utilisateur dans la page et qui donc n'ont pas besoin d'être faite par le Javascript. Pour fixer cette idée, c'est comme si mon modèle devait faire apparaître l'adresse IP ou la date du jour. Quoi que fasse l'utilisateur, la date du jour ou son IP ne changent pas (heu, svp, c'est un EXEMPLE, donc, pas la peine de me faire une longue explications sur le fait que l'utilisateur peut être devant son écran à 23h59 ou qu'au même moment le bail de son IP a expiré
), donc je peux les renseigner au moment de la création de la page HTML.
$template = file_get_contents("analyse_tmpl.html");
/*
.....
ici, modifications sur le contenu de $template, faites par le PHP
....
*/
echo "<div class='template' id='modeleResume'>";
/*
* Modèle du tableau qui sera modifié à la volée par le Javascript
*/
echo $template;
echo "</div>";
echo "<div id='divResume'>";
echo "</div>";
- ensuite par le javascript. Là, je prends en compte "en live" les changements faits par l'utilisateur.
template = document.getElementById("modeleResume").innerHTML;
cResume = document.getElementById("divResume");
// Calculs et autres trucs en javascript...
template = template.replace("%montantPrime%",_montantDeLaPrime);
cResume.innerHTML = template;
Voila mon code édulcoré. Cependant, c'est un peu "bourrin". Certes, ça marche si on prend la peine de bien écrire son code JS et de le "blinder" (terme un peu déplacé quand il s'agit de JS, mais qui consiste à essayer de prévoir tous les cas de figure afin d'éviter un plantage du à une variable non initialisée et j'en passe...
).
Florent V. a écrit :
Si tu souhaites te faciliter un peu la vie, tu peux éventuellement utiliser une bibliothèque JavaScript qui facilite la manipulation du DOM. Je pense notamment à jQuery.
J'aurais aimé savoir s'il y a une méthode plus "propre" , voire plus rapide en terme de temps d'exécution. En fouillant, j'ai cru lire que le remplacement dans le innerHTML était bien moins rapide que la manipulation directement via le DOM.
J'ai choisi ce système de template, car il m'évitait d'avoir à concevoir mon tableau HTML en l'écrivant à la main en PHP, puis en m'obligeant ensuite en JS à aller chercher le contenu de chaque "<td>" dont je souhaite modifier le contenu. Là, si je veux modifier la structure de mon tableau, je vais juste dans le fichier HTML du template. Les cas que j'ai pu lire qui utilisent le DOM créent de toute pièce tout le tableau ! Donc finalement, c'est déshabiller Pierre pour habiller Paul : j'évite de le créer en PHP pour le créer en JS !
Florent V. a écrit :
Pour l'utilisation de «templates», là ça m'échappe un peu. À part faire une chaine de caractères qui contient un code HTML et y insérer les valeurs de variables, et insérer le tout dans un document via innerHTML, je ne vois pas trop ce que ça peut recouvrir.
Bah, le terme est très certainement pompeux (je ne revendique pas son origine, car repris de l'article d'origine, mais je le trouve assez proche de la réalité toutefois).
Florent V. a écrit :
Questions en vrac:
1. Description précise de la fonctionnalité souhaitée?
Je pense avoir répondu à ta question dans mon loooong développé. Mais si ça ne suffit pas, n'hésite pas !
Florent V. a écrit :
2. Tu as prévu un fonctionnement sans JavaScript (via PHP uniquement avec rechargement de la page)?
Le dévelopement initial avait été fait sans JS, mais cela n'était pas judicieux pour cet écran. En effet, l'affichage et la présentation de la page doivent refléter rapidement les choix de l'utilisateur pour l'aider. Or, seul JS et Ajax me permettent cette souplesse.
Florent V. a écrit :
2. Quelles sont es compétences en JavaScript? Utilises-tu un bibliothèque particulière?
Ah ! J'ai à mon actif quelques colères mémorables contre quelques points virgules furtifs ou problème de compatiblité IE/FF. Sinon, plus sérieusement, j'ai développé quelques "classes" en JS et j'en fais régulièrement. Mais à mon grand plaisir, je découvre tous les jours de nouvelles fonctionnalités et usages qui me font amèrement regretter des fois de ne pas les avoir connues plus tôt (perfectionniste que je suis...
). J'ai eu mon diplome "alert('hello world');" avec mention
.
Le DOM, j'en mange un peu à toutes les sauces, et c'est justement les "sauces" qui me restent sur l'estomac, car cuisinées n'importe comment ! J'aime bien un petit exemple simple qu'une longue doc théorique qui enfonce des portes ouvertes (du genre "getChild()" => obtient le Child ... T'es content avec ça... bon d'un autre côté, s'il n'y a rien d'autre à dire
....)
