jquery et php

**69Pierre** · 29/09/2015, 15h59

Je n'y arrive pas.
Pas d"erreur dans firebug mais mes script de type

Code :

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

<script type="text/javascript"> console.log('Dom est prêt!');	</script>

ne fonctionnent pas et mes fichiers js appelés aprés la méthode critique innerHTML remplacée par la tienne, ne sont pas chargés.

**01001111** · 29/09/2015, 16h11

une erreur dans la console?

ce que je t'ai fourni fonctionne je viens de le vérifier:
test1.html

Code html :

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
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
<html>
<head>
</head>
<body>
	<form id="formulaire">
	</form>
</body>
<script type="text/javascript">
var ajax=function(obj) {
        if (!("type" in obj)) {
                obj.type="GET";
        } else {
                obj.type=obj.type.toUpperCase();
        }
        if (!("data" in obj)) {
                obj.data=null;
        } else {
                var str="";
                var count=0;
                for (var prop in obj.data) {
                        str+=((count>0)?"&":"")+prop+"="+encodeURIComponent(obj.data[prop]);
                        count++;
                }
                obj.data=str;
        }
        if (!("onsuccess" in obj)) {
                obj.onsuccess=null;
        }
        if (!("onfail" in obj)) {
                obj.onfail=null;
        }
        if (!("addparams" in obj)) {
                obj.addparams=[];
        }
        if (("url" in obj)) {
                var xhr = null;
                if (window.XMLHttpRequest || window.ActiveXObject) {
                        if (window.ActiveXObject) {
                                try {
                                        xhr = new ActiveXObject("Msxml2.XMLHTTP");
                                } catch(e) {
                                        xhr = new ActiveXObject("Microsoft.XMLHTTP");
                                }
                        } else {
                                xhr = new XMLHttpRequest(); 
                        }
                }
                if (xhr) {
                        xhr.onreadystatechange = function() {
                                if (xhr.readyState == 4) {
                                        (xhr.status == 200)
                                        ?
                                                (function () {
                                                        if (obj.onsuccess!=null) {
                                                                var d=xhr.responseText;
                                                                obj.addparams.d=d;
                                                                obj.onsuccess.call(this, obj.addparams);
                                                        }
                                                })()
                                        :
                                                (function () {
                                                        if (obj.onfail!=null) {
                                                                var d=xhr.statusText;
                                                                obj.addparams.d=d;
                                                                obj.onfail.call(this, obj.addparams);
                                                        }
                                                })()
                                        ;
                                }
                        };
                }
                xhr.open(obj.type, obj.url, true);
                if (obj.type=="POST") {
                        xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
                }
                xhr.send(obj.data);
        }
};
var isArray=function(obj) {
        if (Object.prototype.toString.call(obj) === '[object Array]') {
                return true;
        } else {
                return false;
        }
};
var getPropertiesContainingValues=function(obj, propLevel) {
        var props=[];
        var objCopy=obj;
        if (isArray(propLevel)) {
                for (var i=0; i<propLevel.length; i++) {
                        obj=obj[propLevel[i]];
                }
        } else {
                propLevel=[];
        }
        for (var prop in obj) {
                if (typeof(obj[prop])=="object") {
                        var arg;
                        if (propLevel===null) {
                                arg=[prop];
                        } else {
                                arg=propLevel;
                                arg.push(prop);
                        }
                        props=props.concat(__.getPropertiesContainingValues(objCopy, arg));
                } else {
                        props.push(propLevel.concat([prop]));
                }
        }
        return props;
};
var setPropertyValueDeep=function(v, target, properties) {
        if (properties.length>1) {
                var t=target[properties[0]];
                for (var i=1; i<properties.length; i++) {
                        if (i!==properties.length-1) {
                                t=t[properties[i]];
                        } else {
                                t[properties[i]]=v;
                        }
                }
                target[t]=t;
        } else {
                target[properties[0]]=v;
        }
};
var createNode=function(type, params, iHTML, elms, NS, NSparam) {
        var res=[];
        for (var i=0; i<elms.length; i++) {
                var elm;
                if (typeof(NS)=="undefined") {
                        elm=document.createElement(type);
                } else if (typeof(NS)=="string") {
                        elm=document.createElementNS(NS, type);
                }
                if (!(type=="style" && window.navigator.userAgent.toString().match(/trident/i))) {
                        for (var param in params) {
                                if (type.match(/svg|g|path|rect|circle|ellipse|line|polyline|polygon/i) && param.match(/class|className/i)) {
                                        elm.className.baseVal=params[param];
                                } else if (param.match(/class|className/i) && window.navigator.userAgent.toString().match(/trident/i)) {
                                        var p="class";
                                        elm.setAttribute(p.toString(), params[param]);
                                } else if (param.match(/class|className/i) && !window.navigator.userAgent.toString().match(/trident/i)) {
                                        var p="class";
                                        if (typeof(params[param])!="undefined") {
                                                if (elm.setProperty) {
                                                        elm.setProperty(p.toString(), params[param], null);
                                                } else if (elm.setPropertyString) {
                                                        elm.setPropertyString(p.toString(), params[param]);
                                                } else if (elm.setAttribute) {
                                                        elm.setAttribute(p.toString(), params[param]);
                                                }
                                        }
                                } else {
                                        if (typeof(param)!="undefined" && typeof(params[param])!="object" && typeof(params[param])!="undefined") {
                                                if (elm.setProperty) {
                                                        elm.setProperty(param.toString(), params[param], null);
                                                } else if (elm.setPropertyString) {
                                                        elm.setPropertyString(param.toString(), params[param]);
                                                } else if (elm.setAttribute) {
                                                        elm.setAttribute(param.toString(), params[param]);
                                                }
                                        } else if (typeof(param)!="undefined" && typeof(params[param])=="object") {
                                                var props=__.getPropertiesContainingValues(params[param], null);
                                                for (var a=0; a<props.length; a++) {
                                                        var v=params[param];
                                                        for (b=0; b<props[a].length; b++) {
                                                                v=v[props[a][b]];
                                                        }
                                                        setPropertyValueDeep(v, elm, [param].concat(props[a]));
                                                }
                                        }
                                }
                        }
                }
                if (typeof(NSparam)=="object") {
                        if (elm.setAttributeNS) {
                                elm.setAttributeNS(NSparam.ns, NSparam.name, NSparam.value);
                        }
                }
                elms[i].appendChild(elm);
                res.push(elm);
                if (iHTML!==null && iHTML!=="") {
                        if (type=="style" && window.navigator.userAgent.toString().match(/trident/i)) {
                                var rCss=/([^\{]+)\{([^\}]+)\}/m;
                                if (document.styleSheets.length===0) {
                                        var styleSheet = document.createElement('style');
                                        document.documentElement.firstChild.appendChild(styleSheet);
                                }
                                while (iHTML.match(rCss)) {
                                        var obj=rCss.exec(iHTML);
                                        var full=obj[0];
                                        var selector=obj[1].split(/\s/).join(" ");
                                        var rule=obj[2].split(/\s/).join(" ");
                                        iHTML=iHTML.replace(full, "");
                                        if (!document.styleSheets[0]) {
                                                document.createStyleSheet();
                                        }
                                        if (!document.styleSheets[document.styleSheets.length-1].cssText.match(RegExp(selector, "i"))) {
                                                rule=document.styleSheets[document.styleSheets.length-1].addRule(selector, rule, -1);
                                        }
                                }
                        } else if (type=="script") {
                                elm.text=iHTML;
                        } else {
                                elm.innerHTML=iHTML;
                        }
                }
        }
        return res;
};
var separateHtmlJsCss=function(str) {
        var regStartJs=/^<script[^>]*>/gi;
        var regEndJs=/^<\/script>/gi;
        var regStartCss=/^<style[^>]*>/gi;
        var regEndCss=/^<\/style>/gi;
        var i=0;
        var js=false;
        var jsStartExec;
        var jsEndExec;
        var css=false;
        var cssStartExec;
        var cssEndExec;
        var actualQuote="";
        var regExp=false;
        var regExpExec;
        var l=0;
        var indexes=[];
        var ex, externalJs={ src:[], onload:[] }, externalCss={ href:[], media:[] };
        while ((ex=/<script (?:(?:type="text\/javascript" ?)|(?:src="(?:.+)" ?))+>\s*<\/script>/i.exec(str))!==null) {
                if (/src="([^"]+)" ?/i.test(ex[0])) {
                        externalJs.src.push(/src="(.+)" ?/i.exec(ex[0])[1]);
                        if (/onload="([^"]+)" ?/i.test(ex[0])) {
                                externalJs.onload[externalJs.src.length-1]=/src="(.+)" ?/i.exec(ex[0])[1];
                        }
                }
                str=str.substr(0, ex.index)+str.substr(ex.index+ex[0].length);
        }
        while ((ex=/<link (?:(?:rel="stylesheet" ?)|(?:type="text\/css" ?)|(?:media="(?:[^"]+)" ?)|(?:href="(?:.+)" ?))+\/>/i.exec(str))!==null) {
                if (/href="([^"]+)" ?/i.test(ex[0])) {
                        externalCss.href.push(/href="([^"]+)" ?/i.exec(ex[0])[1]);
                        externalCss.media.push(/media="([^"]+)" ?/i.exec(ex[0])[1]);
                }
                str=str.substr(0, ex.index)+str.substr(ex.index+ex[0].length);
        }
        while (i<str.length) {
                if (js && (str.substr(i,1)=="'" || str.substr(i,1)=='"') && actualQuote=="") {
                        actualQuote=str.substr(i,1);
                } else if (js && str.substr(i,1)==actualQuote) {
                        actualQuote="";
                } else if (js && actualQuote=="" && str.substr(i,1)=="/" && !regExp) {
                        regExpExec=/\/(.*)\/[g|i|m]*/gi.exec(str.substr(i));
                        if (regExpExec!=null) {
                                spaceExec=/\s/.exec(str.substr(i+regExpExec[0].length));
                                l=(spaceExec!=null)?spaceExec[0].length:0;
                                if (/[\.|,|;|\)|\|!|]]/.test(str.substr(i+regExpExec[0].length+l),1)) {
                                        regExp=true;
                                        l=i+regExpExec[0].length+l;
                                }
                        }
                } else if (js && actualQuote=="" && str.substr(i,1)=="/" && regExp && i==l) {
                        regExp=false;
                        l=0;
                }
                jsStartExec=regStartJs.exec(str.substr(i));
                jsEndExec=regEndJs.exec(str.substr(i));
                cssStartExec=regStartCss.exec(str.substr(i));
                cssEndExec=regEndCss.exec(str.substr(i));
                if (!js && jsStartExec!=null && actualQuote=="" && !regExp) {
                        indexes.push(["js",[i,i+jsStartExec[0].length],null]);
                        js=true;
                } else if (js && jsEndExec!=null && actualQuote=="" && !regExp) {
                        indexes[indexes.length-1][2]=[i,i+jsEndExec[0].length];
                        js=false;
                } else if (!css && cssStartExec!=null && actualQuote=="" && !regExp) {
                        indexes.push(["css",[i,i+cssStartExec[0].length],null]);
                        css=true;
                } else if (css && cssEndExec!=null && actualQuote=="" && !regExp) {
                        indexes[indexes.length-1][2]=[i,i+cssEndExec[0].length];
                        css=false;
                }
                i++;
        }
        js=[];
        css=[];
        var offset=0;
        for (i=0; i<indexes.length; i++) {
                if (indexes[i][0]=="js") {
                        js.push(str.substr(indexes[i][1][1]+offset,indexes[i][2][0]-indexes[i][1][1]));
                } else if (indexes[i][0]=="css") {
                        css.push(str.substr(indexes[i][1][1]+offset,indexes[i][2][0]-indexes[i][1][1]));
                }
                str=str.substr(0, indexes[i][1][0]+offset)+str.substr(indexes[i][2][1]+offset);
                offset-=indexes[i][2][1]-indexes[i][1][0];
        }
        var html=str;
        return { html:html, js:js.join("\n"), css:css.join("\n"), externalJs:externalJs, externalCss:externalCss };
};
var htmlJsCss=function(str, elms) {
        var i,j;
        if (typeof(str)!="undefined" && str.length>0) {
                var res=separateHtmlJsCss(str);
                for (i=0; i<elms.length; i++) {
                        elms[i].innerHTML=res.html;
                }
                if (res.js!="") { createNode('script', { type:"text/javascript" }, res.js, [document.body]); }
                if (res.css!="") { createNode('style', { type:"text/css" }, res.css, [document.getElementsByTagName('head')[0]]); }
                if (res.externalJs.src.length>0) {
                        for (j=0; j<res.externalJs.src.length; j++) {
                                if (typeof(res.externalJs.onload[j])!=="undefined") {
                                        createNode('script', { type:"text/javascript", src:res.externalJs.src[j], onload:res.externalJs.onload[j] }, "", [document.getElementsByTagName('head')[0]]);
                                } else {
                                        createNode('script', { type:"text/javascript", src:res.externalJs.src[j] }, "", [document.getElementsByTagName('head')[0]]);
                                }
                        }
                }
                if (res.externalCss.href.length>0) {
                        for (j=0; j<res.externalCss.href.length; j++) {
                                if (typeof(res.externalCss.media[j])!=="undefined") {
                                        createNode('link', { rel:"stylesheet", type:"text/css", href:res.externalCss.href[j], media:res.externalCss.media[j] }, "", [document.getElementsByTagName('head')[0]]);
                                } else {
                                        createNode('link', { rel:"stylesheet", type:"text/css", href:res.externalCss.href[j] }, "", [document.getElementsByTagName('head')[0]]);
                                }
                        }
                }
        } else {
                for (i=0; i<elms.length; i++) {
                        elms[i].innerHTML="";
                }
        }
};
//utilisation dans ton contexte:
window.onload=function() {
        ajax({ type:"GET", url:"./test2.html", onsuccess:function(ret) {
                htmlJsCss(ret.d, [document.getElementById("formulaire")]);
        }});
}
</script>
</html>

test2.html

Code html :

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

1
2
3
4
 
<script type="text/javascript">
        console.log("ok");
</script>

attention, ma méthode n'enlève pas le body et l'élément parent, html; il faut éventuellement la modifier si nécessaire et si la page appelée les contient.

**69Pierre** · 29/09/2015, 17h02

Code :

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

1
2
3
4
5
6
7
8
9
10
11
[17:00:04,264] GET http://127.0.0.1/Projet/Vue/formulaire_saisies.php [HTTP/1.1 200 OK 141ms]
[17:00:04,346] Propriété «*box-sizing*» inconnue.  Déclaration abandonnée. @ http://127.0.0.1/Projet/Contenu/normalize.css:213
[17:00:04,346] Propriété «*box-sizing*» inconnue.  Déclaration abandonnée. @ http://127.0.0.1/Projet/Contenu/normalize.css:336
[17:00:04,346] Pseudo-classe ou pseudo-élément «*-webkit-inner-spin-button*» inconnu.  Jeu de règles ignoré suite à un mauvais sélecteur. @ http://127.0.0.1/Projet/Contenu/normalize.css:346
[17:00:04,346] Propriété «*box-sizing*» inconnue.  Déclaration abandonnée. @ http://127.0.0.1/Projet/Contenu/normalize.css:361
[17:00:04,346] Pseudo-classe ou pseudo-élément «*-webkit-search-cancel-button*» inconnu.  Jeu de règles ignoré suite à un mauvais sélecteur. @ http://127.0.0.1/Projet/Contenu/normalize.css:370
[17:00:04,549] GET http://127.0.0.1/Projet/Contenu/htmlJsCss.js [HTTP/1.1 304 Not Modified 27ms]
[17:00:04,550] GET http://127.0.0.1/Projet/Contenu/choix_form.js [HTTP/1.1 304 Not Modified 26ms]
--
[17:00:10,478] GET http://127.0.0.1/Projet/Controleur/multisports.php [HTTP/1.1 200 OK 64ms]
[17:00:10,577] GET http://127.0.0.1/Projet/Contenu/CRUD.css [HTTP/1.1 304 Not Modified 9ms]

**01001111** · 29/09/2015, 17h38

pas de problème grave ici,
tu appelles une page contenant un html et un body?

Invité · 29/09/2015, 18h51

Bonjour,

j'ai le sentiment que l'usine à gaz échappe à tout contrôle.....

1/ On peut lire dans le tout 1er message :

Envoyé par 69Pierre

jquery a intégrer :

Code :

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

1
2
3
4
 <script src="../Contenu/jquery.1.11.3.js"></script>
	<script>
	..........................
	</script>

Donc, tu veux "intégrer à la volée" la bibliothèque jQuery...

Déjà là, ça fait peur...
Mets ce script directement dans le <head> de tous tes fichiers, et tu seras plus tranquille...

Et si c'est déjà fait... ça n'a plus aucun intérêt d'essayer de le ré-intégrer !

2/Il faut savoir qu'il faut "accrocher" une action à un élément DEJA dans le DOM.

Exemple :
Si l'élement '#msport' N'EST PAS pas le DOM (ajouté via JS/jQuery/Ajax...)

Code :

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

1
2
3
4
5
6
7
<script>
$(document).ready(function(){ 
	$('#msport').click( fonction(){
		alert('Qui est là ?');
	);
});
</script>

-> ne fonctionnera pas !
Il faut alors aller "l'accrocher" à un élément DÉJÀ dans le DOM :

Code :

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

1
2
3
4
5
6
7
<script>
$(document).ready(function(){ 
	$('body').on( 'click', '#msport', fonction(){
		alert('Qui est là ?');
	);
});
</script>

**69Pierre** · 30/09/2015, 15h30

Merci à tous les 2, je fais le point et je vous restitue mon "avancement".

**69Pierre** · 05/10/2015, 16h34

Bonjour.
J'ai bien compris la problématique du point 2 dejreaux62.
Mais la première partie, je ne sais effectivement pas comment faire ni ce que je génère, d'où ma question sur une autre discussion vite "sanctionné" par jreaux62.
Je ne sais et il n'y guère précisé, ce que l'on génère avec des includes ou des require_once au niveau des balises HTML et de leur ordre sachant que comme le code est interprété de manière linéaire.

J'ai cru bien en me faisant un gabarit qui contient de la mise en forme, l'appel aux sources js, le HEADER et le FOOTER commun au reste du projet.
La page d'entrée du projet est la page index.php qui appelle "en dehors " du <body> gabarit.php

Dans mon HEADER, il y a une barre de navigation avec des href qui me permet d'appeler la page formulaire.

Dans la partie corps11 du body de formulaire_saisi.php il y les liens onclick permettant de recharger la partie coprs12 des formulaires et effectivement, à ce moment là mon DOM semble difficilement exploitable mais je n'ai pas trouvé de doc expliquant bien cette partie.

Code gabarit.php :

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
<?php
require_once ((dirname(__DIR__)).'/Config/constantes.php');
require_once ((__DIR__).'/Accueil/header.php' );
require_once ((__DIR__).'/Accueil/footer.php' );
?>
 
<!DOCTYPE html>
<html>
 
<head>
<meta charset="utf-8" />
<title>Sports</title>
 
<meta charset="utf-8" />
		<link rel="stylesheet" type="text/css" href="<?php echo NORMALIZE2; ?>">
		<link rel="stylesheet" type="text/css" href="<?php echo STYLE2; ?>">
 
<script src = "../Contenu/jquery.1.11.3.js"></script>
 
<script src="../Contenu/htmlJsCss.js"></script>
<script src="/Projet/Contenu/choix_form.js"></script>
<script src="../Outils/afficher_cacher.js"></script>
</head>
</html>

Code index.php :

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
<?php require_once './Vue/gabarit.php';?>
<body>
<section class="corps1">
<article id="corps11">
<h1>Totaux</h1>
<p>Integer ut libero sit amet enim blandit consequat. Etiam purus justo, lacinia dapibus odio id, sollicitudin placerat nibh. Nam in magna a lectus blandit viverra. Sed commodo sit amet magna sed ultrices. Vivamus malesuada ipsum mi, vulputate blandit sem faucibus nec. Aenean feugiat urna est, eget sagittis velit fermentum a. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nullam sed eros aliquet, mattis nibh ut, convallis leo. Maecenas elementum congue mi ut venenatis. Aliquam euismod orci velit, a ultricies nisi dapibus eu. Nam accumsan dictum urna condimentum commodo. Nullam vitae risus eget urna accumsan dignissim. Donec vel lobortis mi, eget dictum lectus. Etiam placerat velit magna, sed porta tortor auctor sed.</p>
<p>Integer ut libero sit amet enim blandit consequat. Etiam purus justo, lacinia dapibus odio id, sollicitudin placerat nibh. Nam in magna a lectus blandit viverra. Sed commodo sit amet magna sed ultrices. Vivamus malesuada ipsum mi, vulputate blandit sem faucibus nec. Aenean feugiat urna est, eget sagittis velit fermentum a. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nullam sed eros aliquet, mattis nibh ut, convallis leo. Maecenas elementum congue mi ut venenatis. Aliquam euismod orci velit, a ultricies nisi dapibus eu. Nam accumsan dictum urna condimentum commodo. Nullam vitae risus eget urna accumsan dignissim. Donec vel lobortis mi, eget dictum lectus. Etiam placerat velit magna, sed porta tortor auctor sed.Integer ut libero sit amet enim blandit consequat. Etiam purus justo, lacinia dapibus odio id, sollicitudin placerat nibh. Nam in magna a lectus blandit viverra. Sed commodo sit amet magna sed ultrices. Vivamus malesuada ipsum mi, vulputate blandit sem faucibus nec. Aenean feugiat urna est, eget sagittis velit fermentum a. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nullam sed eros aliquet, mattis nibh ut, convallis leo. Maecenas elementum congue mi ut venenatis. Aliquam euismod orci velit, a ultricies nisi dapibus eu. Nam accumsan dictum urna condimentum commodo. Nullam vitae risus eget urna accumsan dignissim. Donec vel lobortis mi, eget dictum lectus. Etiam placerat velit magna, sed porta tortor auctor sed.</p>
Integer ut libero sit amet enim blandit consequat. Etiam purus justo, lacinia dapibus odio id, sollicitudin placerat nibh. Nam in magna a lectus blandit viverra. Sed commodo sit amet magna sed ultrices. Vivamus malesuada ipsum mi, vulputate blandit sem faucibus nec. Aenean feugiat urna est, eget sagittis velit fermentum a. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nullam sed eros aliquet, mattis nibh ut, convallis leo. Maecenas elementum congue mi ut venenatis. Aliquam euismod orci velit, a ultricies nisi dapibus eu. Nam accumsan dictum urna condimentum commodo. Nullam vitae risus eget urna accumsan dignissim. Donec vel lobortis mi, eget dictum lectus. Etiam placerat velit magna, sed porta tortor auctor sed.
Integer ut libero sit amet enim blandit consequat. Etiam purus justo, lacinia dapibus odio id, sollicitudin placerat nibh. Nam in magna a lectus blandit viverra. Sed commodo sit amet magna sed ultrices. Vivamus malesuada ipsum mi, vulputate blandit sem faucibus nec. Aenean feugiat urna est, eget sagittis velit fermentum a. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nullam sed eros aliquet, mattis nibh ut, convallis leo. Maecenas elementum congue mi ut venenatis. Aliquam euismod orci velit, a ultricies nisi dapibus eu. Nam accumsan dictum urna condimentum commodo. Nullam vitae risus eget urna accumsan dignissim. Donec vel lobortis mi, eget dictum lectus. Etiam placerat velit magna, sed porta tortor auctor sed.
<p>Integer ut libero sit amet enim blandit consequat. Etiam purus justo, lacinia dapibus odio id, sollicitudin placerat nibh. Nam in magna a lectus blandit viverra. Sed commodo sit amet magna sed ultrices. Vivamus malesuada ipsum mi, vulputate blandit sem faucibus nec. Aenean feugiat urna est, eget sagittis velit fermentum a. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nullam sed eros aliquet, mattis nibh ut, convallis leo. Maecenas elementum congue mi ut venenatis. Aliquam euismod orci velit, a ultricies nisi dapibus eu. Nam accumsan dictum urna condimentum commodo. Nullam vitae risus eget urna accumsan dignissim. Donec vel lobortis mi, eget dictum lectus. Etiam placerat velit magna, sed porta tortor auctor sed.</p>
<p>Integer ut libero sit amet enim blandit consequat. Etiam purus justo, lacinia dapibus odio id, sollicitudin placerat nibh. Nam in magna a lectus blandit viverra. Sed commodo sit amet magna sed ultrices. Vivamus malesuada ipsum mi, vulputate blandit sem faucibus nec. Aenean feugiat urna est, eget sagittis velit fermentum a. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nullam sed eros aliquet, mattis nibh ut, convallis leo. Maecenas elementum congue mi ut venenatis. Aliquam euismod orci velit, a ultricies nisi dapibus eu. Nam accumsan dictum urna condimentum commodo. Nullam vitae risus eget urna accumsan dignissim. Donec vel lobortis mi, eget dictum lectus. Etiam placerat velit magna, sed porta tortor auctor sed.</p>
<p>Integer ut libero sit amet enim blandit consequat. Etiam purus justo, lacinia dapibus odio id, sollicitudin placerat nibh. Nam in magna a lectus blandit viverra. Sed commodo sit amet magna sed ultrices. Vivamus malesuada ipsum mi, vulputate blandit sem faucibus nec. Aenean feugiat urna est, eget sagittis velit fermentum a. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nullam sed eros aliquet, mattis nibh ut, convallis leo. Maecenas elementum congue mi ut venenatis. Aliquam euismod orci velit, a ultricies nisi dapibus eu. Nam accumsan dictum urna condimentum commodo. Nullam vitae risus eget urna accumsan dignissim. Donec vel lobortis mi, eget dictum lectus. Etiam placerat velit magna, sed porta tortor auctor sed.</p>
<p>Integer ut libero sit amet enim blandit consequat. Etiam purus justo, lacinia dapibus odio id, sollicitudin placerat nibh. Nam in magna a lectus blandit viverra. Sed commodo sit amet magna sed ultrices. Vivamus malesuada ipsum mi, vulputate blandit sem faucibus nec. Aenean feugiat urna est, eget sagittis velit fermentum a. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nullam sed eros aliquet, mattis nibh ut, convallis leo. Maecenas elementum congue mi ut venenatis. Aliquam euismod orci velit, a ultricies nisi dapibus eu. Nam accumsan dictum urna condimentum commodo. Nullam vitae risus eget urna accumsan dignissim. Donec vel lobortis mi, eget dictum lectus. Etiam placerat velit magna, sed porta tortor auctor sed.</p>
<p>Integer ut libero sit amet enim blandit consequat. Etiam purus justo, lacinia dapibus odio id, sollicitudin placerat nibh. Nam in magna a lectus blandit viverra. Sed commodo sit amet magna sed ultrices. Vivamus malesuada ipsum mi, vulputate blandit sem faucibus nec. Aenean feugiat urna est, eget sagittis velit fermentum a. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nullam sed eros aliquet, mattis nibh ut, convallis leo. Maecenas elementum congue mi ut venenatis. Aliquam euismod orci velit, a ultricies nisi dapibus eu. Nam accumsan dictum urna condimentum commodo. Nullam vitae risus eget urna accumsan dignissim. Donec vel lobortis mi, eget dictum lectus. Etiam placerat velit magna, sed porta tortor auctor sed.Integer ut libero sit amet enim blandit consequat. Etiam purus justo, lacinia dapibus odio id, sollicitudin placerat nibh. Nam in magna a lectus blandit viverra. Sed commodo sit amet magna sed ultrices. Vivamus malesuada ipsum mi, vulputate blandit sem faucibus nec. Aenean feugiat urna est, eget sagittis velit fermentum a. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nullam sed eros aliquet, mattis nibh ut, convallis leo. Maecenas elementum congue mi ut venenatis. Aliquam euismod orci velit, a ultricies nisi dapibus eu. Nam accumsan dictum urna condimentum commodo. Nullam vitae risus eget urna accumsan dignissim. Donec vel lobortis mi, eget dictum lectus. Etiam placerat velit magna, sed porta tortor auctor sed.</p>
Integer ut libero sit amet enim blandit consequat. Etiam purus justo, lacinia dapibus odio id, sollicitudin placerat nibh. Nam in magna a lectus blandit viverra. Sed commodo sit amet magna sed ultrices. Vivamus malesuada ipsum mi, vulputate blandit sem faucibus nec. Aenean feugiat urna est, eget sagittis velit fermentum a. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nullam sed eros aliquet, mattis nibh ut, convallis leo. Maecenas elementum congue mi ut venenatis. Aliquam euismod orci velit, a ultricies nisi dapibus eu. Nam accumsan dictum urna condimentum commodo. Nullam vitae risus eget urna accumsan dignissim. Donec vel lobortis mi, eget dictum lectus. Etiam placerat velit magna, sed porta tortor auctor sed.
Integer ut libero sit amet enim blandit consequat. Etiam purus justo, lacinia dapibus odio id, sollicitudin placerat nibh. Nam in magna a lectus blandit viverra. Sed commodo sit amet magna sed ultrices. Vivamus malesuada ipsum mi, vulputate blandit sem faucibus nec. Aenean feugiat urna est, eget sagittis velit fermentum a. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nullam sed eros aliquet, mattis nibh ut, convallis leo. Maecenas elementum congue mi ut venenatis. Aliquam euismod orci velit, a ultricies nisi dapibus eu. Nam accumsan dictum urna condimentum commodo. Nullam vitae risus eget urna accumsan dignissim. Donec vel lobortis mi, eget dictum lectus. Etiam placerat velit magna, sed porta tortor auctor sed.
</article>
<article id="corps12">
<h1>Choix de l'affichage</h1>
<p>Integer ut libero sit amet enim blandit consequat. Etiam purus justo, lacinia dapibus odio id, sollicitudin placerat nibh. Nam in magna a lectus blandit viverra. Sed commodo sit amet magna sed ultrices. Vivamus malesuada ipsum mi, vulputate blandit sem faucibus nec. Aenean feugiat urna est, eget sagittis velit fermentum a. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nullam sed eros aliquet, mattis nibh ut, convallis leo. Maecenas elementum congue mi ut venenatis. Aliquam euismod orci velit, a ultricies nisi dapibus eu. Nam accumsan dictum urna condimentum commodo. Nullam vitae risus eget urna accumsan dignissim. Donec vel lobortis mi, eget dictum lectus. Etiam placerat velit magna, sed porta tortor auctor sed.</p>
<p>Integer ut libero sit amet enim blandit consequat. Etiam purus justo, lacinia dapibus odio id, sollicitudin placerat nibh. Nam in magna a lectus blandit viverra. Sed commodo sit amet magna sed ultrices. Vivamus malesuada ipsum mi, vulputate blandit sem faucibus nec. Aenean feugiat urna est, eget sagittis velit fermentum a. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nullam sed eros aliquet, mattis nibh ut, convallis leo. Maecenas elementum congue mi ut venenatis. Aliquam euismod orci velit, a ultricies nisi dapibus eu. Nam accumsan dictum urna condimentum commodo. Nullam vitae risus eget urna accumsan dignissim. Donec vel lobortis mi, eget dictum lectus. Etiam placerat velit magna, sed porta tortor auctor sed.Integer ut libero sit amet enim blandit consequat. Etiam purus justo, lacinia dapibus odio id, sollicitudin placerat nibh. Nam in magna a lectus blandit viverra. Sed commodo sit amet magna sed ultrices. Vivamus malesuada ipsum mi, vulputate blandit sem faucibus nec. Aenean feugiat urna est, eget sagittis velit fermentum a. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nullam sed eros aliquet, mattis nibh ut, convallis leo. Maecenas elementum congue mi ut venenatis. Aliquam euismod orci velit, a ultricies nisi dapibus eu. Nam accumsan dictum urna condimentum commodo. Nullam vitae risus eget urna accumsan dignissim. Donec vel lobortis mi, eget dictum lectus. Etiam placerat velit magna, sed porta tortor auctor sed.</p>
Integer ut libero sit amet enim blandit consequat. Etiam purus justo, lacinia dapibus odio id, sollicitudin placerat nibh. Nam in magna a lectus blandit viverra. Sed commodo sit amet magna sed ultrices. Vivamus malesuada ipsum mi, vulputate blandit sem faucibus nec. Aenean feugiat urna est, eget sagittis velit fermentum a. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nullam sed eros aliquet, mattis nibh ut, convallis leo. Maecenas elementum congue mi ut venenatis. Aliquam euismod orci velit, a ultricies nisi dapibus eu. Nam accumsan dictum urna condimentum commodo. Nullam vitae risus eget urna accumsan dignissim. Donec vel lobortis mi, eget dictum lectus. Etiam placerat velit magna, sed porta tortor auctor sed.
Integer ut libero sit amet enim blandit consequat. Etiam purus justo, lacinia dapibus odio id, sollicitudin placerat nibh. Nam in magna a lectus blandit viverra. Sed commodo sit amet magna sed ultrices. Vivamus malesuada ipsum mi, vulputate blandit sem faucibus nec. Aenean feugiat urna est, eget sagittis velit fermentum a. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nullam sed eros aliquet, mattis nibh ut, convallis leo. Maecenas elementum congue mi ut venenatis. Aliquam euismod orci velit, a ultricies nisi dapibus eu. Nam accumsan dictum urna condimentum commodo. Nullam vitae risus eget urna accumsan dignissim. Donec vel lobortis mi, eget dictum lectus. Etiam placerat velit magna, sed porta tortor auctor sed.
</article>
</section>
<section class="alone">
<article id="corps2">
<h1>Affichage de 4 temps/parcours de référence</h1>
dddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd
</article>
</section>
</body>

Code formulaire_saisi :

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
<body >
	<?php require_once '../Vue/gabarit.php';?>
<section id="corps1">
 
		<article id="corps11">
			<div>	
					<?php require_once '../Vue/Accueil/choixSaisie.php'; ?>
					<?php //require_once '../Vue/Accueil/choixSaisieV0.php'; ?>
			</div>
					<br/>
					<br /> 
			<div>
					<a href="https://developer.mozilla.org/fr/docs/Web/Guide/HTML/Formulaires/Mon_premier_formulaire_HTML">exemple formulaire</a><br/>
					<a href="http://forum.lesite.com/topic-5-49009-1-AJAX-changer-le-contenu-dune-div-au-clic-avec-parametres-SQL.html">changer le div avec jquery</a>
			</div>
		</article>
 
		<article id="corps12">
 
			<h1>Saisie</h1>
 
				<div id="monform">
					<?php require_once '../Controleur/saisieSortie.php'; //listeParcours.php : Fabrication de la requête SELECT?>
				</div>
 
		</article>
 
</section>
 
</body>

Code choixSaisie :

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

1
2
3
4
5
6
7
8
9
10
11
<h1>Colonne de gauche</h1>
	<div>
		<li><a href="#" onclick="javascript:choix_form('../Controleur/saisieSortie.php');">saisieSortie</a> </li><br/>
		<li><a href="#" onclick="javascript:choix_form('../Controleur/saisieSortieBis.php');">saisieSortieBis</a> </li><br/>
		<li><a href="#" onclick="javascript:choix_form('../Controleur/saisieParcours.php');">saisieParcours</a></li><br/>
		<li><a href="#" onclick="javascript:choix_form('../Controleur/saisieParcoursBis.php');">saisieParcoursBis</a></li><br/>
		<li><a href="#" onclick="javascript:choix_form('../Controleur/velos.php');">Vélos</a></li><br/>
		<li><a  id = "lien" href="#" onclick="javascript:choix_form('../Controleur/multisports.php');">Multisports</a></li><br/>
	</div>
 
						<?php require_once '../Outils/calculette.html';?>

Code reqAfficheMultisports :

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
<h1>Colonne de gauche</h1>
 
<script type="text/javascript"> console.log('Dom est prêt!');	</script>
<!--<script src = "../Contenu/jquery.1.11.3.js"></script>-->
<script src = "../Contenu/CRUD.js"></script>
<script type="text/javascript">  
 
			$(document).ready(function(){ 
 
			$('#msport').html('Nouveau sport : ');
 
			$('tr:nth-child(even)').addClass('style1');
			$('tr:nth-child(odd)').addClass('style2');
 
			$('.idModif').on('click',function(){
        $('#msport').html('Modifier sport : ');
		$("#courriel").attr("value","monEmail");  
 
    });
 });
 
 
	</script>
	<link rel="stylesheet" type="text/css" href="../Contenu/CRUD.css">
 
 
<?php
require_once '../CONFIG/constantes.php';
//require_once 'form_parcours.php';
require_once MYSQL2;
 
//print_r($_POST);
 
// Fabrication de la requête SELECT
$ma_requete = "SELECT * FROM multisports ORDER BY id_multisports; ";
 
  
// Connexion au serveur mysqli et selection de la base "ma_base"
$db_link = connect();
 
// Envoi de la requête
$rTables=mysqli_query($db_link,$ma_requete) or die(mysqli_error($db_link));
  
//affichage des données
                echo '<table>';
                
                        echo '<tr><td>id_multisports</td><td>Multisport</td><td></td></tr>';
 
                        while($Valeur = mysqli_fetch_assoc($rTables))
                        {
                        
                                        echo '<tr><td><a class="idModif" data-id="'.$Valeur['id_multisports'].'"href="#">'.$Valeur['id_multisports'].'</a></td>
                                        <td>'.$Valeur['nom_multisports'].'</td>
                                        <td><a href="../BDD/reqCRUD.php?action=D&table=multi&id='.$Valeur['id_multisports'].'">Supprimer</a></td></tr>';
                    // on affiche les informations de l'enregistrement en cours
 
                        }
                        echo '</table>';
                                echo '  
                                                        <form name="formulaire" method="post" action="../BDD/reqCRUD.php?action=C">
                                                                <label id="msport" >Coucou</label>
                                                                <input name="multi" type="text" id="multi" >
                                                                
                                                                <input type="submit" name="Submit" value="Envoyer">

                                                        </form>
';
        echo "\n";
 
  // Déconnexion
  mysqli_close($db_link);
 
echo '<script type="text/javascript">           alert(\'Dom est prêt!\');      
</script>';
 
?>
 
<script>
$(document).ready(function(){ 
	$('body').on( 'click', '#msport', fonction(){
		alert('Qui est là ?');
	);
});
</script>

Invité · 05/10/2015, 18h33

Bonjour,

1/

Envoyé par 69Pierre

...d'où ma question sur une autre discussion vite "sanctionné" par jreaux62.

Oui je sanctionne, je tacle, je botte en touche et mets des cartons rouges ! Je fouette aussi de temps en temps...

2/

Envoyé par 69Pierre

Je ne sais et il n'y guère précisé, ce que l'on génère avec des includes ou des require_once au niveau des balises HTML et de leur ordre sachant que comme le code est interprété de manière linéaire.

La réponse est simple. On ne "génère" rien de spécial avec un include ou un require_once :
tout se passe comme si le contenu des fichiers inclus était directement écrit dans le fichier incluant.

3/

Code :

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

1
2
3
4
5
6
7
8
<?php
//[...]
require_once ((__DIR__).'/Accueil/header.php' );
require_once ((__DIR__).'/Accueil/footer.php' );
?>
 
<!DOCTYPE html>
<html>

J'ai du mal à comprendre comment/pourquoi tu inclus le header et footer (HTML ?) AVANT le <!DOCTYPE html>...

Conséquemment à ce que j'ai dit plus haut, un include (ou require_once) d'un fichier contenant du HTML doit se faire A L'ENDROIT où ce contenu HTML doit être affiché.

4/ Enfin, dans les fichiers inclus, il ne faut pas mettre les balises <body><head>... quand elles sont DÉJÀ présentes dans le fichier incluant.

**69Pierre** · 07/10/2015, 12h02

Pour que mes require_once soient cohérents au niveau du DOM, il faudrait que je fasse un require_once de index.php dans gabarit.php mais du coup faire l'include dans le template... c'est pas l'idée.

Code index.php :

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
<section class="corps1">
<article id="corps11">
<h1>Totaux</h1>
<p>Integer ut libero sit amet enim blandit consequat. Etiam purus justo, lacinia dapibus odio id, sollicitudin placerat nibh. Nam in magna a lectus blandit viverra. Sed commodo sit amet magna sed ultrices. Vivamus malesuada ipsum mi, vulputate blandit sem faucibus nec. Aenean feugiat urna est, eget sagittis velit fermentum a. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nullam sed eros aliquet, mattis nibh ut, convallis leo. Maecenas elementum congue mi ut venenatis. Aliquam euismod orci velit, a ultricies nisi dapibus eu. Nam accumsan dictum urna condimentum commodo. Nullam vitae risus eget urna accumsan dignissim. Donec vel lobortis mi, eget dictum lectus. Etiam placerat velit magna, sed porta tortor auctor sed.</p>
<p>Integer ut libero sit amet enim blandit consequat. Etiam purus justo, lacinia dapibus odio id, sollicitudin placerat nibh. Nam in magna a lectus blandit viverra. Sed commodo sit amet magna sed ultrices. Vivamus malesuada ipsum mi, vulputate blandit sem faucibus nec. Aenean feugiat urna est, eget sagittis velit fermentum a. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nullam sed eros aliquet, mattis nibh ut, convallis leo. Maecenas elementum congue mi ut venenatis. Aliquam euismod orci velit, a ultricies nisi dapibus eu. Nam accumsan dictum urna condimentum commodo. Nullam vitae risus eget urna accumsan dignissim. Donec vel lobortis mi, eget dictum lectus. Etiam placerat velit magna, sed porta tortor auctor sed.Integer ut libero sit amet enim blandit consequat. Etiam purus justo, lacinia dapibus odio id, sollicitudin placerat nibh. Nam in magna a lectus blandit viverra. Sed commodo sit amet magna sed ultrices. Vivamus malesuada ipsum mi, vulputate blandit sem faucibus nec. Aenean feugiat urna est, eget sagittis velit fermentum a. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nullam sed eros aliquet, mattis nibh ut, convallis leo. Maecenas elementum congue mi ut venenatis. Aliquam euismod orci velit, a ultricies nisi dapibus eu. Nam accumsan dictum urna condimentum commodo. Nullam vitae risus eget urna accumsan dignissim. Donec vel lobortis mi, eget dictum lectus. Etiam placerat velit magna, sed porta tortor auctor sed.</p>
Integer ut libero sit amet enim blandit consequat. Etiam purus justo, lacinia dapibus odio id, sollicitudin placerat nibh. Nam in magna a lectus blandit viverra. Sed commodo sit amet magna sed ultrices. Vivamus malesuada ipsum mi, vulputate blandit sem faucibus nec. Aenean feugiat urna est, eget sagittis velit fermentum a. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nullam sed eros aliquet, mattis nibh ut, convallis leo. Maecenas elementum congue mi ut venenatis. Aliquam euismod orci velit, a ultricies nisi dapibus eu. Nam accumsan dictum urna condimentum commodo. Nullam vitae risus eget urna accumsan dignissim. Donec vel lobortis mi, eget dictum lectus. Etiam placerat velit magna, sed porta tortor auctor sed.
Integer ut libero sit amet enim blandit consequat. Etiam purus justo, lacinia dapibus odio id, sollicitudin placerat nibh. Nam in magna a lectus blandit viverra. Sed commodo sit amet magna sed ultrices. Vivamus malesuada ipsum mi, vulputate blandit sem faucibus nec. Aenean feugiat urna est, eget sagittis velit fermentum a. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nullam sed eros aliquet, mattis nibh ut, convallis leo. Maecenas elementum congue mi ut venenatis. Aliquam euismod orci velit, a ultricies nisi dapibus eu. Nam accumsan dictum urna condimentum commodo. Nullam vitae risus eget urna accumsan dignissim. Donec vel lobortis mi, eget dictum lectus. Etiam placerat velit magna, sed porta tortor auctor sed.
<p>Integer ut libero sit amet enim blandit consequat. Etiam purus justo, lacinia dapibus odio id, sollicitudin placerat nibh. Nam in magna a lectus blandit viverra. Sed commodo sit amet magna sed ultrices. Vivamus malesuada ipsum mi, vulputate blandit sem faucibus nec. Aenean feugiat urna est, eget sagittis velit fermentum a. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nullam sed eros aliquet, mattis nibh ut, convallis leo. Maecenas elementum congue mi ut venenatis. Aliquam euismod orci velit, a ultricies nisi dapibus eu. Nam accumsan dictum urna condimentum commodo. Nullam vitae risus eget urna accumsan dignissim. Donec vel lobortis mi, eget dictum lectus. Etiam placerat velit magna, sed porta tortor auctor sed.</p>
<p>Integer ut libero sit amet enim blandit consequat. Etiam purus justo, lacinia dapibus odio id, sollicitudin placerat nibh. Nam in magna a lectus blandit viverra. Sed commodo sit amet magna sed ultrices. Vivamus malesuada ipsum mi, vulputate blandit sem faucibus nec. Aenean feugiat urna est, eget sagittis velit fermentum a. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nullam sed eros aliquet, mattis nibh ut, convallis leo. Maecenas elementum congue mi ut venenatis. Aliquam euismod orci velit, a ultricies nisi dapibus eu. Nam accumsan dictum urna condimentum commodo. Nullam vitae risus eget urna accumsan dignissim. Donec vel lobortis mi, eget dictum lectus. Etiam placerat velit magna, sed porta tortor auctor sed.</p>
<p>Integer ut libero sit amet enim blandit consequat. Etiam purus justo, lacinia dapibus odio id, sollicitudin placerat nibh. Nam in magna a lectus blandit viverra. Sed commodo sit amet magna sed ultrices. Vivamus malesuada ipsum mi, vulputate blandit sem faucibus nec. Aenean feugiat urna est, eget sagittis velit fermentum a. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nullam sed eros aliquet, mattis nibh ut, convallis leo. Maecenas elementum congue mi ut venenatis. Aliquam euismod orci velit, a ultricies nisi dapibus eu. Nam accumsan dictum urna condimentum commodo. Nullam vitae risus eget urna accumsan dignissim. Donec vel lobortis mi, eget dictum lectus. Etiam placerat velit magna, sed porta tortor auctor sed.</p>
<p>Integer ut libero sit amet enim blandit consequat. Etiam purus justo, lacinia dapibus odio id, sollicitudin placerat nibh. Nam in magna a lectus blandit viverra. Sed commodo sit amet magna sed ultrices. Vivamus malesuada ipsum mi, vulputate blandit sem faucibus nec. Aenean feugiat urna est, eget sagittis velit fermentum a. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nullam sed eros aliquet, mattis nibh ut, convallis leo. Maecenas elementum congue mi ut venenatis. Aliquam euismod orci velit, a ultricies nisi dapibus eu. Nam accumsan dictum urna condimentum commodo. Nullam vitae risus eget urna accumsan dignissim. Donec vel lobortis mi, eget dictum lectus. Etiam placerat velit magna, sed porta tortor auctor sed.</p>
<p>Integer ut libero sit amet enim blandit consequat. Etiam purus justo, lacinia dapibus odio id, sollicitudin placerat nibh. Nam in magna a lectus blandit viverra. Sed commodo sit amet magna sed ultrices. Vivamus malesuada ipsum mi, vulputate blandit sem faucibus nec. Aenean feugiat urna est, eget sagittis velit fermentum a. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nullam sed eros aliquet, mattis nibh ut, convallis leo. Maecenas elementum congue mi ut venenatis. Aliquam euismod orci velit, a ultricies nisi dapibus eu. Nam accumsan dictum urna condimentum commodo. Nullam vitae risus eget urna accumsan dignissim. Donec vel lobortis mi, eget dictum lectus. Etiam placerat velit magna, sed porta tortor auctor sed.Integer ut libero sit amet enim blandit consequat. Etiam purus justo, lacinia dapibus odio id, sollicitudin placerat nibh. Nam in magna a lectus blandit viverra. Sed commodo sit amet magna sed ultrices. Vivamus malesuada ipsum mi, vulputate blandit sem faucibus nec. Aenean feugiat urna est, eget sagittis velit fermentum a. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nullam sed eros aliquet, mattis nibh ut, convallis leo. Maecenas elementum congue mi ut venenatis. Aliquam euismod orci velit, a ultricies nisi dapibus eu. Nam accumsan dictum urna condimentum commodo. Nullam vitae risus eget urna accumsan dignissim. Donec vel lobortis mi, eget dictum lectus. Etiam placerat velit magna, sed porta tortor auctor sed.</p>
Integer ut libero sit amet enim blandit consequat. Etiam purus justo, lacinia dapibus odio id, sollicitudin placerat nibh. Nam in magna a lectus blandit viverra. Sed commodo sit amet magna sed ultrices. Vivamus malesuada ipsum mi, vulputate blandit sem faucibus nec. Aenean feugiat urna est, eget sagittis velit fermentum a. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nullam sed eros aliquet, mattis nibh ut, convallis leo. Maecenas elementum congue mi ut venenatis. Aliquam euismod orci velit, a ultricies nisi dapibus eu. Nam accumsan dictum urna condimentum commodo. Nullam vitae risus eget urna accumsan dignissim. Donec vel lobortis mi, eget dictum lectus. Etiam placerat velit magna, sed porta tortor auctor sed.
Integer ut libero sit amet enim blandit consequat. Etiam purus justo, lacinia dapibus odio id, sollicitudin placerat nibh. Nam in magna a lectus blandit viverra. Sed commodo sit amet magna sed ultrices. Vivamus malesuada ipsum mi, vulputate blandit sem faucibus nec. Aenean feugiat urna est, eget sagittis velit fermentum a. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nullam sed eros aliquet, mattis nibh ut, convallis leo. Maecenas elementum congue mi ut venenatis. Aliquam euismod orci velit, a ultricies nisi dapibus eu. Nam accumsan dictum urna condimentum commodo. Nullam vitae risus eget urna accumsan dignissim. Donec vel lobortis mi, eget dictum lectus. Etiam placerat velit magna, sed porta tortor auctor sed.
</article>
<article id="corps12">
<h1>Choix de l'affichage</h1>
<p>Integer ut libero sit amet enim blandit consequat. Etiam purus justo, lacinia dapibus odio id, sollicitudin placerat nibh. Nam in magna a lectus blandit viverra. Sed commodo sit amet magna sed ultrices. Vivamus malesuada ipsum mi, vulputate blandit sem faucibus nec. Aenean feugiat urna est, eget sagittis velit fermentum a. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nullam sed eros aliquet, mattis nibh ut, convallis leo. Maecenas elementum congue mi ut venenatis. Aliquam euismod orci velit, a ultricies nisi dapibus eu. Nam accumsan dictum urna condimentum commodo. Nullam vitae risus eget urna accumsan dignissim. Donec vel lobortis mi, eget dictum lectus. Etiam placerat velit magna, sed porta tortor auctor sed.</p>
<p>Integer ut libero sit amet enim blandit consequat. Etiam purus justo, lacinia dapibus odio id, sollicitudin placerat nibh. Nam in magna a lectus blandit viverra. Sed commodo sit amet magna sed ultrices. Vivamus malesuada ipsum mi, vulputate blandit sem faucibus nec. Aenean feugiat urna est, eget sagittis velit fermentum a. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nullam sed eros aliquet, mattis nibh ut, convallis leo. Maecenas elementum congue mi ut venenatis. Aliquam euismod orci velit, a ultricies nisi dapibus eu. Nam accumsan dictum urna condimentum commodo. Nullam vitae risus eget urna accumsan dignissim. Donec vel lobortis mi, eget dictum lectus. Etiam placerat velit magna, sed porta tortor auctor sed.Integer ut libero sit amet enim blandit consequat. Etiam purus justo, lacinia dapibus odio id, sollicitudin placerat nibh. Nam in magna a lectus blandit viverra. Sed commodo sit amet magna sed ultrices. Vivamus malesuada ipsum mi, vulputate blandit sem faucibus nec. Aenean feugiat urna est, eget sagittis velit fermentum a. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nullam sed eros aliquet, mattis nibh ut, convallis leo. Maecenas elementum congue mi ut venenatis. Aliquam euismod orci velit, a ultricies nisi dapibus eu. Nam accumsan dictum urna condimentum commodo. Nullam vitae risus eget urna accumsan dignissim. Donec vel lobortis mi, eget dictum lectus. Etiam placerat velit magna, sed porta tortor auctor sed.</p>
Integer ut libero sit amet enim blandit consequat. Etiam purus justo, lacinia dapibus odio id, sollicitudin placerat nibh. Nam in magna a lectus blandit viverra. Sed commodo sit amet magna sed ultrices. Vivamus malesuada ipsum mi, vulputate blandit sem faucibus nec. Aenean feugiat urna est, eget sagittis velit fermentum a. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nullam sed eros aliquet, mattis nibh ut, convallis leo. Maecenas elementum congue mi ut venenatis. Aliquam euismod orci velit, a ultricies nisi dapibus eu. Nam accumsan dictum urna condimentum commodo. Nullam vitae risus eget urna accumsan dignissim. Donec vel lobortis mi, eget dictum lectus. Etiam placerat velit magna, sed porta tortor auctor sed.
Integer ut libero sit amet enim blandit consequat. Etiam purus justo, lacinia dapibus odio id, sollicitudin placerat nibh. Nam in magna a lectus blandit viverra. Sed commodo sit amet magna sed ultrices. Vivamus malesuada ipsum mi, vulputate blandit sem faucibus nec. Aenean feugiat urna est, eget sagittis velit fermentum a. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nullam sed eros aliquet, mattis nibh ut, convallis leo. Maecenas elementum congue mi ut venenatis. Aliquam euismod orci velit, a ultricies nisi dapibus eu. Nam accumsan dictum urna condimentum commodo. Nullam vitae risus eget urna accumsan dignissim. Donec vel lobortis mi, eget dictum lectus. Etiam placerat velit magna, sed porta tortor auctor sed.
</article>
</section>
<section class="alone">
<article id="corps2">
<h1>Affichage de 4 temps/parcours de référence</h1>
dddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd
</article>
</section>

Code gabarit.php :

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
<?php
require_once ((dirname(__DIR__)).'/Config/constantes.php');
?>
 
<!DOCTYPE html>
<html>
 
<head>
<meta charset="utf-8" />
<title>Sports</title>
 
<meta charset="utf-8" />
		<link rel="stylesheet" type="text/css" href="<?php echo NORMALIZE2; ?>">
		<link rel="stylesheet" type="text/css" href="<?php echo STYLE2; ?>">
 
<script src = "../Contenu/jquery.1.11.3.js"></script>
 
<script src="../Contenu/htmlJsCss.js"></script>
<script src="/Projet/Contenu/choix_form.js"></script>
<script src="../Outils/afficher_cacher.js"></script>
</head>
<body>	
<?php require_once ((__DIR__).'/Accueil/header.php' ); ?>
 
<?php require_once ('index.php' ); ?>
 
<?php require_once ((__DIR__).'/Accueil/footer.php' ); ?>
</body>
</html>

Invité · 07/10/2015, 12h37

Bonjour,
je pense que ta conception est complètement bancale...

Normalement, c'est la page "index.php" qui est affichée (avec des paramètres supplémentaires dans l'URL pour les choix de ce qui doit être affiché).
On a des liens du genre : index.php?page=xxxxx&param1=yy........ (hors URL rewriting éventuel)
C'est dans cette page index.php qu'on inclut tout le reste.

Or, il semble pour pour toi, ta page nommée "index.php" est... du contenu !
C'est anormal et déroutant.

C'est ta page "gabarit.php" qui devrait s'appeler "index.php"
et ta page "index.php" devrait s'appeler "contenu.php"

Jette un oeil à ce tuto : Exemple de conception d'un site dynamique (III-B. Création du template)
(il date de 2006, mais le principe est le même)

**69Pierre** · 07/10/2015, 14h51

Bonjour, oui merci, c'est la dessus qu'il faut que je travaille.
Je n'ai pas trouvé de littérature là dessus.
Je vais essayer de faire comme sur l'exemple. J'ai moi aussi qu'un template, ce sera index.php.
Je n'ai pas compris comment est utilisé l'id des page pour pouvoir changer le body à chaque click dans la barre des menus qui pour moi est dans header.php

J'ai modifié comme suit :

Code index.php :

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
<?php
require_once ('./Config/constantes.php');
 
	// Définit l'Id de la page d'accueil (1 dans cet exemple)
	$id_page_accueil = 1;
 
	// Récupère l'id de la page courante passée par l'URL
	// Si non défini, on considère que la page est la page d'accueil
	if (isset($_GET['id_page'])) {
		$_ENV['id_page'] = intval($_GET['id_page']);
	} else {
		$_ENV['id_page'] = $id_page_accueil;
	}
?>
 
<!DOCTYPE html>
<html>
 
<head>
<meta charset="utf-8" />
<title>Sports</title>
 
<meta charset="utf-8" />
		<link rel="stylesheet" type="text/css" href="<?php echo NORMALIZE2; ?>">
		<link rel="stylesheet" type="text/css" href="<?php echo STYLE2; ?>">
 
<script src = "../Contenu/jquery.1.11.3.js"></script>
 
<script src="../Contenu/htmlJsCss.js"></script>
<script src="/Projet/Contenu/choix_form.js"></script>
<script src="../Outils/afficher_cacher.js"></script>
</head>
<body>	
<?php require_once ('./Vue/Accueil/header.php' ); ?>
 
<div id="contenu"> 
	<?php require_once ('/Vue/contenuIndex.php' ); ?>
</div>
 
<?php require_once ('./Vue/Accueil/footer.php' ); ?>
</body>
</html>

Code contenuIndex.php :

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
<section class="corps1">
<article id="corps11">
<h1>Totaux</h1>
<p>Integer ut libero sit amet enim blandit consequat. Etiam purus justo, lacinia dapibus odio id, sollicitudin placerat nibh. Nam in magna a lectus blandit viverra. Sed commodo sit amet magna sed ultrices. Vivamus malesuada ipsum mi, vulputate blandit sem faucibus nec. Aenean feugiat urna est, eget sagittis velit fermentum a. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nullam sed eros aliquet, mattis nibh ut, convallis leo. Maecenas elementum congue mi ut venenatis. Aliquam euismod orci velit, a ultricies nisi dapibus eu. Nam accumsan dictum urna condimentum commodo. Nullam vitae risus eget urna accumsan dignissim. Donec vel lobortis mi, eget dictum lectus. Etiam placerat velit magna, sed porta tortor auctor sed.</p>
<p>Integer ut libero sit amet enim blandit consequat. Etiam purus justo, lacinia dapibus odio id, sollicitudin placerat nibh. Nam in magna a lectus blandit viverra. Sed commodo sit amet magna sed ultrices. Vivamus malesuada ipsum mi, vulputate blandit sem faucibus nec. Aenean feugiat urna est, eget sagittis velit fermentum a. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nullam sed eros aliquet, mattis nibh ut, convallis leo. Maecenas elementum congue mi ut venenatis. Aliquam euismod orci velit, a ultricies nisi dapibus eu. Nam accumsan dictum urna condimentum commodo. Nullam vitae risus eget urna accumsan dignissim. Donec vel lobortis mi, eget dictum lectus. Etiam placerat velit magna, sed porta tortor auctor sed.Integer ut libero sit amet enim blandit consequat. Etiam purus justo, lacinia dapibus odio id, sollicitudin placerat nibh. Nam in magna a lectus blandit viverra. Sed commodo sit amet magna sed ultrices. Vivamus malesuada ipsum mi, vulputate blandit sem faucibus nec. Aenean feugiat urna est, eget sagittis velit fermentum a. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nullam sed eros aliquet, mattis nibh ut, convallis leo. Maecenas elementum congue mi ut venenatis. Aliquam euismod orci velit, a ultricies nisi dapibus eu. Nam accumsan dictum urna condimentum commodo. Nullam vitae risus eget urna accumsan dignissim. Donec vel lobortis mi, eget dictum lectus. Etiam placerat velit magna, sed porta tortor auctor sed.</p>
Integer ut libero sit amet enim blandit consequat. Etiam purus justo, lacinia dapibus odio id, sollicitudin placerat nibh. Nam in magna a lectus blandit viverra. Sed commodo sit amet magna sed ultrices. Vivamus malesuada ipsum mi, vulputate blandit sem faucibus nec. Aenean feugiat urna est, eget sagittis velit fermentum a. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nullam sed eros aliquet, mattis nibh ut, convallis leo. Maecenas elementum congue mi ut venenatis. Aliquam euismod orci velit, a ultricies nisi dapibus eu. Nam accumsan dictum urna condimentum commodo. Nullam vitae risus eget urna accumsan dignissim. Donec vel lobortis mi, eget dictum lectus. Etiam placerat velit magna, sed porta tortor auctor sed.
Integer ut libero sit amet enim blandit consequat. Etiam purus justo, lacinia dapibus odio id, sollicitudin placerat nibh. Nam in magna a lectus blandit viverra. Sed commodo sit amet magna sed ultrices. Vivamus malesuada ipsum mi, vulputate blandit sem faucibus nec. Aenean feugiat urna est, eget sagittis velit fermentum a. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nullam sed eros aliquet, mattis nibh ut, convallis leo. Maecenas elementum congue mi ut venenatis. Aliquam euismod orci velit, a ultricies nisi dapibus eu. Nam accumsan dictum urna condimentum commodo. Nullam vitae risus eget urna accumsan dignissim. Donec vel lobortis mi, eget dictum lectus. Etiam placerat velit magna, sed porta tortor auctor sed.
<p>Integer ut libero sit amet enim blandit consequat. Etiam purus justo, lacinia dapibus odio id, sollicitudin placerat nibh. Nam in magna a lectus blandit viverra. Sed commodo sit amet magna sed ultrices. Vivamus malesuada ipsum mi, vulputate blandit sem faucibus nec. Aenean feugiat urna est, eget sagittis velit fermentum a. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nullam sed eros aliquet, mattis nibh ut, convallis leo. Maecenas elementum congue mi ut venenatis. Aliquam euismod orci velit, a ultricies nisi dapibus eu. Nam accumsan dictum urna condimentum commodo. Nullam vitae risus eget urna accumsan dignissim. Donec vel lobortis mi, eget dictum lectus. Etiam placerat velit magna, sed porta tortor auctor sed.</p>
<p>Integer ut libero sit amet enim blandit consequat. Etiam purus justo, lacinia dapibus odio id, sollicitudin placerat nibh. Nam in magna a lectus blandit viverra. Sed commodo sit amet magna sed ultrices. Vivamus malesuada ipsum mi, vulputate blandit sem faucibus nec. Aenean feugiat urna est, eget sagittis velit fermentum a. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nullam sed eros aliquet, mattis nibh ut, convallis leo. Maecenas elementum congue mi ut venenatis. Aliquam euismod orci velit, a ultricies nisi dapibus eu. Nam accumsan dictum urna condimentum commodo. Nullam vitae risus eget urna accumsan dignissim. Donec vel lobortis mi, eget dictum lectus. Etiam placerat velit magna, sed porta tortor auctor sed.</p>
<p>Integer ut libero sit amet enim blandit consequat. Etiam purus justo, lacinia dapibus odio id, sollicitudin placerat nibh. Nam in magna a lectus blandit viverra. Sed commodo sit amet magna sed ultrices. Vivamus malesuada ipsum mi, vulputate blandit sem faucibus nec. Aenean feugiat urna est, eget sagittis velit fermentum a. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nullam sed eros aliquet, mattis nibh ut, convallis leo. Maecenas elementum congue mi ut venenatis. Aliquam euismod orci velit, a ultricies nisi dapibus eu. Nam accumsan dictum urna condimentum commodo. Nullam vitae risus eget urna accumsan dignissim. Donec vel lobortis mi, eget dictum lectus. Etiam placerat velit magna, sed porta tortor auctor sed.</p>
<p>Integer ut libero sit amet enim blandit consequat. Etiam purus justo, lacinia dapibus odio id, sollicitudin placerat nibh. Nam in magna a lectus blandit viverra. Sed commodo sit amet magna sed ultrices. Vivamus malesuada ipsum mi, vulputate blandit sem faucibus nec. Aenean feugiat urna est, eget sagittis velit fermentum a. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nullam sed eros aliquet, mattis nibh ut, convallis leo. Maecenas elementum congue mi ut venenatis. Aliquam euismod orci velit, a ultricies nisi dapibus eu. Nam accumsan dictum urna condimentum commodo. Nullam vitae risus eget urna accumsan dignissim. Donec vel lobortis mi, eget dictum lectus. Etiam placerat velit magna, sed porta tortor auctor sed.</p>
<p>Integer ut libero sit amet enim blandit consequat. Etiam purus justo, lacinia dapibus odio id, sollicitudin placerat nibh. Nam in magna a lectus blandit viverra. Sed commodo sit amet magna sed ultrices. Vivamus malesuada ipsum mi, vulputate blandit sem faucibus nec. Aenean feugiat urna est, eget sagittis velit fermentum a. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nullam sed eros aliquet, mattis nibh ut, convallis leo. Maecenas elementum congue mi ut venenatis. Aliquam euismod orci velit, a ultricies nisi dapibus eu. Nam accumsan dictum urna condimentum commodo. Nullam vitae risus eget urna accumsan dignissim. Donec vel lobortis mi, eget dictum lectus. Etiam placerat velit magna, sed porta tortor auctor sed.Integer ut libero sit amet enim blandit consequat. Etiam purus justo, lacinia dapibus odio id, sollicitudin placerat nibh. Nam in magna a lectus blandit viverra. Sed commodo sit amet magna sed ultrices. Vivamus malesuada ipsum mi, vulputate blandit sem faucibus nec. Aenean feugiat urna est, eget sagittis velit fermentum a. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nullam sed eros aliquet, mattis nibh ut, convallis leo. Maecenas elementum congue mi ut venenatis. Aliquam euismod orci velit, a ultricies nisi dapibus eu. Nam accumsan dictum urna condimentum commodo. Nullam vitae risus eget urna accumsan dignissim. Donec vel lobortis mi, eget dictum lectus. Etiam placerat velit magna, sed porta tortor auctor sed.</p>
Integer ut libero sit amet enim blandit consequat. Etiam purus justo, lacinia dapibus odio id, sollicitudin placerat nibh. Nam in magna a lectus blandit viverra. Sed commodo sit amet magna sed ultrices. Vivamus malesuada ipsum mi, vulputate blandit sem faucibus nec. Aenean feugiat urna est, eget sagittis velit fermentum a. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nullam sed eros aliquet, mattis nibh ut, convallis leo. Maecenas elementum congue mi ut venenatis. Aliquam euismod orci velit, a ultricies nisi dapibus eu. Nam accumsan dictum urna condimentum commodo. Nullam vitae risus eget urna accumsan dignissim. Donec vel lobortis mi, eget dictum lectus. Etiam placerat velit magna, sed porta tortor auctor sed.
Integer ut libero sit amet enim blandit consequat. Etiam purus justo, lacinia dapibus odio id, sollicitudin placerat nibh. Nam in magna a lectus blandit viverra. Sed commodo sit amet magna sed ultrices. Vivamus malesuada ipsum mi, vulputate blandit sem faucibus nec. Aenean feugiat urna est, eget sagittis velit fermentum a. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nullam sed eros aliquet, mattis nibh ut, convallis leo. Maecenas elementum congue mi ut venenatis. Aliquam euismod orci velit, a ultricies nisi dapibus eu. Nam accumsan dictum urna condimentum commodo. Nullam vitae risus eget urna accumsan dignissim. Donec vel lobortis mi, eget dictum lectus. Etiam placerat velit magna, sed porta tortor auctor sed.
</article>
<article id="corps12">
<h1>Choix de l'affichage</h1>
<p>Integer ut libero sit amet enim blandit consequat. Etiam purus justo, lacinia dapibus odio id, sollicitudin placerat nibh. Nam in magna a lectus blandit viverra. Sed commodo sit amet magna sed ultrices. Vivamus malesuada ipsum mi, vulputate blandit sem faucibus nec. Aenean feugiat urna est, eget sagittis velit fermentum a. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nullam sed eros aliquet, mattis nibh ut, convallis leo. Maecenas elementum congue mi ut venenatis. Aliquam euismod orci velit, a ultricies nisi dapibus eu. Nam accumsan dictum urna condimentum commodo. Nullam vitae risus eget urna accumsan dignissim. Donec vel lobortis mi, eget dictum lectus. Etiam placerat velit magna, sed porta tortor auctor sed.</p>
<p>Integer ut libero sit amet enim blandit consequat. Etiam purus justo, lacinia dapibus odio id, sollicitudin placerat nibh. Nam in magna a lectus blandit viverra. Sed commodo sit amet magna sed ultrices. Vivamus malesuada ipsum mi, vulputate blandit sem faucibus nec. Aenean feugiat urna est, eget sagittis velit fermentum a. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nullam sed eros aliquet, mattis nibh ut, convallis leo. Maecenas elementum congue mi ut venenatis. Aliquam euismod orci velit, a ultricies nisi dapibus eu. Nam accumsan dictum urna condimentum commodo. Nullam vitae risus eget urna accumsan dignissim. Donec vel lobortis mi, eget dictum lectus. Etiam placerat velit magna, sed porta tortor auctor sed.Integer ut libero sit amet enim blandit consequat. Etiam purus justo, lacinia dapibus odio id, sollicitudin placerat nibh. Nam in magna a lectus blandit viverra. Sed commodo sit amet magna sed ultrices. Vivamus malesuada ipsum mi, vulputate blandit sem faucibus nec. Aenean feugiat urna est, eget sagittis velit fermentum a. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nullam sed eros aliquet, mattis nibh ut, convallis leo. Maecenas elementum congue mi ut venenatis. Aliquam euismod orci velit, a ultricies nisi dapibus eu. Nam accumsan dictum urna condimentum commodo. Nullam vitae risus eget urna accumsan dignissim. Donec vel lobortis mi, eget dictum lectus. Etiam placerat velit magna, sed porta tortor auctor sed.</p>
Integer ut libero sit amet enim blandit consequat. Etiam purus justo, lacinia dapibus odio id, sollicitudin placerat nibh. Nam in magna a lectus blandit viverra. Sed commodo sit amet magna sed ultrices. Vivamus malesuada ipsum mi, vulputate blandit sem faucibus nec. Aenean feugiat urna est, eget sagittis velit fermentum a. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nullam sed eros aliquet, mattis nibh ut, convallis leo. Maecenas elementum congue mi ut venenatis. Aliquam euismod orci velit, a ultricies nisi dapibus eu. Nam accumsan dictum urna condimentum commodo. Nullam vitae risus eget urna accumsan dignissim. Donec vel lobortis mi, eget dictum lectus. Etiam placerat velit magna, sed porta tortor auctor sed.
Integer ut libero sit amet enim blandit consequat. Etiam purus justo, lacinia dapibus odio id, sollicitudin placerat nibh. Nam in magna a lectus blandit viverra. Sed commodo sit amet magna sed ultrices. Vivamus malesuada ipsum mi, vulputate blandit sem faucibus nec. Aenean feugiat urna est, eget sagittis velit fermentum a. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nullam sed eros aliquet, mattis nibh ut, convallis leo. Maecenas elementum congue mi ut venenatis. Aliquam euismod orci velit, a ultricies nisi dapibus eu. Nam accumsan dictum urna condimentum commodo. Nullam vitae risus eget urna accumsan dignissim. Donec vel lobortis mi, eget dictum lectus. Etiam placerat velit magna, sed porta tortor auctor sed.
</article>
</section>
<section class="alone">
<article id="corps2">
<h1>Affichage de 4 temps/parcours de référence</h1>
dddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd
</article>
</section>

Code formulaire_saisies.php :

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
<?php	
	// Définit l'Id de la page 
	$id_page_formulaire_saisi = 2;
?>
 
<section id="corps1">
 
		<article id="corps11">
			<div>	
					<?php require_once '../Vue/Accueil/choixSaisie.php'; ?>
			</div>
		</article>
 
		<article id="corps12">
 
			<h1>Saisie</h1>
 
				<div id="monform">
					<?php require_once '../Controleur/saisieSortie.php'; //listeParcours.php : Fabrication de la requête SELECT?>
				</div>
 
		</article>
 
</section>

Code header.php :

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

1
2
3
4
5
6
7
8
	<nav id="navig">
            <ul>
				<li><a href='/Projet/index.php'>Accueil</a></li>
				<li><a href='<?php echo FORM_SAISIE; ?>'>Formulaires</a></li>
				<li><a href='/Projet/Vue/resultats.php'>Résultats</a></li>
				<li><a href='../projects/V3_parcours.php'>Parcours</a></li> 
			</ul>
	</nav>

**01001111** · 08/10/2015, 13h07

Déjà si tu veux utiliser des variables en $_GET pour modifier le contenu de la page, en faisant les includes correspondants il faut les sépcifier au préalable dans ton menu:

Code html :

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

1
2
3
4
5
6
7
8
<nav id="navig">
    <ul>
        <li><a href='index.php?p=accueil'>Accueil</a></li>
        <li><a href='index.php?p=formulaires''>Formulaires</a></li>
        <li><a href='index.php?p=resultats'>Résultats</a></li>
        <li><a href='index.php?p=parcours'>Parcours</a></li> 
    </ul>
</nav>

index.php ça suffit, c'est pas beau mais je t'expliquerai éventuellement ensuite comment le masquer avec mod_rewrite et un fichier .htaccess, si tu es sous apache.
ensuite je te conseille de retenir les variables de page courante en session:

Code php :

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
 
<?php
session_start(); // cette commande devra être appelée dans le fichier incluant à savoir index.php
// toujours dans index.php
if (isset($_GET['p'])) {
    $_SESSION['page'] = $_GET['p'];
} else {
    $_SESSION['page'] = 'accueil';
}
?>
/*
le reste du code index.php jusqu'à:
*/
<div id="contenu"> 
	<?php 
                 switch($_SESSION['page']) {
                         case "accueil":
                                   require_once ('/Vue/contenuIndex.php' );
                         break;
                         case "formulaires":
                                   require_once ('/Vue/contenuFormulaire.php' );
                         break;
                         case "resultats":
                                   require_once ('/Vue/contenuResultats.php' );
                         break;
                         case "parcours":
                                   require_once ('/Vue/contenuParcours.php' );
                         break;
                 }
         ?>
</div>
// puis la fin du fichier index.php avec le footer, le scripts (mieux à la fin parait-il) et ce que tu veux

**69Pierre** · 14/10/2015, 15h53

Bonjour.
J'ai essayé de rectifier et de modifier les chemins en conséquence.
Du coup, je ne sais plus où j'en suis de mon js qui ne "réagit" toujours pas à partir de l'appel de multisports.php
Pas de console log, lorsque je vais dans le debuggeur DOM windows, le $ et jquery sont en rouge.
Je ne sais plus où j'en suis.
Merci de m'aider à refactorer mon script et à faire fonctionner le jQuery.

Code index.php :

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
<?php
require_once ('./Config/constantes.php');
 
session_start(); // cette commande devra être appelée dans le fichier incluant à savoir index.php
// toujours dans index.php
if (isset($_GET['p'])) {
    $_SESSION['page'] = $_GET['p'];
} else {
    $_SESSION['page'] = 'accueil';
}
?>
 
<!DOCTYPE html>
<html>
 
<head>
<meta charset="utf-8" />
<title>Sports</title>
 
<meta charset="utf-8" />
		<link rel="stylesheet" type="text/css" href="<?php echo NORMALIZE2; ?>">
		<link rel="stylesheet" type="text/css" href="<?php echo STYLE2; ?>">
 
</head>
<body>	
<?php require_once ('./Vue/Accueil/header.php' ); ?>
 
 
<div id="contenu"> 
	<?php 
                 switch($_SESSION['page']) {
                         case "accueil":
                                   require_once ('/Vue/contenuIndex.php' );
                         break;
                         case "formulaires":
                                   require_once ('/Vue/contenuFormulaire.php' );
                         break;
                         case "resultats":
                                   require_once ('/Vue/contenuResultats.php' );
                         break;
                         case "parcours":
                                   require_once ('/Vue/contenuParcours.php' );
                         break;
                 }
         ?>
</div>
<!-- puis la fin du fichier index.php avec le footer, le script (mieux à la fin parait-il) et ce que tu veux-->
<?php require_once ('./Vue/Accueil/footer.php' ); ?>
<script src = "./Contenu/jquery.1.11.3.js"></script>
 
 <!--code js fourni par 01001111-->
<script src="./Contenu/htmlJsCss.js"></script>
 
<script src="./Contenu/choix_form.js"></script>
<script src="./Outils/afficher_cacher.js"></script>
</body>
</html>

Code choixSaisie :

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
<h1>Colonne de gauche</h1>
	<div>
		<li><a href="#" onclick="javascript:choix_form('./Controleur/saisieSortie.php');">saisieSortie</a> </li><br/>
		<li><a href="#" onclick="javascript:choix_form('./Controleur/saisieSortieBis.php');">saisieSortieBis</a> </li><br/>
		<li><a href="#" onclick="javascript:choix_form('./Controleur/saisieParcours.php');">saisieParcours</a></li><br/>
		<li><a href="#" onclick="javascript:choix_form('./Controleur/saisieParcoursBis.php');">saisieParcoursBis</a></li><br/>
		<li><a href="#" onclick="javascript:choix_form('./Controleur/velos.php');">Vélos</a></li><br/>
		<li><a  id = "lien" href="#" onclick="javascript:choix_form('./Controleur/multisports.php');">Multisports</a></li><br/>
	</div>
 
<?php require_once './Outils/calculette.html';?>
 
 
<script language="javascript" type="text/javascript" src="./Contenu/choix_form.js"></script>
 
<script language="javascript" type="text/javascript">
$(document).ready(function(){
       $(".lien").click(function() { window.location="./Controleur/multisports.php"; });
	   console.log('Dom est prêt!');
});
</script>

Code multisport.php :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
<?php
require_once '../CONFIG/constantes.php';
require_once MYSQL2;
require_once '../BDD/liste.php';
require_once '../BDD/liste_velos.php';
?>
	<script type="text/javascript"> console.log('Dom est prêt!');	</script>
		<h1>Liste des multisports</h1>
 
			<div >
 
				<?php require_once '../BDD/reqAfficheMultisports.php'; //listeVelos.php : Fabrication de la requête SELECT?>
			</div>

Code reqAfficheMultisports.php :

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
<script type="text/javascript"> alert('Dom est prêt!');	</script>
<script src = "\Projet\Serveur\data\localweb/Projet/Contenu/CRUD.js"></script>
 
<link rel="stylesheet" type="text/css" href="F:\Projet\Serveur\data\localweb/Projet/Contenu/CRUD.css">
 
 
<?php
require_once '../CONFIG/constantes.php';
require_once MYSQL2;
 
//print_r($_POST);
 
// Fabrication de la requête SELECT
$ma_requete = "SELECT * FROM multisports ORDER BY id_multisports; ";
 
 
// Connexion au serveur mysqli et selection de la base "ma_base"
$db_link = connect();
 
// Envoi de la requête
$rTables=mysqli_query($db_link,$ma_requete) or die(mysqli_error($db_link));
 
//affichage des données
		echo '<table>';
 
			echo '<tr><td>id_multisports</td><td>Multisport</td><td></td></tr>';
 
			while($Valeur = mysqli_fetch_assoc($rTables))
			{
 
					echo '<tr><td><a class="idModif" data-id="'.$Valeur['id_multisports'].'"href="#">'.$Valeur['id_multisports'].'</a></td>
					<td>'.$Valeur['nom_multisports'].'</td>
					<td><a href="../BDD/reqCRUD.php?action=D&table=multi&id='.$Valeur['id_multisports'].'">Supprimer</a></td></tr>';
		    // on affiche les informations de l'enregistrement en cours
 
			}
			echo '</table>';
				echo '	
							<form name="formulaire" method="post" action="../BDD/reqCRUD.php?action=C">
								<label id="msport" >Coucou</label>
								<input name="multi" type="text" id="multi" >
 
								<input type="submit" name="Submit" value="Envoyer">
 
							</form>
';
        echo "\n";
 
  // Déconnexion
  mysqli_close($db_link);
 
?>
 
<script>
$(document).ready(function(){ 
	$('body').on( 'click', '#msport', fonction(){
		alert('Qui est là ?');
	);
});
</script>

**69Pierre** · 15/10/2015, 14h50

Bonjour.
Je vois le bout du tunnel grâce à vous.
Je me suis fait un dessin pour voir comment se construisait mon DOM, à mesure des require_once.
j'ai mis tous mes .css et .js dans le document "père", celui qui a les premières balises, html et body notamment (index.php).
Seul le fichier CRUD.js est à la fin du dernier fichier php appelé afin que le jquery puisse influer sur le tableau qui vient d'être créé.
Je laisse le fil ouvert car je n'ai pas encore bien compris le script de 79 et comme j'ai tout chamboulé dans mon code je dois encore faire quelques modification.
A bientôt et encore merci.

**69Pierre** · 19/10/2015, 14h34

Bon encore merci.
Je vais clore cette discussion et en ouvrir 2 autres sur les derniers problèmes que je n'arrive pas à résoudre.
rafraichissement après modif de BDD et "objet" js que je veux voir arriver masqué et qui arrive visible pour l'instant.
Après réutilisation des solutions pour le reste de mon projet puis nettoyage et optimisation...
A bientôt.

jquery et php

jQuery

Discussions similaires

Partager

Partager