Inserer des lignes avec DOM : rester au bon endroit dans la page

Bonjour,

je m'explique :
j'ai un tableau qui se déplie avec des + et des - (AJAX va chercher les infos et Javascript insere grace au DOM).

Si j'ai beaucoup déplié mon tableau, j'ai la barre de scroll sur la droite, et dans ce cas là, à chaque fois que je déplie une partie de mon tableau, la page 'remonte', et je suis obligé de scroller pour revenir là où j'étais dans la page.

j'ai trouvé une parade : il faut que je mette un

Code:

return false;

apres ma fonction qui insere ma ligne.

Mais je ne comprends pas pourquoi ce fonctionnement.
Quelqu'un peut m'expliquer ?
merci

si tu insères du contenu dynamiquement il est normal que le scroll soit reinitialisé, il suffirait d'inclure un paramètre scrolltop dasn ta fonction
mais bon sans voir ton code ...

Bonjour,

Citation:

return false;

ça sert souvent à sortir d'une fonction ou à inhiber un lien.
A+

Ben voila mon code (je pensais que c'était un peu lourd à lire...)

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
 
/****************************/
//Ajout Fonction sur les tableaux : 
//retourne la position d'un élément passé en paramètre (quoi) 
/****************************/
Array.prototype.ArrayPos=function(quoi) {
  var Position=-1;
  for (i=0;this[i];i++) {
    if (quoi==this[i]) {
      Position=i;
    }
  }
  return Position;
}
 
 
/****************************/
//Fermeture d'un element DOM
/****************************/
$Close=function(Closing, id_conteneur) {  //sert à "fermer un objet créé auparavant" (Closing est un objet créé par document.createElement)
 
 
  var FluxPos=Flux.ArrayPos(Closing)  //position de Closing dans le tableau Flux
  var FluxLength=Flux.length; //longueur du tableau Flux
  var SpliceLength=FluxLength-FluxPos+1;  //longueur depuis le caractere Closing (exclu) jusqu'à la fin
  var AppendLot=Flux.splice(FluxPos+1,SpliceLength);  //sous-tableau de Flux depuis Closing (exclu) jusqu'à la fin
 
  for(l=0;AppendLot[0];l++) {
    Closing.appendChild(AppendLot.shift())  //on ajoute un à un les noeuds enfants à Closing (on dépile en commencant au début : shift)
  }
 
  if(Flux.length==1) {  //si il ne reste qu'un seul élément dans Flux, on le crée en tant que noeud enfant de Body
    //document.body.appendChild(Flux.pop());
 
    //si un id a été passé en parametre de la function $Close, on insere à la fin de cet element
    if (document.getElementById(id_conteneur))
      document.getElementById(id_conteneur).appendChild(Flux.pop());
    else  //sinon, on insere à la fin de la page
      document.body.appendChild(Flux.pop());
  }
}
 
/****************************/
//Fermeture d'un element DOM : insertion avant un noeud passé en parametre
/****************************/
$Close_before=function(Closing, noeud_dapres, id_conteneur) {  //sert à "fermer un objet créé auparavant" (Closing est un objet créé par document.createElement)
 
  //node_prop(noeud_dapres);
 
  var FluxPos=Flux.ArrayPos(Closing)  //position de Closing dans le tableau Flux
  var FluxLength=Flux.length; //longueur du tableau Flux
  var SpliceLength=FluxLength-FluxPos+1;  //longueur depuis le caractere Closing (exclu) jusqu'à la fin
  var AppendLot=Flux.splice(FluxPos+1,SpliceLength);  //sous-tableau de Flux depuis Closing (exclu) jusqu'à la fin
 
  for(l=0;AppendLot[0];l++) {
    Closing.appendChild(AppendLot.shift())  //on ajoute un à un les noeuds enfants à Closing (on dépile en commencant au début : shift)
  }
 
  if(Flux.length==1) {  //si il ne reste qu'un seul élément dans Flux, on le crée en tant que noeud enfant de Body
    //document.body.appendChild(Flux.pop());
 
    //on insere avant le noeud passé en param
    if (noeud_dapres) {
      //node_prop(noeud_dapres);
      noeud_dapres.parentNode.insertBefore(Flux.pop(),noeud_dapres);
    }
    else {
      if (document.getElementById(id_conteneur)) {
        //alert('insertion à la fin de l\'id ' + id_conteneur);
        document.getElementById(id_conteneur).appendChild(Flux.pop());
      }
      else {
        //alert('insertion à la fin de la page');
        document.body.appendChild(Flux.pop());
      }
    } 
  }
}
 
/****************************/
//Creation Element DOM 
//(on garde en mémoire, l'affichage se fait dans la fonction $Close)
/****************************/
var $C= function (HasH) { //fonction qui prend HasH en parametre
                          //HasH décrit un objet suivi de ses attributs
  var Elt='';
  var Special=false;
 
  //document.write("$C:" + HasH.toSource() + "<br />");
 
  switch(HasH['type']) {
    case('radio' ):
      Elt=(isIE)?'<input name="'+HasH['name']+'">':HasH['obj'];
      Special=(isIE)?true:false;    
      break;
    case('checkbox' ):
      Elt=(isIE)?'<input name="'+HasH['name']+'">':HasH['obj'];
      Special=(isIE)?true:false;    
      break;
    case('file' ): 
      Elt=(isIE)?'<input name="'+HasH['name']+'">':HasH['obj'];
      Special=(isIE)?true:false;    
      break;                             
    default:
      Elt=HasH['obj'];
      Special=(isIE)?true:false;
  }
 
  if(HasH['obj']=='label') {
    Elt=(isIE)?'<label for="'+HasH['htmlFor']+'">':HasH['obj'];
    Special=(isIE)?true:false;
  }
 
  if(HasH['obj']=='select') {
    Elt=(isIE)?('<select name="'+HasH['name']+'" '+((HasH['multiple']==1)?'multiple ':'')+' >'):HasH['obj'];
    Special=(isIE)?true:false;
  }
  if(HasH['obj']=='form') {
    Elt=(isIE)?('<form name="'+HasH['name']+' >'):HasH['obj'];
    Special=(isIE)?true:false;
  }
 
  //creation d'un element (objet) à partir de Elt défini ci-dessus selon l'entrée Hash
  var Obj=document.createElement(Elt);
 
  //Pour chaque objet (chaque ligne HasH), on définit les attributs (qui suivent l'objet dans HasH) 
  for (elt in HasH) {
    if (elt != 'obj'){  //on ne prend que les attributs (l'objet est deja créé)
      if(elt=='css') {
        for(Styl in HasH['css']) {
          Obj.style[Styl]=HasH['css'][Styl];
        }
      }
      else {
        if(isIE) {
          if(!Special || (elt!='name' && elt!='for' )) {  //on ne retraite pas les cas traités au début spécialement pour IE
            Obj[elt]=HasH[elt];
          }
        }            
        else {
          Obj[elt]=HasH[elt];
        }         
      }    
    }
  }
 
  Flux.push(Obj); //ajout de Obj à la fin de Flux
  return Obj; 
}
 
 
/****************************/
//Ma fonction particuliere : 
//ajoute/supprime des lignes dans mon tableau 
/****************************/
function montre_casse_fils(id_papa) {
  document.getElementById('tr_'+id_papa).className="tr_attend_ajax";
 
  if (tab_arbre[id_papa]) { //l'arbre fils existe (on l'a deja affiché une fois ou plus, puis caché) => il suffit de le montrer
    for (i=0;i<tab_arbre[id_papa].length;i++) {
      if (isIE)
        document.getElementById('tr_'+tab_arbre[id_papa][i]).style.display='block';
      else
        document.getElementById('tr_'+tab_arbre[id_papa][i]).style.display='table-row';
    }
    document.getElementById('tr_'+id_papa).className="tr_normal";
  }
  else {  //l'arbre fils n'existe pas, on le crée
    xhr=getxhr();
    xhr.onreadystatechange=function() {
      if(xhr.readyState == 4 && xhr.status == 200) {
        reponsexml = clean(xhr.responseXML.documentElement);
        tab_arbre[id_papa]=new Array();  //arbre de suivi
 
        //il nous faut la ligne d'apres
        if (document.getElementById('tr_'+id_papa)) {
          le_tr_dapres=get_nextsibling(document.getElementById('tr_'+id_papa)); //peut retourner null
        }
        else
          alert('Erreur : id tr_'+id_papa+' inconnu');
 
        //parcours des fils et creation de la chaine JSON
        lesfils=reponsexml.getElementsByTagName("fils");
 
        for (var i=0;i<lesfils.length;i++) {
          fam=getNodeValue(lesfils[i],'famille');
          id_fam=getNodeValue(lesfils[i],'id_famille');
          niveau=getNodeValue(lesfils[i],'niveau');
          nb_espace_deb=nb_niveaux-niveau;  //nb d'espace avant le '+' => nb de <td> vides au debut de la ligne
          nb_fils=getNodeValue(lesfils[i],'nb_fils');
          total=getNodeValue(lesfils[i],'total');
          pourc=getNodeValue(lesfils[i],'pourc');
 
 
          //enregistrement de l'arbre au fur et à mesure
          tab_arbre[id_papa][i]=id_fam;
 
 
          //<TR>
          var mytr=  $C({'obj':'tr',"name":"tr_"+id_fam, "id":"tr_"+id_fam }) ;
 
          //<TH>&nbsp;</TH> avant le + (décallages des lignes enfants)
          if (nb_espace_deb > 1) {
            if (niveau==1)
              $C({'obj':'th', "colSpan":nb_espace_deb, "className":"plus_moins", "innerHTML":"&nbsp;"});
            else
              $C({'obj':'th', "colSpan":nb_espace_deb, "className":"plus_moins", "innerHTML":"&nbsp;"});
          }
          else
            $C({'obj':'th', "innerHTML":"&nbsp;", "className":"plus_moins" });
 
          //<TH> + </TH>
          if (niveau>1 && nb_fils!=0) {
            var thplus=$C({'obj':'th',"id":"plus_moins_"+id_fam, "className":"plus_moins"});
            $C({"obj":"a","id":"lienplus_"+id_fam, "href":"#","innerHTML":"+","className":"lien_non_souligne","onclick":function () {return montre_casse_fils(this.id.replace('lienplus_',''));} });
            $Close(thplus);
          }
          else
            $C({'obj':'th', "innerHTML":"&nbsp;", "className":"plus_moins" });
 
          //<TH>"LA FAMILLE"</TH>  
          if (niveau > 1)
            $C({'obj':'th', "colSpan":niveau, "innerHTML":'&nbsp;'+fam, "className":"nom_fam"});
          else
            var myth=  $C({'obj':'th', "innerHTML":'&nbsp;'+fam, "className":"nom_fam"});
 
          //Total et Pourc
          $C({'obj':'td', "className":"total_fam", "innerHTML":total });
          $C({'obj':'td', "className":"pourc_fam", "innerHTML":pourc });
 
          //Valeur des 12 mois  
          lesmois=lesfils[i].getElementsByTagName("mois");
          for (var j=0;j<lesmois.length;j++) {
            if (j%2==1)
              $C({'obj':'td', "className":"td_cligno", "innerHTML":lesmois[j].firstChild.nodeValue, "className":"val_fam_paire" });
            else
              $C({'obj':'td', "className":"td_cligno", "innerHTML":lesmois[j].firstChild.nodeValue, "className":"val_fam_impaire" });
          }
 
          //</TR>
          $Close_before(mytr, le_tr_dapres, 'tbody_casse_rayon');
        }
 
      document.getElementById('tr_'+id_papa).className="tr_normal";
  		}
  		else if(xhr.readyState == 4)
  		  alert('Requete XHR KO : Erreur ' + xhr.status +' (' + xhr.statusText + ')');
    }
 
    //requete
    url="casse_fils.php?id="+id_papa+"&annee="+annee+"&mois="+mois;
    xhr.open("GET",url,true);
    xhr.send(null);
 
  }
 
  //il faut maintenant mettre un joli '-' sur le papa pour pouvoir replier l'arbre
  if (document.getElementById('lienplus_'+id_papa)) {
    document.getElementById('lienplus_'+id_papa).innerHTML='-';
 
    if (isIE)
      document.getElementById('lienplus_'+id_papa).onclick=function(){return cache_casse_fils(this.id.replace('lienplus_',''));};
    else
      document.getElementById('lienplus_'+id_papa).setAttribute("onclick","return cache_casse_fils("+id_papa+");");
  }
 
  return false;
}

SpaceFrog, tu reconnaitras certainement le code dont tu es à l'origine
je me suis tres largement inspiré de ce post

et voila le code HTML au départ :
(il y a une seule ligne dans le tableau au départ : la 'racine', avec un '+' pour descendre)

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
<table id="tab_casse_rayon" class="resu_palo">
  <thead> 
    <tr>
      <th colspan="9">&nbsp;</th>
      <th class="total_fam">TOTAL</th>
      <th class="pourc_fam">%</th>
      <th class="petit">AOUT 2009</th>  
      <th class="petit">JUIL 2009</th>  
      <th class="petit">JUIN 2009</th>  
      <th class="petit">MAI 2009</th>  
      <th class="petit">AVR 2009</th>  
      <th class="petit">MARS 2009</th>  
      <th class="petit">FEV 2009</th>  
      <th class="petit">JAN 2009</th>  
      <th class="petit">DEC 2008</th>  
      <th class="petit">NOV 2008</th>  
      <th class="petit">OCT 2008</th>  
      <th class="petit">SEPT 2008</th>
    </tr>
  </thead>
 
  <tbody id="tbody_casse_rayon">
    <tr id="tr_1">  
      <th id="plus_moins_1" class="plus_moins" >
        <a href="#" id="lienplus_1" class="lien_non_souligne" onclick="montre_casse_fils('1');">+</a>
      </th>  
      <th class="nom_fam" colspan="8">&nbsp;TOTAL GENERAL</th>  
      <td class="total_fam">337&nbsp;351</td>
      <td class="pourc_fam">-</td>
      <td class="val_fam_impaire">28&nbsp;703</td>
      <td class="val_fam_paire">20&nbsp;657</td>
      <td class="val_fam_impaire">22&nbsp;601</td>
      <td class="val_fam_paire">21&nbsp;286</td>
      <td class="val_fam_impaire">17&nbsp;058</td>
      <td class="val_fam_paire">17&nbsp;806</td>
      <td class="val_fam_impaire">24&nbsp;698</td>
      <td class="val_fam_paire">22&nbsp;356</td>
      <td class="val_fam_impaire">63&nbsp;324</td>
      <td class="val_fam_paire">23&nbsp;398</td>
      <td class="val_fam_impaire">20&nbsp;796</td>
      <td class="val_fam_paire">54&nbsp;667</td>
    </tr>
  </tbody>
 
</table>

Bon courage

Code:

<a href="#" id="lienplus_1" class="lien_non_souligne" onclick="montre_casse_fils('1');">+</a>

se comporte comme une ancre et le href="#" référencie le top de la page, d'ou le return false a la fin de ta méthode montre_casse_fils('1'); pour annihiler ce comportement

oui donc:

Code:

1
2
 
<a href="#" id="lienplus_1" class="lien_non_souligne" onclick="montre_casse_fils('1');return false">+</a>

oui, en fait c'est plutot

Code:

<a href="#" id="lienplus_1" class="lien_non_souligne" onclick="return montre_casse_fils('1');">+</a>

avec la fonction montre_casse_fils qui retourne toujours false.

Ca marche comme ca mais je voulais comprendre.

SpaceFrog, quand tu dis

Citation:

il suffirait d'inclure un paramètre scrolltop dasn ta fonction

ca donne quoi ?

merci

c'etait au cas ou tu rechargeais la page
mais a priori ce n'est pas le cas , il aurait fallu passer en paramètre l'etat du scroll pour le retablir lors du rechargement

et comme l'a dit chomy le # dans le href est considére comme une ancre et comme elle n'est pas nommée par defaut c'est le haut de page .
donc mettre href="#" revioent à mettre srcollTop=0

pour eviter que l'ancre soit prise en compte il faut inhiber le href
un return false dans le onclick empèche le href

merci à vous tous pour vos explications