[Résolu] Afficher une div en fonction de la balise xml

Bonjour, j'ai un bandeaux ou je veux afficher le trafic RER et Métro et l'état du trafic, trafic normal ou s'il a des problèmes. Pour cela j'ai deux div : une si le trafic est normal et une si le trafic est perturbé, qui sont masquées de base, que je récupère dans un fichier xml.
Dans mon XML j'ai une balise qui est = a "oui" si trafic normal et "non" si le trafic est perturbé. Maintenant ce que je veux faire c'est en fonction de la balise, si c'est oui j'affiche la div trafic normal et si c'est non j'affiche la div trafic perturbé.
J'utilise l'ID "trafic_rer" pour trafic en règle et l'ID "trafic_rer_pb" pour trafic perturbé.

Voila mon XML. Si il y a qqun qui connais ou a déjà fait la même chose svp j'ai besoin de votre aide. Merciii

<trafic>
<link type="text/css" rel="stylesheet" id="dark-mode-general-link"/>
<link type="text/css" rel="stylesheet" id="dark-mode-custom-link"/>
<style lang="en" type="text/css" id="dark-mode-custom-style"/>
<global>
<normal>oui</normal>
<remarques>Trafic normal sur l'ensemble du reseau.</remarques>
</global>
<metro>
<normal>oui</normal>
<remarques>Trafic normal sur l'ensemble des lignes de metro.</remarques>
</metro>
<rer>
<normal>oui</normal>
<remarques>Trafic normal sur l'ensemble des lignes de RER.</remarques>
</rer>
<bus>
<normal>oui</normal>
<remarques>Trafic normal sur l'ensemble des lignes de bus.</remarques>
</bus>
</trafic>

Hello,

Tu as le lien du XML et un bout de code ?

Oui j'ai le lien du XML, tu peux le voir avec ce lien http://www.spotlook.fr/fr/client/trafic_transports/ratp/flash/trafic.xml

Et voila mon code html

<div id="div_trafic">

                <div id="trafic_rer">
                    <img id="img_rer" src="images\rer.svg">
                    <div class="div_p"><p>Trafic normal sur l\'ensemble des lignes de RER</p></div>
                </div>

                <div id="trafic_rer_pb">
                    <div id="trafic_rer_pb_1">
                        <img id="logo_rer" src="images\logo_rer_orange.svg">
                        <p id="anomalie_rer">Anomalies sur lignes</p>
                        <img class="rer" src="images\rer_a_rouge.svg">
                        <img class="rer" src="images\rer_b.svg">
                        <img class="rer" src="images\rer_c.svg">
                        <img class="rer" src="images\rer_d.svg">
                        <img class="rer" src="images\rer_e.svg">
                    </div>
                    <div id="remarque_rer"><p>'.$remarque_rer.'</p></div>
                </div>
            </div>

Modifié par Cristian4 (11 Jan 2021 - 15:19)

Je vois un bout de PHP

'.$remarque_rer.'

Tu veux bien du JS ( front ) pour extraire ton XML ?
Ou du PHP ?

Oui je veux du JS !

'.$remarque_rer.'

En php je recupere l'heure et la direction, mais ca c'est autre chose.

Je veux le faire en JS pour afficher la div en fonction de la balise xml sinon la div est caché, je sais pas si c'est possible de le faire en php !

J'ai testé en JS, le XML ne passe pas avec un ajax ( problème CORS same origin ).
En PHP ce serait plus simple !
https://www.codegrepper.com/code-examples/php/php+read+xml+from+url

OK, mais après comment faire pour afficher la bonne div ?

Alors moi j'ai créé ce script en JS mais il y a une erreur qqpart dans le code

let xmlContent ='';
fetch('http://www.spotlook.fr/fr/client/trafic_transports/ratp/flash/trafic.xml').then((response)=>{
      response.text().then((xml=>{
            xmlContent = xml;
            let parser = new DOMParser();
            let xmlDOM = parser.parseFromString(xmlContent, 'application/xml');
            let rer = xmlDOM.querySelectorAll('rer');
            
            rer.forEach(rerXmlNode => {
                  let rerNormal = rerXmlNode.children[0];
            })
      }))
})

Prend l'habitude de faire un F12 pour voir ce qui ne va pas

Ici tu as par exemple le souci dont je t'avais parlé plus haut, mais ce n'est pas une erreur de code JS, c'est une sécurité parce que le front n'est pas prévu pour ça:

Blocage d’une requête multiorigines (Cross-Origin Request) : la politique « Same Origin » ne permet pas de consulter la ressource distante située sur  http://www.spotlook.fr/fr/client/trafic_transports/ratp/flash/trafic.xml.  Raison : l’en-tête CORS « Access-Control-Allow-Origin » est manquant.

Si tu relis ton code, tu peux voir aussi d'autres erreurs mais ça c'est autre chose.
Sauf erreur de ma part, tu n'a pas le choix que d'utiliser PHP.

Edit: Pour afficher telle ou telle DIV, en PHP tu n'as juste qu'à faire un 'echo' selon une condition.

En gros: tu parse ton XML, tu déclare tes variables 'RER' 'METRO' etc et avec un bon 'IF' tu affiche tel ou tel bloc.
Modifié par stryk (11 Jan 2021 - 17:37)

Alors j'ai essaié en php comme tu ma dis mais ça fonctionne pas.
Dis moi si je fais une erreur
Le code c'est ça :

if($etat_trafic_rer === "oui"){
                echo '
                <div id="trafic_rer">
                    <img id="img_rer" src="images\rer.svg">
                    <div class="div_p"><p>Trafic normal sur l\'ensemble des lignes de RER</p></div>
                </div>';} else{
                echo '
                <div id="trafic_rer_pb">
                    <div id="trafic_rer_pb_1">
                        <img id="logo_rer" src="images\logo_rer_orange.svg">
                        <p id="anomalie_rer">Anomalies sur lignes</p>
                        <img class="rer" src="images\rer_a_rouge.svg">
                        <img class="rer" src="images\rer_b.svg">
                        <img class="rer" src="images\rer_c.svg">
                        <img class="rer" src="images\rer_d.svg">
                        <img class="rer" src="images\rer_e.svg">
                    </div>
                    <div id="remarque_rer"><p>'.$remarque_rer.'</p></div>
                </div>';}

Bonjour, "ça fonctionne pas" --> ?? C'est à dire ?

C'est bon j'ai trouvé l'erreur, j'ai mis trois égales (===) alors qu'il n'ont fallait que deux (==)
Merci quand même

Oui j'avais vu cette doc et c'est pour ça qu'au début j'ai mis 3 === . C'est bizarre mais bon maintenant ca marche.