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