[POO] tabs onglet et chargement différé

**samtheh** · 23/02/2009, 16h05

Bonjour à tous,

J'ai une page HTML avec des sections <div></div> qui correspondent à des tabs. Ces tabs sont gérés par du javascript et les bonnes fonctions pour gerer la selection des onglets, l'initialisation, l'onglet précédement cliqué, .... Tout fonctionne bien il n'y a aucun soucis.

Je me pose une question maintenant c'est que vu que tout le contenu est sur une seule page, le chargement peut être relativement lourd. Comment differer le chargement de chacun des onglets afin de limiter le temps total de chargement au départ ?

Merci de vos réponses.

**le_chomeur** · 23/02/2009, 16h11

==> ajax

utiliser une méthode ajax pour ne charger que le contenu de l'onglet cliqué

**samtheh** · 23/02/2009, 16h29

Est ce que l'ajax fonctionne sur une page HTML simple ? Sans serveur web....
La page est executée sur un serveur, mais un serveur de partage et non un serveur web.

**le_chomeur** · 23/02/2009, 18h55

oui il ne s'agit que de javascript + html , la page que tu appels peut-être une simple page html voir un fichier texte

**samtheh** · 24/02/2009, 10h31

Puis je utiliser pour cela la "bibliothèque" Window Js (http://prototype-window.xilinus.com/) ?

Comment faire ? Ce que je voudrais c'est charger des contenus au moment du clique sur l'onglet et uniquement à ce moment là. Je ne veux pas que l'onglet soit chargé dès l'ouverture de la page. Je ne sais pas trop comment aborder cette partie.

Merci de votre aide.

**le_chomeur** · 24/02/2009, 10h33

avant de rentrer dans le vif du sujet je te conseil d'aller lire ce tutorial :
http://gael-donat.developpez.com/web/intro-ajax/

qui t'expliqueras les rudiments et le fonctionnement d'ajax ( les exemples sont en php mais le principe est EXACTEMENT le même

**samtheh** · 24/02/2009, 13h45

Je connais déjà pas mal ce tuto, je vois bien un fichier xml du genre :

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
 
<menu>
     <onglet>
            <name>onglet1</name>
            <url>url_de_la_page_1</url>
     </onglet>
     <onglet>
            <name>onglet2</name>
            <url>url_de_la_page_2</url>
     </onglet>
     <onglet>
            <name>onglet3</name>
            <url>url_de_la_page_3</url>
     </onglet>
</menu>

Mais mon problème c'est que pour le moment j'ai une page html qui est structurée à peu près comme ceci :

Code :

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

1
2
3
4
5
6
 
<table><tr><td>titre onglet 1</td><td>titre onglet 2</td><td>titre onglet 3</td></tr></table>
 
<div>contenu onglet 1</div>
<div>contenu onglet 2</div>
<div>contenu onglet 3</div>

Est ce que si je sépare les contenus dans des pages différentes, que je créé mon fichier xml comme précédement, comment puis je gerer le fait que mes onglets soient cliquable, qu'ils chargent le contenu uniquement au moment du clique et que l'aspect onglet soit toujours présent ?

**samtheh** · 24/02/2009, 15h05

Surtout qu'avec le code du tuto j'obtiens les résultats suivants :

Dans la fonction alert_ajax

Code :

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

1
2
 
alert ("status=" + xhr.readyState + " 2 = " +xhr.status)

J'obtiens 4 et 0 toujours. En fait il n'arrive pas à réccuperer mon fichier xml j'ai l'impression.

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
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
 
unction ajax(nb_onglet)
{
    var xhr=null;
 
    if (window.XMLHttpRequest) { 
        xhr = new XMLHttpRequest();
    }
    else if (window.ActiveXObject) 
    {
        xhr = new ActiveXObject("Microsoft.XMLHTTP");
    }
    //on définit l'appel de la fonction au retour serveur
    xhr.onreadystatechange = function() { alert_ajax(xhr, nb_onglet); };
 
    //on appelle le fichier reponse.txt
    xhr.open("GET", "config.xml", true);
    xhr.send(null);
}
 
function alert_ajax(xhr, nb_onglet)
{
	var docXML= xhr.responseXML;
	var items = docXML.getElementsByTagName("onglet")
	//on fait juste une boucle sur chaque élément "onglet" trouvé
	alert ("onglet=" + nb_onglet+" nb xml = " + items.length)
	alert ("status=" + xhr.readyState + " 2 = " +xhr.status)
	for (i=0;i<items.length;i++)
	{
		alert("i = "+i)
		if (nb_onglet == (i-1))
		{
			var childs = items.item(i).childnodes;
			document.getElementById("onglet_"+nb_onglet).innerHTML = childs.item(2).nodevalue;	               
			alert (childs.item(2).nodevalue);
		}
	}
}

**le_chomeur** · 24/02/2009, 15h07

essaye un alert(docXML)

**samtheh** · 24/02/2009, 15h22

cela m'affiche Object

**le_chomeur** · 24/02/2009, 15h45

tu récupères donc un objet xml qu'il te reste a parcourir pour récupérer les donnée que tu souhaites a quoi ressemble ton xml ?

**samtheh** · 24/02/2009, 16h34

Mon fichier XML ressemble à ca :

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
<?xml version="1.0"?>
 
<menu>
     <onglet>
            <name>Ma page</name>
            <url>pages/mapage.html</url>
     </onglet>
     <onglet>
            <name>Dernières créations</name>
            <url>pages/dernierescreations.html</url>
     </onglet>
     <onglet>
            <name>Mises à jour</name>
            <url>pages/misesajour.html</url>
     </onglet>
</menu>

**le_chomeur** · 24/02/2009, 17h13

lol tu remontes ton menu ! il faut qu'au moment du click sur un menu tu charges la page souhaitée

**samtheh** · 24/02/2009, 17h38

Excusez moi mais je n'ai pas compris la réponse ? Je ne l'a trouve pas très explicite.....merci de m'aider à la compréhension de celle-ci !

**le_chomeur** · 25/02/2009, 10h45

ici tu remontes :

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
 
<?xml version="1.0"?>
 
<menu>
     <onglet>
            <name>Ma page</name>
            <url>pages/mapage.html</url>
     </onglet>
     <onglet>
            <name>Dernières créations</name>
            <url>pages/dernierescreations.html</url>
     </onglet>
     <onglet>
            <name>Mises à jour</name>
            <url>pages/misesajour.html</url>
     </onglet>
</menu>

donc ton menu ?

il faut que tu aille récupérer le contenu de l'onglet que tu souhaites afficher au moment du click sur le lien de l'onglet corespondant.

a chaque onglet corespondra un fichier différent

**samtheh** · 25/02/2009, 11h11

N'est ce pas ce que je fais dans ma boucle for de ma fonction alert_ajax présentée plus haut ? Et de manière global dans cette fonction ?

Le problème c'est qu'il ne trouve aucun éléments dans mon XML. Donc je me dis qu'il ne trouve pas le fichier. que le chemin est mauvais. Mais je ne comprend toujours pas.

**le_chomeur** · 25/02/2009, 11h18

il te trouve bien un objet , mais de type xml fait un alert :

tonobjet['menu'] ?

**samtheh** · 25/02/2009, 11h26

Quel objet ? docXML ?

En essayant docXML['menu'] il ne me retourne : undefined.

**le_chomeur** · 25/02/2009, 11h27

peux tu poster en ligne tout ce que tu as fait ? ou me faire parvenir un zip ?

**samtheh** · 25/02/2009, 12h55

Tout ce que j'ai fait est déjà dans les posts.

La partie Ajax est complète. La partie XML est complète.
La partie HTML n'est pas complète mais ne nécessite pas plus à mon avis ?

Que souhaites tu de plus ?

[POO] tabs onglet et chargement différé

JavaScript

Discussions similaires

Partager

Partager