Alternative Ajax au include du php

**benjea06** · 31/03/2014, 19h11

Bonjour,

Tous est dans le titre...ou presque.
En effet, je cherchais une alternative au include du php.
Ajax semble être une solution recommandée.

Je m'y suis donc mis modestement et j'ai trouvé ce code.
Il fait l'affaire à un détails prêt, j'aimerais que la page se charge seule sans bouton on clicck...
Quelqu'un pourrait il me dire comment faire svp?

Premiere page appellée header.html

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
<!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" xml:lang="en">
 
<head>
 
 
 
</head>
 
<body>
 
entete

deuxième page appellée: footer.html:

Code :

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

1
2
3
4
5
 
pied de page
 
</body>
</html>

Code html:

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
 
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("#div1").load("header.html");
    $("#div2").load("footer.html");
  });
});
</script>
</head>
<body>
 
<div id="div1"></div>
<button>Get External Content</button>
corps
<div id="div2"></div>
</body>
</html>

Et accessoirement, j'aimerais savoir si le code est correcte?

**benjea06** · 31/03/2014, 19h27

J'ai supprimé tout simplement le clic et ca fonctionne.
Quelqu'un pourrait-il me valider ce code svp?

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
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $(function(){
    $("#div1").load("header.html");
    $("#div2").load("footer.html");
  });
});
</script>
</head>
<body>
 
<div id="div1"></div>
corps
<div id="div2"></div>
</body>
</html>

Edit:
Avec une nuance quand même, je ne peux intégrer la balise BODY dans le ficher appelé... C'est bien cela?
Je ne peux en conclusion appelé un entete qu'à partir du moment où il commence après le

Code :

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

</head>

**benjea06** · 01/04/2014, 19h50

Rebonjour,

Je rencontre un petit problème avec mon code.
Tant que les pages appelées contiennent juste du texte, il s'affiche correctement.
En revanche, quand j'appelle un fichier avec des div ca ne respecte plus systématiquement le css.
A noter que les div s'ouvrent dans un fichier et se ferment dans l'autre.
A noter également que, lorsque je mets du texte dans header1.html il apparait dans le cadre css appelé.
Ce n'est plus le cas quand je mets du texte dans footer.html, il apparait mais pas dans le cadre ccs alors qu'il se trouve entre les mêmes balises...

HTML:

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
 
<!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" xml:lang="en">
 
<head>
<link rel="stylesheet" type="text/css" href="../style/style.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $(function(){
    $("#div1").load("header1.html");
    $("#div2").load("header2.html");
    $("#div3").load("footer.html");
  });
});
</script>
</head>
 
<body marginwidth="0">
 
 
<div id="div1"></div>
 
 
titre
 
 
<div id="div2"></div>
 
 
<div id="div3"></div>
 
 
 
 
</body>
</html>

HEADER1.HTML:

Code :

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

1
2
3
4
 
<div id="menug">
	<div id="contener">
		<div id="margin-menu">

FOOTER.HTML:

Code :

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

1
2
3
4
5
 
		footer
		</div>
	</div>
</div>

Pour information header2.html est vide pour le moment...

CSS:

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
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
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
 
A { 
color:#457DBB; 
text-decoration:none; 
}
 
A:hover { 
color:#457DBB; 
text-decoration:underline; 
}
 
A:visited { color:#457DBB;text-decoration:none;}
 
 
#cadre_titre {
width:450px;
margin-left:78px;
padding:10px;
background-color:#E8F0F9;
border-left:0px solid #000000; /* couleur du cadre */
border-right:0px solid #000000;
border-bottom:0px solid #000000;
border-top:0	px solid #000000;
color : #457DBB;
font-family:calibri, sans-serif;
font-size: 25px;
  box-shadow: 4px 4px 12px #E1E2E2;
float:left;
border:0px solid red;
}
 
#cadre_icones {
position: fixed;
width:220px;
margin-left:800px;
padding:10px;
border-left:0px solid #000000; /* couleur du cadre */
border-right:0px solid #000000;
border-bottom:0px solid #000000;
border-top:0px solid #000000;
color : #457DBB;
font-family:calibri, sans-serif;
font-size: 25px;
float:right;
border:0px solid green;
 }
 
#cadre_resume {
width:800px;
margin-left:78px;
padding:10px;
background-color:#E8F0F9;
border-left:0px solid #000000; /* couleur du cadre */
border-right:0px solid #000000;
border-bottom:0px solid #000000;
border-top:0	px solid #000000;
color : #457DBB;
font-family:calibri, sans-serif;
border:0px solid pink;
}
 
 
#cadre_chapitre {
width:250px;
height:20px;
margin-left:78px;
padding:10px;
background-color:#E8F0F9;
border-left:0px solid #000000; /* couleur du cadre */
border-right:0px solid #000000;
border-bottom:0px solid #000000;
border-top:0	px solid #000000;
color : #457DBB;
font-family:calibri, sans-serif;
font-size: 15px;
font-weight: bold;
border:0px solid brown;
}
 
 
.paragraphe
{
margin-left:78px;
font-family:calibri, sans-serif;
margin-left:78px;
border:0px solid black;
}
 
 
 
#contener{
    height:100%;
    margin:auto;
    border:0px solid yellow;
}
 
#menug{
    float:left;
    width:168px;
    height:100%;
    background-image:url('../images/fondgauche.png');
    background-repeat: no-repeat;
    position: fixed;
    border:0px solid purple;
}
 
#droite{
    width:1200px;
    height:100%;
    margin-left:120px;
    border: 0px solid red;
}
 
#bas_page {
width:1200px;
height:5px;
margin-left:78px;
padding-bottom:7px;
padding: 30px;
background-color:#E8F0F9;
color : #457DBB;
font-family:calibri, sans-serif;
font-size: 15px;
font-weight: bold;
border:0px solid brown;
}
 
#margin-menu{
margin-left:20px;
font-family:calibri, sans-serif;
text-decoration:none;  
border:0px solid grey;
} 
 
#decalage10{
    margin-left:10px;
    font-weight: normal;
}
 
#decalage20{
    margin-left:20px;
}
 
#decalage80{
    margin-left:80px;
}
 
 
#début_page{
    margin-left:50px;
}
 
.border_iframe{
    border: 0px solid #E8F0F9;
    width: 850px;
    box-shadow: 4px 4px 4px #BBD2E1;
    padding-left:10px;
    background-color:#FFFACD;
}
 
 
 
a.info{
position: absolute;
z-index:24;
color : #457DBB;
font-family:calibri, sans-serif;
text-decoration:none
}
 
a.info:hover{
z-index:25;
background-color:#FFF;
}
 
a.info span{
display: none
}
 
a.info:hover span{
display:block;
position:absolute;
	top: 2.2em;
	left: -2em;
	width:15em;
 
border: 1px solid #1560BD;
background-image:url('../images/bulle.png');
background-repeat:repeat-x;
border-radius: 7px;
box-shadow: 4px 4px 4px 4px #E8E8E8;
color:#1560BD;
font-weight: bold;
text-align: justify;
texte-valign: center;
padding-top:5px;
padding-left: 5px;
padding-right:5px;
height:50px;
width: 340px;
}
 
 
 
a.bulle_iframe{
position: absolute;
z-index:24;
color : #457DBB;
font-family:calibri, sans-serif;
text-decoration:none
}
 
a.bulle_iframe:hover{
z-index:25;
background-color:#FFF;
}
 
a.bulle_iframe span{
display: none
}
 
a.bulle_iframe:hover span{
display:block;
position:absolute;
	top: 2.2em;
	left: -2em;
	width:15em;
 
border: 0px solid #1560BD;
border-radius: 7px;
box-shadow: 4px 4px 4px 4px #E8E8E8;
color:#1560BD;
font-weight: bold;
text-align: justify;
texte-valign: center;
padding-top:5px;
padding-left: 5px;
padding-right:5px;
height:50px;
width: 340px;
}

**Dokho1000** · 23/01/2015, 15h25

Si tu veux faire ca, j'irai voir comment fonction la librairie requirejs...

**Arno_94** · 14/04/2015, 11h25

Salut,

Je comprends bien ce que tu veux faire mais je ne suis pas convaincu par tes CSS. Le fait que des balises soient ouvertes dans un fichier pour être fermées dans l'autre est possiblement la raison pour laquelle les styles ne sont pas appliqués.

Ce serait plus logique et propre d'avoir un truc du genre

Code :

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

1
2
3
4
 
<div id='header'></div>
<div id='contenu'></div>
<div id='footer'></div>

Cela dit, je n'ai pas fait le test concernant les balises fermantes mais je vois que aussi que tes appels ne sont pas chainés.

Tu aurais peut-être (j'ai bien dit peut-être) de meilleurs résultats avec un truc du genre :

Code :

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

1
2
3
4
5
6
 
$(document).ready(function(){
  $("button").click(function(){
    $("#div1").load("header.html", function(){ $("#div2").load("footer.html"); });
  });
});

Ici, ce n'est qu'une fois le chargement du div1 terminé qu'on charge le div2.

Bon courage

Alternative Ajax au include du php

ASP.NET Ajax

Discussions similaires

Partager

Partager