Récupérer un fichier html pour changer une div de la page en cours

**69Pierre** · 01/04/2015, 16h34

Bonjour.
J'ai fait un répertoire B où se trouve du texte dans des fichiers html.
Dans mon répertoire A, j'ai la page d'accueil de mon projet.

Je souhaite qu'à partir de mon fichier projet.php du répertoire A, un liste déroulante s'affiche avec les noms des fichiers du répertoire B et que lorsque je sélectionne un de ces choix, le contenu html de ce fichier s'affiche dans une div au bas de ma page web.

Est ce possible de manière "naturelle" (pas trop compliquée) de le faire en JS et comment ?
Ou, dois je déplacer ce message vers le forum Jquery ?
Merci de votre aide.

**headmax** · 01/04/2015, 19h23

J’opterais pour Jquery pour cette raison :

html

Code html :

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

<div onclick="chargemapage()" id="result">QUAND JE CLICK ICI JE CHARGE MA PAGE TEST.HTML QUI EST DANS LE DOSSIER AJAX ...</div>

js

Code :

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

1
2
3
function chargemapage(){
   $( "#result" ).load( "ajax/test.html" );
}

C'est juste une ébauche ...

**69Pierre** · 01/04/2015, 22h06

Merci de ton aide.
J'essaie de mettre en place.
Tu as mieux compris ma question que moi la réponse.
Il me reste cette deuxième question que je ne sais pas traiter.
Comment faire un menu déroulant avec tous les noms de fichiers d'un répertoire ?
Du coup, il faudrait délacer ce message vers le forum Jquery avant que je reprenne un carton jaune.
Comment fait-on ?

**69Pierre** · 02/04/2015, 12h09

Aïe, aïe, aïe.
Je ne suis pas arriver à faire ce que tu proposes.
Du coup, j'ai essayé d'apter mon code mais mon fichier se met bien sur la page web mais au début.

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
 
function afficher(){
	document.getElementById("champ_cache").style.display = "block";
				}
 
function cacher(){
	document.getElementById("champ_cache").style.display = "none";
				}	
 
/*AJAX*/
function loadFile(file) {
 
    var xhr = new XMLHttpRequest();
 
    // On souhaite juste récupérer le contenu du fichier, la méthode GET suffit amplement :
    xhr.open('GET', file);
 
xhr.addEventListener('readystatechange', function() { // On gère ici une requête asynchrone
 
    if (xhr.readyState == 4 && xhr.status == 200) { // Si le fichier est chargé sans erreur
 
        document.getElementById('fileContent').innerHTML =  xhr.responseText ; // On l'affiche !
 
    } else if (xhr.readyState == 4 && xhr.status != 200) { // En cas d'erreur !
 
        alert('Une erreur est survenue !\n\nCode :' + xhr.status + '\nTexte : ' + xhr.statusText);
 
    }
 
}, false);
 
    xhr.send(null); // La requête est prête, on envoie tout !
 
}
 
 
 
function init(file) { // Comme d'habitude, une IIFE pour éviter les variables globales
    document.getElementById("champ_cache").style.display = "none";
    var inputs = document.getElementsByName('liste'),
        inputsLen = inputs.length;
 
    for (var i = 0 ; i < inputsLen ; i++) {
 
        inputs[i].addEventListener('click', function() {
            loadFile(this.value); // À chaque clique, un fichier sera chargé dans la page
        }, false);
 
    }
 
	loadFile("../MYSQL/requete_parcours.php?param1=T&param2=N");
 
};	
 
function chargemapage(file){ // Comme d'habitude, une IIFE pour éviter les variables globales
    document.getElementById("champ_cache").style.display = "none";
    var inputs = document.getElementsByName('evol'),
        inputsLen = inputs.length;
 
    for (var i = 0 ; i < inputsLen ; i++) {
 
        inputs[i].addEventListener('click', function() {
            loadFile(this.value); // À chaque clique, un fichier sera chargé dans la page
        }, false);
 
    }
 
	loadFile(file);
 
};

Code html :

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

	<div onclick="chargemapage('../evolutions/evol_010415.html')" id="evol" name="evol">EVOLUTION</div>

**headmax** · 09/04/2015, 05h49

Pour placer ensuite ta page tu dois mettre un id="MaDivQuiContientLaPage" ou une class="MaDivQuiContientLaPage" pour ciblé ta DIV lorsque tu lui appliquera un Style CSS.
Ici il faut ajuster.

Code css :

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

1
2
3
4
5
6
7
8
9
10
 
#MaDivQuiContientLaPage{
    <!-- Met ici le style CSS pour adapter ta DIV sur la page -->
 
}
<!-- OU -->
.MaDivQuiContientLaPage{
    <!-- Met ici le style CSS pour adapter ta DIV sur la page -->
 
}

Code html :

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

1
2
 
	<div id="MaDivQuiContientLaPage" onclick="chargemapage('../evolutions/evol_010415.html')" id="evol" name="evol">EVOLUTION</div>

**69Pierre** · 10/04/2015, 22h04

Merci de m'aider.
Mon texte n'est toujours en fin de page. Je pense que mon js qui contient le JQuery et qui fait plusieurs choses est mal programmé pour chargemapage().

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
 
function afficher(){
	document.getElementById("champ_cache").style.display = "block";
				}
 
function cacher(){
	document.getElementById("champ_cache").style.display = "none";
				}	
 
/*AJAX*/
function loadFile(file) {
 
    var xhr = new XMLHttpRequest();
 
    // On souhaite juste récupérer le contenu du fichier, la méthode GET suffit amplement :
    xhr.open('GET', file);
 
xhr.addEventListener('readystatechange', function() { // On gère ici une requête asynchrone
 
    if (xhr.readyState == 4 && xhr.status == 200) { // Si le fichier est chargé sans erreur
 
        document.getElementById('fileContent').innerHTML =  xhr.responseText ; // On l'affiche !
 
    } else if (xhr.readyState == 4 && xhr.status != 200) { // En cas d'erreur !
 
        alert('Une erreur est survenue !\n\nCode :' + xhr.status + '\nTexte : ' + xhr.statusText);
 
    }
 
}, false);
 
    xhr.send(null); // La requête est prête, on envoie tout !
 
}
 
 
 
function init(file) { // Comme d'habitude, une IIFE pour éviter les variables globales
    document.getElementById("champ_cache").style.display = "none";
    var inputs = document.getElementsByName('liste'),
        inputsLen = inputs.length;
 
    for (var i = 0 ; i < inputsLen ; i++) {
 
        inputs[i].addEventListener('click', function() {
            loadFile(this.value); // À chaque clique, un fichier sera chargé dans la page
        }, false);
 
    }
 
	loadFile("../MYSQL/requete_parcours.php?param1=T&param2=N");
 
};	
 
function chargemapage(file){ // Comme d'habitude, une IIFE pour éviter les variables globales
    document.getElementById("champ_cache").style.display = "none";
    var inputs = document.getElementsByName('evol'),
        inputsLen = inputs.length;
 
    for (var i = 0 ; i < inputsLen ; i++) {
 
        inputs[i].addEventListener('click', function() {
            loadFile(this.value); // À chaque clique, un fichier sera chargé dans la page
        }, false);
 
    }
 
	loadFile(file);
 
};

**69Pierre** · 17/04/2015, 12h26

Bonjour.
A la relecture,
je m'aperçois que je n'ai pas compris le

Code :

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

ajax/test.html

Ma div à ajouter au click se trouve ../evolutions/evol_170415.html par rapport au .js contenant la fonction chargemapage() et au pHp où chargemapage() est appelée.

**69Pierre** · 20/04/2015, 21h39

Bon.
Je n'ai rien compris. Est ce que quelqu'un peut m'aider à intégrer cette div dans mon fichier js.html.
J'ai refait un exemple simple que je vais commenter pour m'en souvenir.
Ce que je veux mettre dans la div du fichier jsdiv.html, c'est le contenu du fichier evol_170415.html qui se trouve dans le répertoire : ../evolutions
La fonction chargemapage se trouve dans le fichier onload.js qui est dans le répertoire JS

jsdiv.html

Code html :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<!DOCTYPE html>
<html lang="fr">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
 
	<div>
		<form action="">
			<p><label for=""></label><input type="text"></p>
			<p><label for=""></label><input type="text"></p>
			<p><label for=""></label><input type="text"></p>
			<p><label for=""></label><input type="text"></p>
			<p><label for=""></label><input type="text"></p>
 
			<input type="text" name="table" />
			<input type="submit" value="valider"/>
		</form>
	</div>
 
	<div id="evol" onclick="chargemapage()"  name="evol">
		EVOLUTION
	</div>
</body>
	<script src="../JS/onload.js"></script>
</html>

onload.js

Code :

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

1
2
3
function chargemapage(){
   $( "#evol" ).load( '../evolutions/evol_170415.html' );
};

**69Pierre** · 23/04/2015, 21h53

Bonsoir.
Je n'y arrive pas.
C'est mon jquery qui n'a pas ses bibliothèques, j'imagine.
Mes trois fichiers :
le DOM a modifier :

Code html :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<!DOCTYPE html>
<html lang="fr">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
 
	<script type="text/javascript"></script>
</head>
<body>
 
	<div>
		<form action="">
			<p><label for=""></label><input type="text"></p>
			<p><label for=""></label><input type="text"></p>
			<p><label for=""></label><input type="text"></p>
			<p><label for=""></label><input type="text"></p>
			<p><label for=""></label><input type="text"></p>
 
			<input type="text" name="table" />
			<input type="submit" value="valider"/>
		</form>
	</div>
 
	<div id="evol" onclick="chargemapage();">
		EVOLUTION
	</div>
 
</body>
	<script src="../JS/onload.js"></script>
</html>

Celui qui contient la fonction (onload.js):

Code :

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

1
2
3
function chargemapage(){
   $( "#evol" ).load( "../evolutions/evol_170415.html" );
}

le html à afficher (evol_170415.html) :

Code html :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<h1 id="dernières-évolutions">Dernières évolutions</h1>
<p>30 mars 2015 : empêcher les doublons sur la requête pour remplir les tables parcours et sorties.</p>
<h1 id="en-cours">En cours</h1>
<p>Faire un menu déroulant avec les fichiers du répertoires evolutions qui intégre ce code html dans la page formulaireV5.1.php  <br>
<a href="http://www.developpez.net/forums/d1510157/webmasters-developpement-web/javascript-ajax-typescript-dart/javascript/javascript-jquery-recupererun-fichier-html-changer-div-page-cours/#post8193386">Forum developpez</a></p>
<h1 id="evolutions-prévues">Evolutions prévues</h1>
<p>(<a href="http://jean.yard.pagesperso-orange.fr/sitelycee/cours/js/_Js.html?Premireversionlesbases.html">http://jean.yard.pagesperso-orange.fr/sitelycee/cours/js/_Js.html?Premireversionlesbases.html</a>&gt;Lycée Paul Héroult</p>
<p>[finir tout les champs pour remplir les bdd et améliorer le message de validation](<a href="http://jean.yard.pagesperso-orange.fr/sitelycee/cours/js/_Js.html?Premireversionlesbases.html">http://jean.yard.pagesperso-orange.fr/sitelycee/cours/js/_Js.html?Premireversionlesbases.html</a>&gt;Lycée Paul Héroult</p>
<p>faire les 2 autres tables</p>
<p>ne plus revenir sur saisie,php mais sur le formulaire de saisi en ajoutant les lignes saisies en dessous du formulaire</p>
<p><strong>une fichier php par formulaire avec la requête SQL en fin de fichier</strong>, un appel aux formulaires par boutons qui recharge cette partie de la page et un formulaire au chargement initial de la page.</p>
<p>Interdire les doublons au niveau de la BDD aussi.</p>
<h1 id="problèmes-rencontrés">Problèmes rencontrés</h1>
<p>(<a href="http://jean.yard.pagesperso-orange.fr/sitelycee/cours/js/_Js.html?Premireversionlesbases.html">http://jean.yard.pagesperso-orange.fr/sitelycee/cours/js/_Js.html?Premireversionlesbases.html</a>&gt;Lycée Paul Héroult</p>
<p>[Installation d’Emmet sur Sublime 2 : voir Forum ](<a href="http://jean.yard.pagesperso-orange.fr/sitelycee/cours/js/_Js.html?Premireversionlesbases.html">http://jean.yard.pagesperso-orange.fr/sitelycee/cours/js/_Js.html?Premireversionlesbases.html</a>&gt;Lycée Paul Héroult</p>
<p><a href="http://www.developpez.net/forums/d1510111/environnements-developpement/autres-edi/sublime-text-2-emmet/">Devellopez.com</a></p>
<blockquote>
  <p>Written with <a href="https://stackedit.io/">StackEdit</a>.</p>
</blockquote>

Erreur Firebug

ReferenceError: $ is not defined
http://localhost:8080/V5.1/JS/onload.js
Line 2

**NoSmoking** · 24/04/2015, 14h27

Bonjour,

Erreur Firebug

ReferenceError: $ is not defined
http://localhost:8080/V5.1/JS/onload.js
Line 2

Il te faut charger la bibliothèques jQuery pour pouvoir l'utiliser.

Comment installer la bibliothèque jQuery ?

**69Pierre** · 24/04/2015, 21h16

Super.
Merci.
Je chercherai comment mettre ces bibliothèques en dur sur mon micro pour travailler hors connexion.
Pour finir mon truc, comment est il possible de récupérer tous les noms de fichiers html d'un répertoire, d'en faire une liste déroulante qui affichera le fichier html sélectionné.

Récupérer un fichier html pour changer une div de la page en cours

JavaScript

Discussions similaires

Partager

Partager