Discussion :

[69Pierre]

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]

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]

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]

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]

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]

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