Pagination erronée via javascript (onglets) suivant un lien

**Cr3a_Hal0** · 04/08/2010, 10h02

Bonjour tout le monde : )

Je suis tout nouveau sur ce forum, On m'en a longuement parlé, notamment dans l'édition Avancée de PHP 5.

Bref.

Suite au développement d'un de mes jeux basé en PHP, il s'avère que Javascript devait absolument devenir un support de ce jeu. En effet, similaire à des jeux de conquête, celui-là nécessite la construction de bâtiments.

La page de ces-dits bâtiments est composé d'onglets, "switchables" via javascript ( Je clique sur un onglet, le div associé voit son display modifié en block, les autre en none. Jusque là, aucun problème

Le problème est que lorsque je clique sur le lien "Construire ce bâtiment", la page se recharge, et je perds mon onglet ( 4 Onglets : Minier, Hangar, Militaire, Exp ; je lance un bâtiment dans Hangar, la page se recharge sur Minier ).

Voici le code, certes peu propre comme vous en jugerez sûrement, mais qui a réussi à faire tourner les onglets jusque-là :

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
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
 
 
function switch_tab(new_one)
{
	switch(new_one)
	{
 
		// Le script demande à changer pour l'onglet Production
		case 'production':
			attaque.style.display = 'none';
			scientifique.style.display = 'none';
			hangar.style.display = 'none';
			production.style.display = 'block';
			exp.style.display = 'none';
			break;
 
		// Le script demande à changer pour l'onglet Attaque
		case 'attaque':
			attaque.style.display = 'block';
			scientifique.style.display = 'none';
			hangar.style.display = 'none';
			production.style.display = 'none';
			exp.style.display = 'none';
			break;
 
		// Le script demande à changer pour l'onglet Scientifique
		case 'scientifique':
			attaque.style.display = 'none';
			scientifique.style.display = 'block';
			hangar.style.display = 'none';
			production.style.display = 'none';
			exp.style.display = 'none';			
			break;
 
		// Le script demande à changer pour l'onglet Hangar
		case 'hangar':
			attaque.style.display = 'none';
			scientifique.style.display = 'none';
			hangar.style.display = 'block';
			production.style.display = 'none';
			exp.style.display = 'none';			
			break;
 
		case 'exp':
			attaque.style.display = 'none';
			scientifique.style.display = 'none';
			hangar.style.display = 'none';
			production.style.display = 'none';
			exp.style.display = 'block';			
			break;
 
		// Le script demande à changer pour un onglet inconnu : on affiche Production
		default:
			attaque.style.display = 'none';
			scientifique.style.display = 'none';
			hangar.style.display = 'none';
			production.style.display = 'block';
			exp.style.display = 'none';
			break;
	}
}

Et, situé dans un template (header.tpl) :

Code :

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

<script language="javascript" type="text/javascript" src="./js/onglets.js"></script>

ainsi que

Code :

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

<body onLoad="switch_tab('production')">

Je sais bien qu'avec le code actuel, le problème du rechargement sur un onglet précis est dû à cette dernière ligne, mais je ne vois pas comment y remédier autrement, surtout car un seul onglet doit être visible au départ.

J'ai donc pensé à une alternative, plus "compliquée" mais également plus sympathique à l'usager : en effet, le lien donnant l'ordre de construction serait en javascript, via xmlhttp.open.

Les URI demandant un ordre de construction sont de la forme :

constructions.php?cmd=ajouter&building="id_du_batiment"

J'ai donc tenté le code suivant :

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
 
 
function AddBuild(str)
{
if (str=="")
  {
  document.getElementById("corps").innerHTML="";
  return;
  } 
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("corps").innerHTML=xmlhttp.responseText;
    }
  }
xmlhttp.open("GET","?cmd=ajouter&building="+str,true);
xmlhttp.send();
}

(Ce code est tiré d'un tutoriel pour des semblants de Jquery que j'ai adapté)

Avec des URL de la forme :

javascript: "AddBuild('id_du_batiment')";

Malheureusement, au lieu de renouveler mon cadre actuel (Il faut s'imaginer 3 colonnes : Une avec l'image du batiment, une autre avec les informations et la dernière avec le lien vers la construction ou un "-" pour signaler qu'on ne peut construire pour le moment, voire le temps restant pour le bâtiment en cours.

C'est donc en essayant ce code que je me suis aperçu qu'un doublon de page apparaissant, à environ 50 pixels sur la droite du précédent (du contenu).

Si vous pouviez me donner des pistes sur ce que vous pensez du 1er essai, puis de l'alternative, je vous en serais reconnaissant

Cordialement et encore Merci à ceux qui m'aideront.

Cordialement

Cr3a

**dukej** · 04/08/2010, 15h42

Dans un premier temps, si tu penses que le JS devrait être ajouté sur ton site, utilise une librairie, genre mootools et jquery, tu gagnera juste 2x plus de temps en développement et simplifieras énormément ton code.

**gael** · 04/08/2010, 20h30

Malheureusement, au lieu de renouveler mon cadre actuel (Il faut s'imaginer 3 colonnes : Une avec l'image du batiment, une autre avec les informations et la dernière avec le lien vers la construction ou un "-" pour signaler qu'on ne peut construire pour le moment, voire le temps restant pour le bâtiment en cours.

Erreur: Pas de proposition principale. Parenthèse non fermée

Code :

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

<body onLoad="switch_tab('production')">

le rôle de la fonction switch_tab est surement de donner le focus à l'onglet dont le nom est passé en argument.

Donc quand tu cliques sur ton lien, il faudrait lui indiquer quel onglet afficher. La solution standard est d'utiliser la partie hash de l'URL (ce qui est situé après le # ).

Il faut alors seulement changer l'appel de switch_tab par :

Code :

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

<body onLoad="switch_tab(window.location.hash.replace(/#/,'))">

en supposant que la fonction switch_tab gère bien le fait que l'argument soit une chaine vide (ie qu'il affiche le premier onglet)

**Cr3a_Hal0** · 06/08/2010, 23h16

Bonjour à vous

Merci de m'aider dans mon problème, ça donne chaud au coeur

Il est vrai que j'aurais pu éviter de m'embêter avec du code "maison" alors que de bons frameworks sont disponibles, mais je tenais à faire ma part des choses (déjà que Zend est utilisé).

Pour gael, j'ai essayé ton alternative, sans réel succès à l'arrivée.

J'ai finalement trouvé une solution, qui en plus plaît à mon bras droit : j'ai fabriqué ce petit code suivant :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
 
 
function afficher_menus(ele)    {
 
	if (document.getElementById(ele).style.display=='') {
		document.getElementById(ele).style.display='none';
	}else{
		document.getElementById(ele).style.display='';
	}
 
}

Elle affiche, "efface" les différentes parties et ce en laissant celles ouvertes et non fermées. De plus, dans les instructions, j'ai rajouté une variable _GET nommée playlist. Cette valeur est vérifiée à l'arrivée, comparée à des valeurs dans un tableau et exécutée si possibilité il y a.

De plus, une variable _GET nommée page est vérifiée constamment sur la page. Si elle existe, elle affecte les valeurs block ou none à un div.

Grâce à cela, je peux construire, détruire et annuler, sans changer d'onglet

Merci encore de votre aide et du temps passé à me répondre

Cordialement

Cr3a

Pagination erronée via javascript (onglets) suivant un lien

JavaScript

Discussions similaires

Partager

Partager