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

Version imprimable

01/04/2015, 16h34
69Pierre

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

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.
01/04/2015, 19h23
headmax
J’opterais pour Jquery pour cette raison :

html

Code:

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

js
Code:

1 2 3 function chargemapage(){ $( "#result" ).load( "ajax/test.html" ); }
C'est juste une ébauche ...
01/04/2015, 22h06
69Pierre

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 ?

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:

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:

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

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:

1 2 3 4 5 6 7 8 9 10 #MaDivQuiContientLaPage{  }  .MaDivQuiContientLaPage{  }
Code:

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

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:

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);
 
};

17/04/2015, 12h26
69Pierre

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

Code:

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.

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:

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:

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

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:

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:

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

le html à afficher (evol_170415.html) :

Code:

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

24/04/2015, 14h27
NoSmoking
Bonjour,
Citation:
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.
:faq: Comment installer la bibliothèque jQuery ?
24/04/2015, 21h16
69Pierre

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