Impossible de loader une page html dans une sous section de ma page web

Bonjour,

Actuellement, j'ai mon site web : mon site

Tout va bien sur Chrome, firefox mais biensur IE mes appelles fetch ne fonctionne pas...

J'ai donc commencé à regarder et comprendre JQuery...

J'ai réussi à récrire deux de mes trois functions

Si je dosi vous montez tout le code, on sera encore ici demain matin lol donc pour l'instant je vais vous montrez le code nécessaire à la compréhension de mon bug....

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
 
<div class="middle">  
                <p class="desktop" id="hautPageDesktop"></p>
                <div class="header">
                    <div><a href="pageAccueuil/partie_accueuil.html" id="test">Accueil</a></div>
                    <div><a href="pageAccueuil/partie_projets.html">Projets</a></div>
                    <div><a href="pageAccueuil/partie_photos.html">Photos</a></div>
                    <div><a href="pageAccueuil/partie_aPropos.html">À propos</a></div>
                    <div><a href="english/english.html">English</a></div>
                </div>
                <div class="center"></div>  
                <div class="photo"></div>
                <div class="return">
                    <a class="desktop" href="#hautPageDesktop">Haut de la page</a>
                    <a class="cellulaire" href="#hautPageCellulaire">Haut de la page</a>
                </div>
</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
 
 
const div_Photo = document.querySelector('.photo');
const div_Center = document.querySelector('.center');
const listeSections = document.querySelectorAll('.middle .header div a');
const langue = typeLangue.value;
 
// pour faire afficher par défaut cette section au moment arriver sur la page
function affichageAccueuil(){
    if (langue === "fr"){
        $(div_Center).load("/pageAccueuil/partie_accueuil.html");
    } else if (langue === "en"){
        $(div_Center).load("../pageAccueuil/partie_accueuil_EN.html");
    }    
} // cette fonction marche
 
// Affichage de la section du menu centrale du haut dans le div du centre 
function affichageSection(){
    $(listeSections).each(function(){
        $(this).on('click', function(evt){            
            evt.preventDefault();
            if (evt.target.href === "http://localhost:8080/english/english.html"){
                window.location.assign("/english/english.html");
            } else if (evt.target.href === "http://localhost:8080/index.html"){
                window.location.assign("/index.html");
            } else if (evt.target.href === "http://localhost:8080/pageAccueuil/partie_photos.html" || evt.target.href === "http://localhost:8080/pageAccueuil/partie_photos_EN.html"){
                $(div_Center).load(evt.target.href);                                
                affichageSectionPhoto();
            } else {
                $(div_Center).load(evt.target.href);                
                $(div_Photo).append("");
            }  
        });
    });
} // cette fonction marche
 
 
// à corriger !!!!!!!!!!!!!!!!!!!!!
function affichageSectionPhoto(){
    const listePassions = document.querySelectorAll('.middle .center .header .unePassionPhoto a');  // J'ai utilisé le même principe qu'à la fct précédente, mais on dirait que je ne déclare pas mes choses comme il faut
    $(listePassions).each(function(){
        $(this).on('click', function(e){            
            e.preventDefault();
            console.log(e);
            $(div_Photo).load(e.href);     
        });
 
    });
}
 
document.addEventListener('DOMContentLoaded', function(event) {     
    affichageAccueuil();
    affichageSection(); 
});

Des idées ?

vois tu le départ de ta requête ajax de load en console ?
as tu un message d'erreur en console ?

Je comprendre que ca ne va pas être facile , je pars travailler, donc je vais continuer à regarder ce soir....

ma ligne : $(div_Center).find(".middle .center .header .unePassionPhoto a")

Si je fais un console.log de ça, ça me donne rien

Voici ma version Javascript normal qui marche dans chrome et firefox

Le pourquoi, j'ai essayer de convertir mon code en jquery qui a quand même bien réussi...

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
 
function affichageSectionPhoto(){   
// la ligne en dessous est valide seulement au moment d'avoir remplir le div_center
// J'ai essaye la même ligne mais dans ma fct modifiée en jquery sans résultat...
    const listePassions = document.querySelectorAll('.middle .center .header .unePassionPhoto a');
    listePassions.forEach(function (laPassion){        
        laPassion.addEventListener('click', function(e){
            e.preventDefault(); // Permet d'afficher le contenu du fichier html dans le div «photo» 
            fetch(laPassion.href)
                .then(function(resp) {     
                return resp.text(); 
            })            
                .then(function(laPhoto) {                
                div_Photo.innerHTML = laPhoto;
            }); 
        });
    });
}