Pagination erronée via javascript (onglets) suivant un lien
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:
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:
<script language="javascript" type="text/javascript" src="./js/onglets.js"></script>
ainsi que
Code:
<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:
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 :
Citation:
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
