Discussion :

[rfily]

Bonjour!
je voudrais savoir la fonctionnalité et l'utilité de innerHTML.
Merci !

[javatwister]

la fonctionnalité, c'est réécrire tout ou partie de la source sans y toucher et d'interpréter le résultat automatiquement;

l'utilité? euh... je vois pas;

[Sh4dow49]

l'utilité, c'est qu'avec AJAX, tu peux par exemple appeler une page php (ou dans un autre langage selon celui que tu utilise) pour modifier le contenu de ta page sans la recharger complètement (ce qui est donc beaucoup plus rapide dans pas mal de cas)

[E.Bzz]

(ce qui est donc beaucoup plus rapide dans pas mal de cas)

Rapide ?
A mettre en place pour le développeur, oui, mais sinon ... ?

quand et comment alors l'utiliser

Plutôt quand ne pas l'utiliser :
surtout pas pour mettre à jour le contenu d'un formulaire (avec IE en tous cas) : les modifications n'affecteraient que l'affichage et ne seraient pas prises en compte lors de l'envoie du formulaire.

Pour les exemples, tu en trouveras dans le forum Ajax

Mais tu peux aussi faire ça proprement avec les instructions DOM
(et dans ce cas, plus de restrictions)

A+

[Sh4dow49]

c'est vrai que ça dépend des cas au niveau de la rapidité, mais dans mon cas en tout cas c'est plus rapide de recharger une partie de la page comme mon table plutot que toute la page (qui nécessite de refaire toutes les requêtes SQL nécessaires à la page plutot que seulement celle qui remplit le table, entre autre)

[E.Bzz]

dans mon cas en tout cas c'est plus rapide de recharger une partie de la page comme mon table plutot que toute la page

Ca, bien sûr
Par contre, par rapport à la même mise à jour via les instructions DOM, c'est moins sûr ...

A+

[rfily]

justement je l'ai utiliser dans une table et dès que je click sur le boutton qui appelle la fonction les données du précédent élement disparaissent et comment faire pour les garder. voici le code

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
function addvar() 
{
	document.getElementById("ligne_famille").innerHTML += "<table width='100%' border='0' cellspacing='1' cellpadding='0' ><tr><td width='14%' align='center'><div align='left'>Famille Contrat : </div></td><td width='16%'><select name='select_famille[]'><option value=''></option>{option_famille}</select></td><td width='17%'><div align='left'>Genre Contrat : </div></td><td width='53%'><select name='select_genre[]'><option value=''></option>{option_genre}</select></td></tr></table>";	
}

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<tr><td><div id="ligne_famille">
	  <!-- BEGIN LISTE -->
	  <table width="100%" border="0" cellspacing="1" cellpadding="0" >
	  <tr>
        <td width="23%" align="center"><div align="left">Famille Contrat : </div></td>
        <td width="34%"><select name="select_famille[]">
          <option value=""></option>
          {option_famille}
        </select></td>
        <td width="14%"><div align="left">Genre Contrat : </div></td>
        <td width="29%"><select name="select_genre[]">
          <option value=""></option>
          {option_genre}
        </select></td>
      </tr>
    </table>
	<!-- END LISTE --></div></td>
	<tr>
        <td colspan="4" align="left">
            <input type="button" name="plus_famille" value="PLUS" onclick="addvar()"/>
      </td>
      </tr>

Merci d'avance

[Msieurduss]

Plutôt quand ne pas l'utiliser :
surtout pas pour mettre à jour le contenu d'un formulaire (avec IE en tous cas) : les modifications n'affecteraient que l'affichage et ne seraient pas prises en compte lors de l'envoie du formulaire.

Euh, tu es sûr de toi ?
J'ai une liste d'un formulaire qui est réécrite avec innerHTML (et appel Ajax dans une base de données) et ça fonctionne très bien...
Ou alors je t'ai mal compris ?

[E.Bzz]

Euh, tu es sûr de toi ?
J'ai une liste d'un formulaire qui est réécrite avec innerHTML (et appel Ajax dans une base de données) et ça fonctionne très bien...
Ou alors je t'ai mal compris ?

Une liste de formulaire ?
Un select dans un formulaire ?

Pour le 2°, si l'objet existe déjà => OK.
Si tu l'ajoutes via Ajax => KO

Ceci dit ma remarque concerne IE6 (pas testé en 7)

A+

[Bovino]

Euh, tu es sûr de toi ?
J'ai une liste d'un formulaire qui est réécrite avec innerHTML (et appel Ajax dans une base de données) et ça fonctionne très bien...
Ou alors je t'ai mal compris ?

Pourtant il a raison, IE est incapable d'attribuer un name dynamiquement, donc pas de name, pas de transmission de valeur sur le submit !
Ceci dit, pour l'anecdote, il me semble que dans ce cas, c'est IE qui respecte les standards car le name d'un élément est censé être readonly il me semble

[rfily]

Merci mais quand et comment alors l'utiliser. si possible avec un exemple

[Sh4dow49]

voici un exemple de comment l'utiliser (mais tu peux l'utiliser pour modifier bien d'autres choses que des listes déroulantes, par exemple je l'utilise pour modifier un table dans ma page pour modifier les infos qu'il contient).

quand l'utiliser, c'est à toi de voir.

Si c'est pour un site web, pense bien que pour te faire recenser sur google ou autre, cette technique sera invisible m'a-t-on dit, donc à utiliser avec modération