Changement Dynamique de Contenu

[Aprilwine]

On me pardonnera si ce sujet a été déjà traité ici, mais...

Est-il possible de changer le contenu textuel d'un DIV sans recharger toute la page? Je suis certain de l'avoir vu sur un site, mais comment le faire? Je voudrais créer un système de dossiers déroulants et sûrement mes utilisateurs seraient heureux de ne pas devoir tout recharger sur chaque clic du souris.

Modifié 20 Mars 2006 par Aprilwine

[MS-DOS_1991]

Est-il possible de changer le contenu textuel d'un DIV sans recharger toute la page? Je suis certain de l'avoir vu sur un site, mais comment le faire? Je voudrais créer un système de dossiers déroulants et sûrement mes utilisateurs seraient heureux de ne pas devoir tout recharger sur chaque clic du souris. 

<{POST_SNAPBACK}>

Salut

Tu dois utiliser le JavaScript pour faire cela

Un exemple simple:

<script type="text/javascript">
function ChgDivContent(div_id, new_content)
{
document.getElementById(div_id).innerHTML = new_content;
}
</script>
[...]
<p style="cursor: pointer;" onClick="ChgDivContent('div_de_test', '<p>Texte d\'arrivée</p>')">Changer</p>
<div id="div_de_test"><p>Texte de départ</p></div>

[Aprilwine]

Après avoir lu un article sur cette méthode (il y a deux ou trois ans, je l'admets), j'ai conclu que c'était seulement les browsers de Microsoft qui offrait cette fonction, et qu'il n'y avait aucune méthode universelle pour l'accomplir. Mais après tester votre exemple sous Safari 1.3, j'arrive à le faire marcher. Qu'est-ce qui se passe? Cette méthode est-elle devenue le standard?

J'ai essayé aussi les fonctions DOM "createElement", "setAttribute", "insertText", et "appendChild", mais cela n'a rien fait et, à vrai dire, je ne comprends pas trop ces choses. Font-elles même parties du JavaScript?

Modifié 20 Mars 2006 par Aprilwine

[Dudu]

Bonsoir.

Oui et non.

"innerHTML" est effectivement quelque chose de non-standard: c'est propriétaire Microsoft.

Effectivement, quelques navigateurs (hors IE) le reconnaissent malgré tout, pour des raisons de compatibilité avec de vieilles applications Javascript/DOM

Effectivement, çà reste du code relativement "sale".

D'un autre côté, ça offre l'avantage d'être très rapide à mettre en place ...

Cela étant, il existe bien évidemment des manières de faire un peu plus conformes aux standards.

Je te laisse lire ces 3 liens très intéressants (c'est en anglais, mais vu que tu es expatrié aux US çà ne devrait pas te poser trop de problème )

• Alternatives to innerHTML
  sur l'excellent site slayeroffice.com (site de référence à mettre d'urgence dans ses favoris s'il ne l'est pas déjà)
  
• Migrate apps from Internet Explorer to Mozilla
  chez IBM. Voir aussi les articles adjacents.
  
• Dynamic Content w/ DOM II
  sur la partie développeurs du site d'Apple (contient un chapitre très instructif sur pourquoi ne pas utiliser innerHTML)
  

[Aprilwine]

C'est parfait; c'est exactement ce que je cherchais. Merci!

Expatrié? Tu le crois? On est flatté...