jquery et php

Version imprimable

jquery et php

Bonjour.
Je ne sais pas si là ou dans le forum php que je dois déposer ce message.
Je n'ai pas trouvé de forum jquery mais c'est là que se situe mon problème.
Je veux que mon fichier php qui envoie un tableau et un formulaire sur une page web envoi aussi une fonction jquery qui modifie les données de mon bouton valider en cliquant sur une valeur du tableau.
Je ne sais si je dois faire ça dans un echo ou après la balise ?> de php.
De toutes façons, je n'arrive pas au résultat escompté.
fichier php :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
<?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 id="idModif" 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">
								<td id="msport" ><input name="multi" type="text" id="multi" ></td>
 
								<td><input type="submit" name="Submit" value="Envoyer"></td>
 
							</form>
';
       echo "\n";
 
  // Déconnexion
  mysqli_close($db_link);
 
  echo 
 
?>
 
 
 
<style type="text/css">
table {
margin:auto;
width:80%;
border-collapse:collapse;
margin:20px 0;
}
td {
text-align : center;
width : 10px;
border:1px solid #000;
}
th, table {
border:2px solid #000;
}
</style>

jquery a intégrer :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
 
<script src="../Contenu/jquery.1.11.3.js"></script>
	<script>
	$(document).ready(function(){ 
			$('#msport').text("Modifier sport : ");
 
			//../BDD/reqCRUD.php?action=U&table=multi&id='.$Valeur['id_multisports'].'
			$('#idModif').text().click(function () {
            $('#msport').replaceWith("Modifier sport : ");
			});
        });
	</script>

bonsoir

.text().click() n'existe pas à ma connaissance en jquery
Il faut aussi mettre un lien sur le titre, les gens ne vont pas généralement cliquer sur un id mais plutôt un titre.
Et les id servent à identifier les éléments par chaine unique, si l'occurence d'id existe plusieurs fois, ça ne sortira que la première.
Enfin ici un evènement onclick est plus simple que la gestion jquery.
donc
Code:

1 2 3 4 5 6 7 8 while($Valeur = mysqli_fetch_assoc($rTables)) { echo '<tr><td><a class="modif" href="#" onclick="modif(\''.$Valeur['nom_multisports'].'\');">'.$Valeur['id_multisports'].'</a></td><td><a class="modif" href="#" onclick="modif(\''.$Valeur['nom_multisports'].'\');">'.$Valeur['nom_multisports'].'</a></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 }
et
Code:

1 2 3 4 5 6 7 $(document).ready(function(){ $('#msport').text("Modifier sport : "); }); function modif(nom) { $('#msport').text("Modifier sport : "+nom); }

24/09/2015, 14h13
69Pierre

Bonjour.
Merci de m'aider mais du coup je fais quoi, je n'y arrive pas.
Ok pour class et non id.
24/09/2015, 14h38
01001111

remplacez la boucle while par celle que vous ai fournie en premier,
et le contenu à l'intérieur de la balise script par celui fourni en second.
24/09/2015, 15h00
69Pierre

OK, j'ai compris, merci.
24/09/2015, 16h41
69Pierre

Désolé.
Mon problème vient d'ailleurs.
j'ai essayé ta proposition et mon jquery directement dans un fichier html, ça fonctionne.
dans mon projet, ça ne marche pas, j'ai maintenant lorsque je vais dans l’onglet HTML de Firebug :

Code:

Reload the page to get source for: http://localhost/Projet/Contenu/CRUD.js

alors que le fichier jquery (celui de la bibliothèque) est chargé (je le vois dans l'onglet html) et que mon script se trouve dans un fichier js à côté de celui-ci.
Que veut dire ce message ?
Que le fichier n'est pas trouvé là où je l'ai spécifié ?
Pourquoi recharger la page ?
Je ne comprends pas.
C'est vrai que l'arborescence des répertoires et fichiers de mon projet se complique mais où chercher ?
24/09/2015, 21h50
01001111

ça peut venir de plusieurs causes:
soit le fichier est inaccessible: il a été déplacé ou il est au bon endroit mais n'est pas accessible en lecture
soit le fichier est en cache et firebug n'arrive pas à en afficher la source bien qu'il soit utilisé par le navigateur.

perso, je me passe de firebug, un test à faire est de voir si la ressource est aussi affichée indisponible par la vraie console de ton navigateur.
25/09/2015, 15h35
69Pierre
Bonjour.
J'ai changé mon fusil d'épaule.
Je charge tous les js et jquery sur la page d'accueil (anciennement à chaque "page" php).
Du coup je vois mes scripts jquery mais j'ai toujours l'erreur 300 dans la console et ça ne marche pas.
oulà, j'ai du mal avec la console, je ne retrouve plus mon erreur mais ça ne marche pas pour autant. Je galère.
J'ai plusieurs "vue" qui s'appelle en cascades avec des require_once et des href="#" onclick="fichier.php"
Je ne sais pas où placer mes :
Code:

1 2 <script src="../Contenu/jquery.1.11.3.js"></script> <script src="../Contenu/CRUD.js"></script>
, uniquement dans le php qui va générer la page web qui va en avoir besoin ?

Dernière questions : je souhaite changer avec jquery l'action de mon form en cliquant sur un lien class = "idModif" et là pareil, groose galère.
25/09/2015, 16h59
01001111

A moins de faire une navigation en ajax,
supprimer les scripts des pages qui en dépendent n'est pas une option.

il faut peut-être revoir vos bases sur le fonctionnement html.

c'est en plus surprenant que vous ayez cette erreur; elle indique au contraire que le même fichier se situe plusieurs fois dans les sources avec des versions différentes
300= Multiple Choices L’URI demandée se rapporte à plusieurs ressources
25/09/2015, 17h04
69Pierre

Mince, je modifiais mon message précédent...
Pourquoi les bases html ?
25/09/2015, 17h08
Invité

Bonjour,

Si tu pouvais ré-expliquer clairement (= étape par étape) ce que tu cherches à faire, on comprendrait peut-être mieux.
25/09/2015, 17h38
69Pierre
Effectivement, d'ailleurs une fois que l'on est capable de bien expliquer un problème, on y a à moitié répondu.
Les noms que je vais donner ne sont pas ceux de mon projet mais ça me paraît plus clair comme ça.

J'ai une page accueil.php composée de 2 parties corps1 (une colonne à gauche) et corps2 le reste du body.

En cliquant sur des liens situés sur corps1, on change la partie corps2 (avec js onclick qui charge un fichier corps2.php).

La partie corps2 affiche un tableau qui affiche les élément d'une table de la bdd.
Dans cette table, il n'y a que les id et les noms, c'est cela que j'affiche.

J'ai ajouter une colonne à droite qui met des supprimer cliquable qui font les DELETE de l'élément de la ligne concernée.

En dessous de ce tableau (et pas à l'intérieur, je me suis fait avoir une fois), il y a un formulaire qui fait les INSERT de nouveaux éléments dans la table.
Tout cela fournit le résultat attendu.

Mon soucis le UPDATE.
Je voudrais en utilisant jquery (pour mettre en pratique la formation que j'ai eu) qu'en cliquant sur un des élément du tableau (l'id) le formulaire change (son label et son action) et que la valeur à modifier se mette dans le champ du input pour être modifiée.

PS1 : le changement du label fonctionne sur un fichier html de tests (pas sur mon projet) que j'ai fait avec le .js (voir plus bas) et le .css qui correspondent.
PS2 : merci de ta patience.
Code:

1 2 3 4 5 6 7 8 $(document).ready(function(){ $('#msport').html('Nouveau sport : '); $('.idModif').on('click',function(){ $('#msport').html('Modifier sport : '); }); });

Bonjour,
voici une base de travail :
Code:

1 2 3 4 5 6 7 8 9 while($Valeur = mysqli_fetch_assoc($rTables)) { echo ' <tr> <td><a class="idModif" data-id="'.$Valeur['id_multisports'].'"href="#">'.$Valeur['nom_multisports'].'</a></td> <td><a href="../BDD/reqCRUD.php?action=D&table=multi&id='.$Valeur['id_multisports'].'">Supprimer</a></td> </tr> '; }
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 $(document).ready(function(){ $('#msport').html('Nouveau sport : '); // modification d'une ligne au clic $(body).on('click', '.idModif', function(){ // $(this) va cibler le lien <a> cliqué var lg_id = $(this).attr('data-id'); // id de la ligne à modifier // cet id devra être intégré dans le formulaire, dans un input type hidden. var lg_nom = $(this).html(); $('#msport').html( 'Modifier sport : '+lg_nom ); // ICI, on pourrait faire un appel Ajax vers un fichier PHP auquel on transmet l'id, // et qui va renvoyer le formulaire complet, // ou simplement les différentes données à afficher dans le formulaire }); });
Explication de $(body).on('click', '.idModif', function(){ :

Si j'ai bien compris, la partie <table> est générée dynamiquement au clic dans un menu.
Donc, les lignes (avec la class "idModif") n'existent pas dans le DOM.
Or, il faut "se raccrocher" à un élément DÉJÀ présent dans le DOM.
$(body) par exemple.
Mais on peut prendre un id de div fixe plus proche de l'élement à cibler (dans le sens arborescence) : $('#corps2') ?

28/09/2015, 11h11
69Pierre
Merci.
Effectivement, j'essaie d'influer sur des éléments qui ne sont pas encore chargés.
J'essaie de comprendre.
J'ai un autre soucis, je ne sais pas comment faire "mon appel" à <script src = "../Contenu/CRUD.js"></script> dans mon fichier php. Est ce que je dois faire un écho ou le mettre après les balises <?php ?> ?
J'aimerai trouver un moyen simple de voir si mon document est ready ou pas (j'ai comme un doute) mettre quelque chose de simple dans :
Code:

1 2 3 4 $(document).ready(function(){ });
28/09/2015, 17h11
69Pierre
Dit différemment mon :
Code:

1 2 3 4 $(document).ready(function(){ alert('Dom est prêt!'); });
ne renvoie rien.

Voilà ce que je vois dans firebug / html / editer (mes nombreux essais avec des alert, des fonctions, etc) :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
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
 
		<nav id="navig">
            <ul>
				<li><a href="/Projet/index.php">Accueil</a></li>
				<li><a href="/Projet/Vue/formulaire_saisies.php">Formulaires</a></li>
				<li><a href="/Projet/Vue/resultats.php">Résultats</a></li>
				<li><a href="../projects/V3_parcours.php">Parcours</a></li> 
 
				<li><a href="../projects/V3_creer-modif_bdd.php">Creer-Modif-BDD</a></li>
				<li><a href="/Projet/Tests/test_menuDeroulantItineraires.php">Tests</a></li>
				<li><a href="/Projet/traitCSV-txt/ouvrirFichierParPhp.php">csvToArray</a></li>
				<li><a href="/Projet/traitCSV-txt/fonctions/textToPhp.php">textToPhp</a></li>
				<li><a href="/Projet/traitCSV-txt/fonctions/textToPhp2.php">textToPhp2</a></li>
			</ul>
	</nav>
 
<footer>
	Sports Version V.6 2015 : formulaire saisi et affichage des parcours dans la  BDD<pre>	Dernière mise è jour données le 14 mars 2015
</pre></footer>
<script src="../contenu/jqueryMini.1.11.3.js"></script>	
 
 
 
 
<meta charset="utf-8">
<title>Sports</title>
 
<meta charset="utf-8">
		<link rel="stylesheet" type="text/css" href="/Projet/Contenu/normalize.css">
		<link rel="stylesheet" type="text/css" href="/Projet/Contenu/styles.css">
 
 
 
 
 
 
 
<section id="corps1">
 
		<article id="corps11">
			<div>	
					<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 href="#" onclick="javascript:choix_form('../Controleur/multisports.php');">Multisports</a></li><br>
 
	</div>
 
						<script type="text/javascript">
 
function reset1()
{
	//this.form.reset();
	document.getElementById('valeur1').value="";
    document.getElementById('valeur2').value="";
    document.getElementById('valeur3').value="";
    document.getElementById('valeur4').value="";
    document.getElementById('valeur5').value="";
 
	document.getElementById('valeur1').style.backgroundColor='#fff';
    document.getElementById('valeur2').style.backgroundColor='#fff';
    document.getElementById('valeur3').style.backgroundColor='#fff';
    document.getElementById('valeur4').style.backgroundColor='#fff';
    document.getElementById('valeur5').style.backgroundColor='#fff';
	document.getElementById('messageerreur').innerHTML = "";
}
 
function moyenneh()
{
    var kms=document.getElementById('valeur1').value;
    var my=document.getElementById('valeur2').value;
    var hh=document.getElementById('valeur3').value;
    var mm=document.getElementById('valeur4').value;
    var ss=document.getElementById('valeur5').value;
 
    document.getElementById('valeur1').style.backgroundColor='#fff';
    document.getElementById('valeur2').style.backgroundColor='#fff';
    document.getElementById('valeur3').style.backgroundColor='#fff';
    document.getElementById('valeur4').style.backgroundColor='#fff';
    document.getElementById('valeur5').style.backgroundColor='#fff';
 
    //console.log("kms : "+kms+", my : "+my+", hh : "+hh+", mm : "+mm+" et ss : "+ss);
 
    if ((kms == "")&&(my == "")&&(hh == "")&&(mm == "")&&(ss == ""))
    {
        document.getElementById('valeur1').style.backgroundColor='#FF0000';
        document.getElementById('valeur2').style.backgroundColor='#FF0000';
        document.getElementById('valeur3').style.backgroundColor='#FF0000';
        document.getElementById('valeur4').style.backgroundColor='#FF0000';
        document.getElementById('valeur5').style.backgroundColor='#FF0000';
		msgerreur = "Aucun champ n'est pas rempli";
		//	console.log(msgerreur);
		document.getElementById('messageerreur').innerHTML = msgerreur;
 
    }
	else if ((kms !== "")&&(my !== "")&&((hh !== "")||(mm !== "")||(ss !== "")))
    {
        document.getElementById('valeur1').style.backgroundColor='#FF0000';
        document.getElementById('valeur2').style.backgroundColor='#FF0000';
        document.getElementById('valeur3').style.backgroundColor='#FF0000';
        document.getElementById('valeur4').style.backgroundColor='#FF0000';
        document.getElementById('valeur5').style.backgroundColor='#FF0000';
		msgerreur = "Tu sais déjà tout!!!!";
		//	console.log(msgerreur);
		document.getElementById('messageerreur').innerHTML = msgerreur;
 
    }
    else if ((hh == "")&&(mm == "")&&(ss == "")&&(my == ""))
    {
 
        document.getElementById('valeur2').style.backgroundColor='#FF0000';
        document.getElementById('valeur3').style.backgroundColor='#FF0000';
        document.getElementById('valeur4').style.backgroundColor='#FF0000';
        document.getElementById('valeur5').style.backgroundColor='#FF0000';
		msgerreur = "Entrez une moyenne ou une durée";
		//	console.log(msgerreur);
		document.getElementById('messageerreur').innerHTML = msgerreur;
 
    }
    else if ((kms == "")&&(my == ""))
    {
        document.getElementById('valeur1').style.backgroundColor='#FF0000';
        document.getElementById('valeur2').style.backgroundColor='#FF0000';
		msgerreur = "Entrez une distance ou une moyenne";
		//	console.log(msgerreur);
		document.getElementById('messageerreur').innerHTML = msgerreur;
    }
    else if ((kms == "")&&(hh == "")&&(mm == "")&&(ss == ""))
    {
        document.getElementById('valeur1').style.backgroundColor='#FF0000';
        document.getElementById('valeur3').style.backgroundColor='#FF0000';
        document.getElementById('valeur4').style.backgroundColor='#FF0000';
        document.getElementById('valeur5').style.backgroundColor='#FF0000';
		msgerreur = "Entrez une distance ou une durée";
		//	console.log(msgerreur);
		document.getElementById('messageerreur').innerHTML = msgerreur;
    }
    else if (kms == "")
    {
        var res = (((3600*hh)+(60*mm)+(1*ss))*my)/3600;
        console.log("Calcul 1 : "+res);
        document.getElementById('valeur1').value = res;
        document.getElementById('valeur1').style.backgroundColor='#CCFF33';
		document.getElementById('messageerreur').innerHTML = "";
    }
    else if (my == "")
    {
        console.log(kms+" X 3600 = "+(kms*3600));
        console.log((3600*hh)+" + "+(60*mm)+" + "+(ss)+" = "+((3600*hh)+(60*mm)+(ss*1)));
        res = (kms*3600)/((3600*hh)+(60*mm)+(ss*1));
		console.log("Calcul 2 : "+((kms*3600)/((3600*hh)+(60*mm)+(ss*1))));
		document.getElementById('valeur2').value = res;
        document.getElementById('valeur2').style.backgroundColor='#CCFF33';
		document.getElementById('messageerreur').innerHTML = "";
    }
    else if ((hh == "")&&(mm == "")&&(ss == ""))
    {
        var tpsS = (kms*3600)/my;
        var h = (tpsS-(tpsS%3600))/3600;
        var s0 = (tpsS%3600)%60;
        var m = (tpsS-(h*3600)-s0)/60;
        var s = Math.round(s0);
 
        console.log("Calcul 3 : "+h+" heures, "+m+" minutes, "+s+" secondes.");
		document.getElementById('valeur3').value = h;
		document.getElementById('valeur4').value = m;
		document.getElementById('valeur5').value = s;
		document.getElementById('valeur3').style.backgroundColor='#CCFF33';
		document.getElementById('valeur4').style.backgroundColor='#CCFF33';
		document.getElementById('valeur5').style.backgroundColor='#CCFF33';
		document.getElementById('messageerreur').innerHTML = "";
    }
    else { console.log("Et merde!");}
}
 
 
</script>
 
<div>
<br><br><br>
<div>
<input id="calculette" value="calculette" onclick="afficher_cacher('calc')" type="button">			
</div>
 
<div style="visibility: hidden;" id="calc" type="visible">
<fieldset>
<form name="form" method="post" action="">
<label for="valeur1">Distance : </label>
<input id="valeur1" name="valeur1" size="2" type="text">
<p></p> 
 
Temps :
<p></p> 
 
<input id="valeur3" name="valeur3" size="2" type="text">
<label for="valeur3"> heures, </label>
 
<input id="valeur4" name="valeur4" size="2" type="text">
<label for="valeur4"> minutes,</label>
 
<input id="valeur5" name="valeur5" size="2" type="text">
<label for="valeur5"> secondes.</label>
<p></p>
 
<label for="valeur2">Moyenne horaire : </label>
<input id="valeur2" name="valeur2" size="2" type="text">
 
<p></p>
 
<input value="moyenneh" onclick="moyenneh()" type="button">
<input value="reset" onclick="reset1();" type="button">
</form>
 
<b><div id="messageerreur"></div></b>
 
</fieldset>
</div>
</div>
 
<script src="/Projet/Contenu/choix_form.js"></script>
<script src="../Outils/afficher_cacher.js"></script>
 
   	<!--         <ul>
				<li><a href=\"#\" onclick="choix_form(file)">Nouvelle sortie</a></li>
				<li><a href=\"#\" onclick="choix_form(file)">Nouveau parcours</a></li>
				<li><a href=\"#\" onclick="choix_form(file)">Nouvelle sortie bis</a></li>
				<li><a href=\"#\" onclick="choix_form(file)">Nouveau parcours bis</a></li> 
			</ul>
<script language="javascript" type="text/javascript" src="../Contenu/choix_form.js">
 
<a href="#" onclick="javascript:choix_form('../Controleur/saisieSortie.php?action=saisieSortie');">saisieSortie</a> 
-->
 
 
 
 
 
 
 								</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">	
		<h1>Liste des multisports</h1>
 
			<div>
 
				<table><tbody><tr><td>id_multisports</td><td>Multisport</td><td></td></tr><tr><td><a class="idModif" data-id="1" href="#">1</a></td>
					<td>Triathlon</td>
					<td><a href="../BDD/reqCRUD.php?action=D&amp;table=multi&amp;id=1">Supprimer</a></td></tr><tr><td><a class="idModif" data-id="2" href="#">2</a></td>
					<td>Natation - V�lo</td>
					<td><a href="../BDD/reqCRUD.php?action=D&amp;table=multi&amp;id=2">Supprimer</a></td></tr></tbody></table>	
							<form name="formulaire" method="post" action="../BDD/reqCRUD.php?action=C">
								<label id="msport">Coucou</label>
								<input name="multi" id="multi" type="text">
 
								<input name="Submit" value="Envoyer" type="submit">
 
							</form>
 
<script> 		alert('Dom est prêt!');	
</script><script> alert('Dom est prêt!');	</script>
<!--<link rel="stylesheet" type="text/css" href="../Contenu/CRUD.css">
<div>
<script src = "../Contenu/jquery.1.11.3.js"></script>
<script src = "../Contenu/CRUD.js"></script>
 
 
			<script src = "../Contenu/jquery.1.11.3.js"></script>
<script> 		alert('Dom est prêt!');	
$('tr:nth-child(even)').addClass('style1');
			$('tr:nth-child(odd)').addClass('style2');</script>
</div>
			</div>
 
 
--></div></div>
 
		</article>
 
</section>

29/09/2015, 12h02
69Pierre

Bonjour.
avec l'aide de mes collègues, j'ai trouvé le problème.
La partie de page sur laquelle je travaille est appelée par :

Code:

monform.innerHTML = xhr_object.responseText;

et le innerHTML lit mes script comme s'il n'y avait que du html, donc ne lit pas le js.
Que faire ?

l'ajout d'une balise script à la volée en innerHTML ne garantit pas l'éxécution du script. La plupart du temps ça échoue.
il faut passer par document.createElement en ayant pris le soin de parser (découper) le html au préalable.

un exemple (un peu compliqué désolé mais facile à utiliser par la suite - voir utilisation en bas):

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
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
 
                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:
                htmlJsCss(xhr_object.responseText, [monform]);

29/09/2015, 15h13
69Pierre

Merci pour ce long script qui doit résoudre mes problèmes.
l'idée est de rendre le js interprétable comme du js ?
Si je mets ton script dans un fichier htmlJsCss.js, où dois l'appeler ?
comment inclure htmlJsCss(xhr_object.responseText, [monform]); pour que monform.innerHTML = xhr_object.responseText; soit vue comme du html contenant des balises script, ...
Je n'arrive pas à utiliser ton outil.
29/09/2015, 15h28
01001111

Code:

htmlJsCss(xhr_object.responseText, [monform]);

remplace

Code:

monform.innerHTML = xhr_object.responseText;

tu dois l'appeler en lieu et place de l'application sur innerHTML
ça devrait fonctionner, non testé dans ce contexte, mais j'ai corrigé des bugs dus à la transcription des fonctions, qui viennent de mes outils, et qui sont testées.
29/09/2015, 15h59
69Pierre

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

Code:

<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.

une erreur dans la console?

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

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
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:

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.

Code:

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]

29/09/2015, 17h38
01001111

pas de problème grave ici,
tu appelles une page contenant un html et un body?
29/09/2015, 18h51
Invité
Bonjour,

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

1/ On peut lire dans le tout 1er message :
Citation:
Envoyé par 69Pierre

jquery a intégrer :

Code:

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... :nono:
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:

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:

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

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

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:

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:

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:

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:

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:

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>

05/10/2015, 18h33
Invité
Bonjour,

1/

Citation:

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... :fessee:

2/

Citation:

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:

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>... :koi:

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.

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:

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:

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>

07/10/2015, 12h37
Invité
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. :koi:
- 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)

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:

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:

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:

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:

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>

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:

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:

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

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:

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:

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:

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:

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>

15/10/2015, 14h50
69Pierre

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.
19/10/2015, 14h34
69Pierre

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.