Onclick : changer le contenu par une variable

Version imprimable

20/12/2013, 16h02
Anonyme1784

Onclick : changer le contenu par une variable

Salut,
j'ai essayé pas mal de choses, et les recherches n'aboutissent pas, je ne parviens pas à faire ce que je souhaite :cry:
Je pense que c'est facile pourtant :P

Je voudrais un bouton commandé en onclick par javascript qui permette au clique de changer la variable PHP qui affiche le contenu !
:)
J'ai fait un include d'une page contenant ne variable, cette variable contient le code de la page à un endroit donné. Lorsque je cliquerais sur le bouton, le contenu changerais instantanément grâce à un changement de variable !

Sauriez-vous comment faire SVP ? :calim2:
Merci :zoubi:
20/12/2013, 16h08
sekaijin

voyons voir le truc

tu fais une pas en php dans laquelle tu mets du code php

ce code est exécuté sur le serveur et créé du HTML et du Javascript

le code html et js est envoyé au client.

le navigateur interprète le HTML et créé un DOM
le navigateur parse le JS et attache les fonctions aux éléments du DOM

l'utilisateur clique sur un élément
le moteur javascript interprète le code sur le poste du client

et ô chose étonnante le serveur ne fait rien de la variable

ne pense tu pas qu'il y a quelque chose d'incohérent dans ta façon de faire ?

A+JYT
20/12/2013, 16h42
Anonyme1784

Ha oui c'est juste... :/ merci :lol:

Mais je peux faire un include de la page et l'afficher en javascript ? O.o je sais plus trop quoi faire là :aie:

Parce que c'est la page profile.php qui contient du php qui est intégrée dans l'index.php et s'affiche dedans. Après j'aimerais que quand les utilisateurs cliquent et bien il y ai seulement un chargement de la boite de droite ou gauche selon sur ce qu'ils ont cliqué...

Merci encore :roll:
20/12/2013, 19h00
Watilin

En admettant que ce soit possible, si tu peux modifier le code situé sur le serveur depuis un navigateur quelque part dans le monde, cela va affecter tous les visiteurs de ton site. Je pense que ce n'est pas ce que tu veux.

Tu as plusieurs pistes.

1. Ta page index.php est une single-page app, c'est-à-dire que les utilisateurs restent toujours dessus, et les actions qu'ils font sont pilotées par JavaScript, sans rechargement de pages. Les communications avec le serveur se font par XMLHttpRequest (Ajax).
Dans ce cas, tu dois récupérer le HTML généré par ton include avec une requête Ajax, et y injecter en JavaScript la variable dont nous parlons.
Avec cette solution 1, la variable est une variable JavaScript, donc côté client.

2. Ton site fonctionne de manière plus « classique » avec plusieurs pages qui communiquent entre eux par des liens ou des formulaires. Dans ce cas, une solution repose sur les variables de session. Là, c'est côté serveur que ça se passe. Tous tes scripts PHP devront commencer par session_start(); et tu utiliseras le tableau global $_SESSION. Ton bouton onclick enverra une requête au serveur (éventuellement un nouveau script PHP pour que les choses soient plus claires) pour changer notre variable.
Avec cette solution 2, la variable est PHP, elle existe côté serveur.

Comprendre le mur qui sépare les côtés serveur et client est, à mon avis, la chose la plus importante dans le développement Web. Ce n'est pas vraiment compliqué, mais il faut vraiment que tu domptes cette notion dans ta tête et que tu sois vraiment à l'aise avec elle, sinon ta consommation d'aspirine va grimper en flèche :P
20/12/2013, 19h47
Anonyme1784

Salut, la solution 1 me parait très bien !
tant que ça change le code manière fluide ^^ ça me va :p

mais ce serait possible ou pas que pendant le changement de variable, la div qui contient le contenu (O.o) pivote ? Que lon voit la div pivoter ou bien se fermer et se rouvrir avec le nouveau contenu ?! merci :)
22/12/2013, 11h11
Anonyme1784

TUTO

Vous connaissez des bons tuto pour la solution n°1 SVP ?

Merci
22/12/2013, 11h58
sekaijin

il y a une variante à la solution 1)
ton ta page index.php utilise un XMLHttpRequest pour envoyer les requête au serveur PHP qui ne retourne que des données et pas de HTML. c'est le javascript côté client qui crée le HTML nécessaire à l'affichage des donnée. ainsi le serveur n'a pas à générer de HTMl donc pas à savoir comment le client utilise les données. tu as alors complètement séparé la couche présentation de la couche service.

pour les tuto il suffit de chercher sur google il y en a pour toute les bourses.

A+JYT

Merci,
En fait j'ai fait autrement, avec des onglets simples display...
mais j'ai du rater quelque chose :(
Au départ le code fonctionne pour changer l'onglet de gauche, mais je me suis aperçu qu'il devait changer la boite de gauche, ET celle de droite, en même temps... Sauf que là ça ne marche plus...
Normalement il doit y avoir les "onglets" comme cela : :
à gauche : profile, messageri1, profile ; et à droite : recherche, messagerie2, options.
Le code est :

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
<?php
include 'profile.php';
include 'recherche.php';
include 'menu.php';
include 'options.php';
include 'messagerie1.php';
include 'messagerie2.php';
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<html>
<head>
<meta charset="UTF-8">
<title>Rencontres</title>
<link rel="stylesheet" type="text/css" href="index.css">
<script type="text/javascript">
function change_onglet(name)
{
document.getElementById('onglet_'+anc_onglet).className = 'onglet_0 onglet';
document.getElementById('onglet_'+name).className = 'onglet_1 onglet';
document.getElementById('contenu_onglet_'+anc_onglet).style.display = 'none';
document.getElementById('contenu_onglet_'+name).style.display = 'block';
anc_onglet = name;
}
function change_onglet2(2name)
{
document.getElementById('2onglet_'+2anc_onglet).className = 'onglet_0 onglet';
document.getElementById('2onglet_'+2name).className = 'onglet_1 onglet';
document.getElementById('2contenu_onglet_'+2anc_onglet).style.display = 'none';
document.getElementById('2contenu_onglet_'+2name).style.display = 'block';
2anc_onglet = 2name;
}
</script>
<style type="text/css">
.onglets
{
cursor:pointer;
border:0px solid black !important;
}
.onglet
{
display:block;
border:0px solid black !important;
cursor:pointer;
}
.contenu_onglet
{
  display:none;
  margin-top:0px;
  margin-left:-1px;
  float:left;
  width:40%;
  height:100%;
  border-radius:10px 0px 0px 10px !important;
  border:0px solid purple;
  overflow:hidden;
}
.contenu_onglets{
  border:0px solid yellow !important;
}
.onglet_0{
border:0px solid black !important;
}
.2contenu_onglet{
  display:none;
  float:right;
  width:40%;
  margin-top:0px;
  margin-right:0px;
  height:100%;
  border-radius:0px 10px 10px 0px;
  border:0px solid yellow !important;
  background-color:rgba(255,255,255,0.8);
  overflow:scroll;
}
</style>
</head>
<body id="body">
<div class="tete animid"><h1><img src="icons/logo.png"/></h1></div>
<div class="menu animid">
 
<span class="onglet_0 onglet" id="onglet_profile" onclick="javascript:change_onglet('profile');javascript:change_onglet2('options');"><img src="http://webfrag.tk/rencontre/icons/options.png" style="height:auto;width:30px;"/></span>
 
<span class="onglet_0 onglet" id="onglet_messagerie1" onclick="javascript:change_onglet('messagerie1');avascript:change_onglet2('messagerie2');"><img src="http://webfrag.tk/rencontre/icons/msg.png" style="height:auto;width:30px;"/></span>
 
<span class="onglet_0 onglet" id="onglet_profile" onclick="javascript:change_onglet('profile');javascript:change_onglet2('recherche');"><img src="http://webfrag.tk/rencontre/icons/home.png" style="height:auto;width:30px;"/></span>
 
</div>
 
<div class="contenu">
 
<div class="contenu_onglet animid" id="contenu_onglet_profile">
<?php
echo $profile;
?></div>
<div class="contenu_onglet animid" id="contenu_onglet_messagerie1">
<?php
echo $messagerie1;
?></div>
<div class="contenu_onglet animid" id="contenu_onglet_profile">
<?php
echo $profile;
?></div>
 
<script type="text/javascript">
var anc_onglet = 'profile';
change_onglet(anc_onglet);
</script>
 
<div class="centre animid">
<center><h2>Surprise !</h2><br><br></center>
</div>
 
<div class="2contenu_onglet animid" id="2contenu_onglet_recherche">
<?php
echo $recherche;
?></div>
<div class="2contenu_onglet animid" id="2contenu_onglet_messagerie2">
<?php
echo $messagerie2;
?></div>
<div class="2contenu_onglet animid" id="2contenu_onglet_options">
<?php
echo $options;
?></div>
 
<script type="text/javascript">
var 2anc_onglet = 'recherche';
change_onglet2(2anc_onglet);
</script>
 
</div>
<br>
<div class="pied"><center>Webfrag 2013-2014 - NE PAS UTILISER OU REPRODUIRE SANS NOTRE ACCORD SVP</center></div>
</body>
</html>

Vous auriez une idée svp ?
Je crois que le problème est au niveau des boutons <span>

Merci :)

23/12/2013, 13h00
sekaijin

merci de poster le html et non le php
A+JYT

Merci,
Ya même aps une dizaine de lignes en php...

Le code est :

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
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<html>
<head>
<meta charset="UTF-8">
<title>Rencontres</title>
<link rel="stylesheet" type="text/css" href="index.css">
<script type="text/javascript">
function change_onglet(name)
{
document.getElementById('onglet_'+anc_onglet).className = 'onglet_0 onglet';
document.getElementById('onglet_'+name).className = 'onglet_1 onglet';
document.getElementById('contenu_onglet_'+anc_onglet).style.display = 'none';
document.getElementById('contenu_onglet_'+name).style.display = 'block';
anc_onglet = name;
}
function change_onglet2(2name)
{
document.getElementById('2onglet_'+2anc_onglet).className = 'onglet_0 onglet';
document.getElementById('2onglet_'+2name).className = 'onglet_1 onglet';
document.getElementById('2contenu_onglet_'+2anc_onglet).style.display = 'none';
document.getElementById('2contenu_onglet_'+2name).style.display = 'block';
2anc_onglet = 2name;
}
</script>
<style type="text/css">
.onglets
{
cursor:pointer;
border:0px solid black !important;
}
.onglet
{
display:block;
border:0px solid black !important;
cursor:pointer;
}
.contenu_onglet
{
  display:none;
  margin-top:0px;
  margin-left:-1px;
  float:left;
  width:40%;
  height:100%;
  border-radius:10px 0px 0px 10px !important;
  border:0px solid purple;
  overflow:hidden;
}
.contenu_onglets{
  border:0px solid yellow !important;
}
.onglet_0{
border:0px solid black !important;
}
.2contenu_onglet{
  display:none;
  float:right;
  width:40%;
  margin-top:0px;
  margin-right:0px;
  height:100%;
  border-radius:0px 10px 10px 0px;
  border:0px solid yellow !important;
  background-color:rgba(255,255,255,0.8);
  overflow:scroll;
}
</style>
</head>
<body id="body">
<div class="tete animid"><h1><img src="icons/logo.png"/></h1></div>
<div class="menu animid">
 
<span class="onglet_0 onglet" id="onglet_profile" onclick="javascript:change_onglet('profile');javascript:change_onglet2('options');"><img src="http://webfrag.tk/rencontre/icons/options.png" style="height:auto;width:30px;"/></span>
 
<span class="onglet_0 onglet" id="onglet_messagerie1" onclick="javascript:change_onglet('messagerie1');avascript:change_onglet2('messagerie2');"><img src="http://webfrag.tk/rencontre/icons/msg.png" style="height:auto;width:30px;"/></span>
 
<span class="onglet_0 onglet" id="onglet_profile" onclick="javascript:change_onglet('profile');javascript:change_onglet2('recherche');"><img src="http://webfrag.tk/rencontre/icons/home.png" style="height:auto;width:30px;"/></span>
 
</div>
 
<div class="contenu">
 
<div class="contenu_onglet animid" id="contenu_onglet_profile">
PROFILE A GAUCHE</div>
<div class="contenu_onglet animid" id="contenu_onglet_messagerie1">
MESSAGERIE A GAUCHE</div>
<div class="contenu_onglet animid" id="contenu_onglet_profile">
PROFILE A GAUCHE</div>
 
<script type="text/javascript">
var anc_onglet = 'profile';
change_onglet(anc_onglet);
</script>
 
<div class="centre animid">
<center><h2>Surprise !</h2><br><br></center>
</div>
 
<div class="2contenu_onglet animid" id="2contenu_onglet_recherche">
RECHERCHE A DROITE</div>
<div class="2contenu_onglet animid" id="2contenu_onglet_messagerie2">
SECONDE MESSAGERIE, A DROITE</div>
<div class="2contenu_onglet animid" id="2contenu_onglet_options">
OPTIONS A DROITE</div>
 
<script type="text/javascript">
var 2anc_onglet = 'recherche';
change_onglet2(2anc_onglet);
</script>
</div>
</body>
</html>

Vous auriez une idée svp ?
Je crois que le problème est au niveau des boutons <span>

Merci :)

23/12/2013, 14h11
sekaijin

Re
on ne met pas "javascript:" dans onclick

je ne comprends pas à quoi servent les deux fonctions.

j'ai posté il y a longtemps un article qui illustrait un principe de dev au travers d'un système d'onglet.
http://ftp-developpez.com/zend-frame...ekaijin-js.pdf

A+JYT
23/12/2013, 15h50
Anonyme1784

Merci,
votre code parait assez compliqué.
Le mien permet donc je changer le display des div lorsque l'on clique sur les boutons entre <span> !

Mais je voudrais que 2 div changent en même temps... :roll:

Tenez un autre code encore plus simplifié, j'ai essayé autre chose, mais il doit y avoir un conflit... :cry:

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
<script type="text/javascript">
function change_onglet(name, name2)
{
document.getElementById('onglet_'+anc_onglet).className = 'onglet_0 onglet';
document.getElementById('onglet_'+name).className = 'onglet_1 onglet';
document.getElementById('contenu_onglet_'+anc_onglet).style.display = 'none';
document.getElementById('contenu_onglet_'+name).style.display = 'block';
anc_onglet = name;
document.getElementById('onglet_'+anc_onglet2).className = 'onglet_0 onglet';
document.getElementById('onglet_'+name2).className = 'onglet_1 onglet';
document.getElementById('contenu_onglet_'+anc_onglet2).style.display = 'none';
document.getElementById('contenu_onglet_'+name2).style.display = 'block';
anc_onglet2 = name2;
}
</script>
<style type="text/css">
.onglet
{
display:inline-block;
margin-left:3px;
margin-right:3px;
padding:3px;
border-bottom:0px solid black;
cursor:pointer;
}
.onglet_0
{
background:#bbbbbb;
border-bottom:0px solid black;
}
.onglet_1
{
background:#dddddd;
border-bottom:0px solid black;
padding-bottom:4px;
}
.contenu_onglet
{
background-color:#dddddd;
border-bottom:0px solid black;
margin-top:-1px;
padding:5px;
display:none;
float:left;
}
.2contenu_onglet
{
background-color:#dddddd;
border-bottom:0px solid black;
margin-top:-1px;
padding:5px;
display:none;
float:right;
}
</style>
 
-----
 
<div class="onglets">
<span class="onglet_0 onglet" id="onglet_profile" onclick="change_onglet('profile','recherche');">profile</span>
<span class="onglet_0 onglet" id="onglet_messagerie" onclick="change_onglet('messagerie','messagerie2');">messagerie</span>
<span class="onglet_0 onglet" id="onglet_profile" onclick="change_onglet('profile','options');">options</span>
</div>
<br>
<div class="contenu_onglet" id="contenu_onglet_profile">
ONGLET 1 proflie
</div>
<div class="contenu_onglet" id="contenu_onglet_messagerie">
ONGLET 2 messagerie
</div>
<div class="contenu_onglet" id="contenu_onglet_profile">
ONGLET 3 profile
</div>
<br>
<div class="2contenu_onglet" id="2contenu_onglet_recherche">
ONGLET 1 recherche
</div>
<div class="2contenu_onglet" id="2contenu_onglet_messagerie2">
ONGLET 2 messagerie2
</div>
<div class="2contenu_onglet" id="2contenu_onglet_options">
ONGLET 3 options
</div><br>
 
<script type="text/javascript">
var anc_onglet = 'profile';
change_onglet(anc_onglet);
 
var anc_onglet2 = 'recherche';
change_onglet(anc_onglet2);
</script>

à la fin de ta page tu as un script

Code:

1
2
3
4
5
var anc_onglet = 'profile';
change_onglet(anc_onglet);
 
var anc_onglet2 = 'recherche';
change_onglet(anc_onglet2);

or dans cette version la fonction change_onglet prends 2 params
je suppose que tu voulais faire

Code:

1
2
3
var anc_onglet = 'profile';
var anc_onglet2 = 'recherche';
change_onglet(anc_onglet, anc_onglet2);

mais même en faisant ça ça ne peux pas marcher
en effet à la ligne

Code:

document.getElementById('onglet_'+anc_onglet2).className = 'onglet_0 onglet';

lors du premier appel tu cherche onglet_recherche or cet element n'existe pas dans ta page.

Je te déconseille de mettre des script comme ça dans ta page. le mieux est de mettre les script js dans un fichier js et de les charger dans le head de ta page.

pour que ton script s'exécute lorsque tous les éléments de la page sont crées il suffit d'utiliser window.onloadje ne comprends toujours pas la raison de la présence des deux fonction même si tu a réuni le corps dans une seule.
seul div pour chaque onglet contenant ce que tu veux est largement sufisant.

je n'ai pas géré tes style car je n'ai pas la feuille
mais

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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <html>
        <head>
            <meta charset="UTF-8">
                <title>Rencontres</title>
                <link rel="stylesheet" type="text/css" href="index.css">
                    <script type="text/javascript">
                        function change_onglet(name, name2)
                        {
                            document.getElementById('onglet_'+anc_onglet).className = 'onglet_0 onglet';
                            document.getElementById('onglet_'+name).className = 'onglet_1 onglet';
                            document.getElementById('contenu_'+anc_onglet).style.display = 'none';
                            document.getElementById('contenu_'+name).style.display = 'block';
                            anc_onglet = name;
                        }
                    window.onload = function(e){
                        anc_onglet = 'profile';
                        change_onglet(anc_onglet);
                    }
                    </script>
                    <style type="text/css">
                        .onglet
                        {
                            display:inline-block;
                            margin-left:3px;
                            margin-right:3px;
                            padding:3px;
                            border-bottom:0px solid black;
                            cursor:pointer;
                        }
                    .onglet_0
                    {
                        background:#bbbbbb;
                        border-bottom:0px solid black;
                    }
                    .onglet_1
                    {
                        background:#dddddd;
                        border-bottom:0px solid black;
                        padding-bottom:4px;
                    }
                    .contenu_onglet
                    {
                        background-color:#dddddd;
                        border-bottom:0px solid black;
                        margin-top:-1px;
                        padding:5px;
                        display:none;
                        float:left;
                    }
                    .2contenu_onglet
                    {
                        background-color:#dddddd;
                        border-bottom:0px solid black;
                        margin-top:-1px;
                        padding:5px;
                        display:none;
                        float:right;
                    }
                    </style>
 
                    -----
 
                    <div class="onglets">
                        <span class="onglet_0 onglet" id="onglet_profile" onclick="change_onglet('profile');">profile</span>
                        <span class="onglet_0 onglet" id="onglet_messagerie" onclick="change_onglet('messagerie');">messagerie</span>
                        <span class="onglet_0 onglet" id="onglet_profile2" onclick="change_onglet('profile2');">options</span>
                    </div>
                    <br>
                    <div id="contenu_profile"  style="display:block">
                        <div>
                            ONGLET 1 proflie
                        </div>
                        <br>
                        <div>
                            ONGLET 1 recherche
                        </div>
                    </div>
 
                    <div id="contenu_messagerie" style="display:none">
                        <div>
                            ONGLET 2 messagerie
                        </div><br>
                        <div>
                            ONGLET 2 messagerie2
                        </div>
                    </div>
 
                    <div id="contenu_profile2" style="display:none">
                        <div>
                            ONGLET 3 profile
                        </div>
                        <br>
                        <div>
                            ONGLET 3 options
                        </div>
                    </div>
                    </body>
    </html>

le principal problème dans ton dev est la multiplication non maitrisé des ids tu as des ids partout sans règle de nommage claire du coup pour certains éléments le spam et les deux div on des ids similaire et pour d'autres non
deplus tu as deux élément avec le même id or il id est unique.

le simple fait de mettre les deux contenus dans un seul div te permets de l'afficher ou le cacher sans problème.

A+JYT

24/12/2013, 11h05
Auteur

Une remarque concernant le code posté en #10 :

Code:

<body id="body">

donner à un attribut id le nom d'une balise HTML n'est pas une bonne idée.