[POO] tabs onglet et chargement différé

Version imprimable

23/02/2009, 16h05
samtheh

[POO] tabs onglet et chargement différé

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.
23/02/2009, 16h11
le_chomeur

==> ajax :)

utiliser une méthode ajax pour ne charger que le contenu de l'onglet cliqué
23/02/2009, 16h29
samtheh

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.
23/02/2009, 18h55
le_chomeur

oui il ne s'agit que de javascript + html , la page que tu appels peut-être une simple page html voir un fichier texte
24/02/2009, 10h31
samtheh

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.
24/02/2009, 10h33
le_chomeur

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 :)

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

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:

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 ?

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

Dans la fonction alert_ajax

Code:

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:

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);
		}
	}
}

24/02/2009, 15h07
le_chomeur

essaye un alert(docXML) ;)
24/02/2009, 15h22
samtheh

cela m'affiche Object
24/02/2009, 15h45
le_chomeur

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 ?

Mon fichier XML ressemble à ca :

Code:

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>

24/02/2009, 17h13
le_chomeur

lol tu remontes ton menu ! il faut qu'au moment du click sur un menu tu charges la page souhaitée
24/02/2009, 17h38
samtheh

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 ! :)

ici tu remontes :
Code:

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

25/02/2009, 11h11
samtheh

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.
25/02/2009, 11h18
le_chomeur

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

tonobjet['menu'] ?
25/02/2009, 11h26
samtheh

Quel objet ? docXML ?

En essayant docXML['menu'] il ne me retourne : undefined.
25/02/2009, 11h27
le_chomeur

peux tu poster en ligne tout ce que tu as fait ? ou me faire parvenir un zip ?
25/02/2009, 12h55
samtheh

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 ?
25/02/2009, 13h03
le_chomeur

rien , je vais te faire un exemple concret a tout à l'heure :)
03/03/2009, 16h35
samtheh

désolé de remonter encore ce sujet mais je n'ai pas eu l'exemple promi....ou les réponses à mes questions/problèmes.

Merci de votre aide.
19/03/2009, 13h22
samtheh

re-up, re-désolé, mais je n'ai toujours aucune solution.....

Merci de vos aides.