[Bot]

bonjour à tous, j’ai un petit problème,sur mon site lorsque l’utilisateur arrive, par défaut j’afffiche des images d’immeubles grace a une requete fetch ensuite j’utilise intersection observer pour en afficher plus au fur et a mesure qu’il scroll,et sa fonctionne;lorsqu’il décide de cliquer sur afficher les maisons pareil grace a fetch et intersection observer les images sont bel et bien afficher,le problème est que les images précédantes d’immeubles sont toujours là alors que je souhaiterais qu’elles disparaissent pour laisser place qu’aux maisons, en je ne m’y prends pas de la bonne manière, meerci pour votre aide…

——————–
le_big_dee_74788 – Envoyé depuis le Discord : Culte du code

Sujet

[Bot]

//here is the code that display the buildings 1/2
let currentPage=1;
let loading = false;
const contentDiv= document.getElementById(‘scroller’);
const loadingDiv = document.getElementById(‘target’);
const getPosts = async (page) => {
try {
let response = await fetch(`https://namseur.com/rentals/recent-posts-building.php?_page=${page}`);
if (!response.ok) {
throw new Error(« HTTP error! Status:  » + response.status);
}
return await response.json();
} catch (e) {
throw new Error(« Failed to fetch services:  » + e.message);
}
}

const appendData = (data) => {
data.forEach(item => {
const div = document.createElement(‘div’);
div.className = ‘card-container’;
div.innerHTML = `

${item.nom}&nbsp${item.prenoms}&nbsp
dont le mail est ${item.mail} habite à ${item.ville}, ${item.commune}

${item.bio} ${item.nom}&nbsp${item.prenoms}&nbsp estime que la somme de ${item.argent}&nbsp frcfa par mois est une somme raisonnable comme argent de poche;
et pour un premier rdv : ${item.first_date}

Plus de détails

`;
contentDiv.appendChild(div);
});
}

——————–
le_big_dee_74788 – Envoyé depuis le Discord : Culte du code

[Bot]

// display building 2/2

const observer = new IntersectionObserver(async (entries) => {
    if (entries[0].isIntersecting && !loading) {

        console.log(entries)

        loading = true;
        currentPage++;
        try {
            const data = await getPosts(currentPage);
            appendData(data);
        } catch (e) {
            console.log(e.message);
        }
        loading = false;
    }
}, { threshold: 1.0 });


observer.observe(loadingDiv);

window.addEventListener('DOMContentLoaded', async () => {
    try {
        const posts = await getPosts(currentPage);
        if (posts) {
            appendData(posts);
        } else {
            console.log('posts not found or undefined');
        }
    } catch (e) {
        console.log(e.message);
    }
});

——————–
le_big_dee_74788 – Envoyé depuis le Discord : Culte du code

[Bot]

// the code to display houses
let currentPagehouses=1;
let loadinghouses = false;
const contentDivhouses= document.getElementById('scroller');
const loadingDivhouses = document.getElementById('target-houses');

const getPostshouses = async (page) => {
    try {
        let response = await fetch(`https://namseur.com/houses/recent-posts-sugarhouses.php?_page=${page}`);
        console.log(page);
        if (!response.ok) {
            throw new Error("HTTP error! Status: " + response.status);
        }
        return await response.on();
    } catch (e) {
        throw new Error("Failed to fetch services: " + e.message);
    }
}


const appendDatahouses = (data) => {
    data.forEach(item => {
        const div = document.createElement('div');
        div.className = 'card-container';
        div.innerHTML = `

                
            
            

                ${item.nom}&nbsp${item.prenoms}&nbsp
                dont le mail est ${item.mail} habite à ${item.ville}, ${item.commune}
                
                ${item.bio} ${item.nom}&nbsp${item.prenoms}&nbsp estime que la somme de ${item.argent}&nbsp frcfa par mois est une somme raisonnable comme argent de poche;
                et pour un premier rdv : ${item.first_date}

                Plus de détails

            
`;
        contentDivhouses.appendChild(div);
    });
}


const observerhouses = new IntersectionObserver(async (entries) => {
    if (entries[0].isIntersecting && !loadinghouses) {

        console.log(entries)

        loadinghouses = true;
        currentPagehouses++;
        try {
         const data = await getPostshouses(currentPagehouses);
            appendDatahouses(data);
        } catch (e) {
            console.log(e.message);
        }
        loadinghouses = false;
    }
}, { threshold: 1.0 });

——————–
le_big_dee_74788 – Envoyé depuis le Discord : Culte du code

[Bot]

// my buttons to select houses or buildings
const categs = Array.from(document.querySelectorAll(".category"));

categs.forEach((categ) => categ.addEventListener("click", toggleSelected));

function toggleSelected() {
    console.log("Voici la catégorie :", this.dataset.categ);
    categs.forEach((categ) => categ.classList.toggle("selected"));
    let categorie2 = document.getElementById('categorie2');
    let categorie1 = document.getElementById('categorie1');
    if (categorie1.getAttribute('class') == "category selected") { console.log('buildings selected'); }

    if (categorie2.getAttribute('class') == "category selected") { console.log('houses selected'); observer.unobserve(loadingDiv);
        getTheHouses();
    }

}
async function getTheHouses(){
        try {
        const posts = await getPostshouses(currentPagehouses);
        if (posts) {
            appendDatahouses(posts);
        } else {
            console.log('posts not found or undefined');
        }
    } catch (e) {
        console.log(e.message);
    }
} 

——————–
le_big_dee_74788 – Envoyé depuis le Discord : Culte du code

[Auteur]

Réponses