février
2008
Un article de nicorama
L’essence d’Ajax est de manipuler un objet ou un document sur le navigateur sans être géné par le temps de latence du serveur.
Cette astuce du jour propose de préparer un peu le terrain en créant dynamiquement sur la page du contenu HTML. Nous verrons dans des articles plus fouillés comment enregistrer la modification sur le serveur.
Le deuxième objectif est de documenter en français la fonction Element#insert( ) de Prototype, qui a ce jour a été « oubliée » par les faiseurs de documentation.
Voici comment créer un Element HTML à l’intérieur d’un autre élément :
<script type="text/javascript" src="js/prototype.js"></script>
<div id="haut">Haut</div>
<div id="bas">Bas</div><script type="text/javascript">
/* Création de l’élément */
var numero = new Element(‘h3′, { ‘class': ‘pNumber’ }).update(‘Titre’);
/* Insertion de l’élément */
$(‘haut’).insert( {bottom: numero});</script>
« Mon dieu quelle horreur ! » s’écrierait tout programmeur orthodoxe de Java. J’en fus et pourtant cette écriture complexe est extrèmement productive. Le fait d’être compact est également un plus quand c’est mélangé au milieu du XHTML.
Pour la création de l’élément, vous trouverez la documentation et les exemples ici. L’insertion de l’élément necessite plus d’explications :
$(‘haut’) correspond bien-sûr à l’élément HTML ayant pour id : ‘haut’. Pour les non-initiés à Prototype, cela correspond à document.getElementById(‘haut’); tout en s’assurant que $(‘haut’) aura des propriétés compatibles avec tous les navigateurs.
{bottom : numero} contient d’une part la position, puis l’élément OU le contenu à rajouter.
On peut par exemple faire :
$('haut').insert( {after: '<h3 class="pClass">Petit paragraph</h3>'});
$('haut').insert( {before: 'Un peu de texte, sans balise'});
Il y a quatre positions possibles : before, after, top , bottom. Voici ce que les différentes positions donnent en pratique avec le code suivant :
var numero = new Element('h3', { 'class': 'pNumber' }).update('Titre'); /* nouvel element */
$('haut').insert( {position : numero }); /* Insertion */
| position | code créé | resultat | commentaire |
| before |
TitreHaut
Bas
|
TitreHaut
Bas
|
L’element h3 est créé avant l’élément ‘haut’ |
| after |
Haut
TitreBas
|
Haut
TitreBas
|
L’element h3 est créé après l’élément ‘haut’. Il s’intercalle donc entre les deux DIV |
| top |
TitreHaut Bas
|
TitreHaut Bas
|
L’element h3 est créé à l’intérieur de l’élément ‘haut’. Parmi les fils de l’élément ‘haut’, h3 est rajouté en tout premier. |
| bottom |
Haut
TitreBas
|
Haut
TitreBas
|
L’element h3 est créé à l’intérieur de l’élément ‘haut’. Parmi les fils de l’élément ‘haut’, h3 est rajouté tout à la fin.. |
Ces quatres possibilités rendent l’ajout d’Elements bien plus aisés que le temps du document.write(…). Attention toutefois au style de programmation : comme pour le PHP et sans doute le Ruby, on peut toutefois facilement faire proliférer les abominables guillemets simples, doubles et backslachés.
Dernière astuce :il est possible de raccourcir l’écriture en se passant de la position et des accolades en écrivant simplement :
$('haut').insert( numero);
Cela revient à utiliser la position bottom, ce qui sera probablement 80% de vos insertions.