Forum d'entraide PHPFrance

Bonjour,
Tout d'abord je tiens à préciser que je ne maitrise absolument pas PHP/HTML/... Je programme surtout en Autoit, et dans un de mes scripts j'ai eu besoin de faire une page web pour en afficher les résultats (bon ça à un peu déraper...)
J'ai fait tout ça avec l'IA, donc possible qu'il y est beaucoup de chose qui ne soit pas à leur place... Je bosse un peu pour mieux gérer tout ça !

En gros j'ai fait un page index.php, qui contient le menu, et ensuite, j'ai fait des pages (je met contact.html, c'est la plus petite qui pose problème...)
Si j'exécute directement la page contact, via son URL, le script qui est dedans (la carte) s'affiche sans problème. Par contre si sur mon menu je click sur contact, tout s'affiche sauf le script de la carte... J'ai remarqué le même phénomène sur d'autre pages aussi... Ce qui est encapsulé dans les balises <script> ne fonctionne que sur la page directement.

Index.php :

<!DOCTYPE html>
<html>
<head>
  <base href="http://192.168.10.245/">
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title></title>
  <style>
    :root {
      --primary-color: #2c3e50;
      --secondary-color: #3498db;
      --text-color: #333;
      --background-color: #ecf0f1;
    }

    body {
      font-family: 'Arial', sans-serif;
      line-height: 1.6;
      margin: 0;
      padding: 0;
      background-color: var(--background-color);
      color: var(--text-color);
    }

    .header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 20px;
      background-color: var(--primary-color);
      color: white;
    }

    .header nav {
      display: flex;
      gap: 20px;
    }

    .header nav a {
      color: white;
      text-decoration: none;
      font-size: 16px;
    }

    .header nav a:hover {
      text-decoration: underline;
    }

    .login-container {
      display: flex;
      align-items: center;
      gap: 10px;
    }

    .login-container input {
      padding: 5px;
      border: 2px solid #b3d9ff;
      border-radius: 5px;
      font-size: 14px;
    }

    .login-container input:focus {
      outline: none;
      border-color: var(--secondary-color);
    }

    .login-container button {
      background-color: var(--secondary-color);
      color: white;
      border: none;
      padding: 5px 10px;
      border-radius: 5px;
      cursor: pointer;
      font-size: 14px;
      transition: background-color 0.3s ease;
    }

    .login-container button:hover {
      background-color: #2980b9;
    }

    #error-message {
      color: red;
      margin-top: 10px;
      display: none;
    }

    .hidden {
      display: none;
    }

    .container {
      width: 90%;
      max-width: 1200px;
      margin: auto;
      overflow: hidden;
      padding: 20px;
    }
  </style>
</head>
<body>
  <div class="header">
    <nav>
      <a href="#accueil.html" data-page="accueil.html">Accueil</a>
      <a href="#liens.php" data-page="liens.php">Liens</a>
      <a href="#telechargement.php" data-page="telechargement.php">Téléchargement</a>
      <a href="#contact.html" data-page="contact.html">Contact</a>
      <a href="#helpdesk.php" data-page="helpdesk.php" class="hidden" id="helpdesk-menu">Help-Desk</a>
      <a href="#intervention.php" data-page="intervention.php" class="hidden" id="intervention-menu">Intervention</a>
      <a href="#administration.php" data-page="administration.php" class="hidden" id="administration-menu">Administration</a>
    </nav>
    <div class="login-container">
      <form id="login-form">
        <input type="text" id="username" name="username" placeholder="Nom d'utilisateur" required>
        <input type="password" id="password" name="password" placeholder="Mot de passe" required>
        <button type="submit">Se connecter</button>
      </form>
      <button id="logout-button" class="hidden">Déconnexion</button>
      <p id="error-message">Nom d'utilisateur ou mot de passe incorrect.</p>
    </div>
  </div>

  <main class="container" id="content-container">
    <!-- Le contenu des pages sera chargé ici -->
  </main>


  <script>
    $(document).ready(function() {
      // Vérifier si l'utilisateur est authentifié
      const isAuthenticated = localStorage.getItem('isAuthenticated') === 'true';
      if (isAuthenticated) {
        $('#helpdesk-menu').removeClass('hidden');
        $('#intervention-menu').removeClass('hidden');
        $('#administration-menu').removeClass('hidden');
        $('#login-form').hide();
        $('#logout-button').removeClass('hidden');
      }

      $('#login-form').on('submit', function(e) {
        e.preventDefault();
        const username = $('#username').val();
        const password = $('#password').val();

        // Envoyer les données du formulaire au fichier PHP
        $.post('login.php', { username: username, password: password }, function(response) {
          if (response === 'success') {
            // Authentification réussie, rediriger vers la page d'accueil
            localStorage.setItem('isAuthenticated', 'true');
            window.location.reload();
          } else {
            // Authentification échouée, afficher un message d'erreur
            $('#error-message').show();
          }
        });
      });

      $('#logout-button').on('click', function() {
        localStorage.removeItem('isAuthenticated');
        window.location.reload();
      });

      // Fonction pour charger le contenu de la page
      function loadContent(page) {
        $('#content-container').load(page);
      }

      // Charger le contenu initial basé sur le fragment d'URL ou la page d'accueil par défaut
      const initialPage = window.location.hash.slice(1) || 'accueil.html';
      loadContent(initialPage);

      // Intercepter les clics sur les liens de navigation
      $('.header nav a').on('click', function(e) {
        e.preventDefault();
        const page = $(this).data('page');
        loadContent(page);

        // Mettre à jour le fragment d'URL sans recharger la page
        history.pushState(null, '', '#' + page);
      });

      // Gérer les événements de navigation (boutons précédent/suivant du navigateur)
      $(window).on('popstate', function() {
        const page = window.location.hash.slice(1) || 'accueil.html';
        loadContent(page);
      });
    });
  </script>
</body>
</html>

Et le contact.html :

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Contact</title>
  <style>
    :root {
      --primary-color: #2c3e50;
      --secondary-color: #3498db;
      --text-color: #333;
      --background-color: #ecf0f1;
    }

    body {
      font-family: 'Arial', sans-serif;
      line-height: 1.6;
      margin: 0;
      padding: 0;
      background-color: var(--background-color);
      color: var(--text-color);
    }

    .container {
      width: 90%;
      max-width: 1200px;
      margin: auto;
      overflow: hidden;
      padding: 20px;
    }

    .logo {
      font-size: 2em;
      font-weight: bold;
      color: var(--primary-color);
      text-align: center;
      margin-bottom: 30px;
    }

    .highlight {
      color: var(--secondary-color);
    }

    .contact-info, .opening-hours {
      background: #ffffff;
      border-radius: 15px;
      padding: 20px;
      margin-bottom: 20px;
      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    }

    .contact-info h2, .opening-hours h2 {
      color: var(--primary-color);
      margin-top: 0;
    }

    .contact-info p, .opening-hours p {
      margin: 10px 0;
    }

    #map {
      width: 100%;
      height: 400px;
      border-radius: 15px;
      margin-top: 20px;
    }

    footer {
      background: var(--primary-color);
      color: #ffffff;
      text-align: center;
      padding: 20px 0;
      border-radius: 20px 20px 0 0;
      margin-top: 40px;
    }

    @media (max-width: 768px) {
      #map {
        height: 300px;
      }
    }
  </style>
</head>
<body>
  <main class="container">
    <section id="contact" class="contact-info">
      <h2>Contactez-nous</h2>
    </section>

    <section id="hours" class="opening-hours">
      <h2>Horaires d'ouverture</h2>
    </section>

    <div id="map"></div>
  </main>


  <script>
    function initMap() {
      const lat = 47.86825;
      const lon = -3.54041;
      const map = L.map('map').setView([lat, lon], 15);


    }

    document.addEventListener('DOMContentLoaded', (event) => {
      const contactInfo = document.querySelector('.contact-info');
      const openingHours = document.querySelector('.opening-hours');
      const mapPlaceholder = document.querySelector('#map');

      contactInfo.style.opacity = 0;
      contactInfo.style.transform = 'translateY(20px)';
      contactInfo.style.transition = 'opacity 0.5s ease-out, transform 0.5s ease-out';

      openingHours.style.opacity = 0;
      openingHours.style.transform = 'translateY(20px)';
      openingHours.style.transition = 'opacity 0.5s ease-out, transform 0.5s ease-out';

      mapPlaceholder.style.opacity = 0;
      mapPlaceholder.style.transform = 'translateY(20px)';
      mapPlaceholder.style.transition = 'opacity 0.5s ease-out, transform 0.5s ease-out';

      setTimeout(() => {
        contactInfo.style.opacity = 1;
        contactInfo.style.transform = 'translateY(0)';
      }, 300);

      setTimeout(() => {
        openingHours.style.opacity = 1;
        openingHours.style.transform = 'translateY(0)';
      }, 600);

      setTimeout(() => {
        mapPlaceholder.style.opacity = 1;
        mapPlaceholder.style.transform = 'translateY(0)';
        initMap();
      }, 900);
    });
  </script>
</body>
</html>

Je ne sais pas si le script va marché, j'ai du supprimer des liens pour la carte ( openstreetmap )

Si vous avez une idée en tout cas !

Merci !

Pour débuguer il faut que tu regardes dans la console de ton navigateur, Sur Firefox ou Chrome tu peux faire Ctrl+Maj+i
Et ensuite d'abord tu recharges la page, puis regardes dans l'onglet Réseau, pour vérifier que tout s'est chargé correctement, et enfin dans l'onglet Console pour voir s'il y a des erreurs javascript

Merci pour l'information !
Donc au niveau de la console, je n'est pas d'erreur particulière (juste un favicon.ico non présent, mais c'est dans les 2 cas)
Au niveau du réseau, dans le cas où je n'affiche pas le menu j'ai dans all :
- jquerry.min.js
- leaflet.js
- un css
- mon index et la page contact.html

Par contre si je n'affiche pas le menu :
- jquerry.min.js >>> n'est plus là
- leaflet.js
- un css
- mon index et la page contact.html > la page index forcement disparait
- et j'ai une collection de PNG lié à la carte

Dans les 2 cas, je ne note pas d'erreur JS

(j'aurais bien mis une capture d'écran mais les images ne sont pas permise sur le forum visiblement)

Merci !

En analysant plus en détail, j'ai l'impression que la raison principale de ton problème, c'est que tu charges le contenu de ta page contact en ajax depuis la page index.
Or ton script de chargement de la carte attend que le DOM de la page soit chargé avec la ligne de code suivante :

Code : Tout sélectionner

document.addEventListener('DOMContentLoaded', (event) => {

Or cet évènement "DOMContentLoaded" a déjà été exécuté par le navigateur pour la page index, il ne va pas le réexécuter après ton appel ajax.

Par ailleurs, ça marche peut-être, car les navigateurs ont une grande tolérance dans l'affichage du HTML incorrect, mais si tu injectes le contenu de contact dans un div de ta page principale, tu ne devrais pas injecter les balises <html><head><body> puisqu'elles sont déjà présentes dans ta page principale index.

Je ne sais pas quel est l'intérêt de charger toutes tes pages en ajax, selon moi ça complexifie le dev surtout si tu es débutant.
Le plus simple à mon sens c'est que tu crées une page menu_inc.php dans lequel tu met juste le code de ton menu.
Et sur chacune de tes pages (en leur donnant une extension .php au lieu de .html), à l'endroit où tu veux afficher le menu tu fasses un include()

<?php
include("menu_inc.php");
?>

Et ensuite les liens de ton menu ce sont juste des liens normaux sans avoir besoin de JS <a href="contact.php">Contact</a>, etc...

En analysant plus en détail, j'ai l'impression que la raison principale de ton problème, c'est que tu charges le contenu de ta page contact en ajax depuis la page index.
Or ton script de chargement de la carte attend que le DOM de la page soit chargé avec la ligne de code suivante :
Code : Tout sélectionner
document.addEventListener('DOMContentLoaded', (event) => {
Or cet évènement "DOMContentLoaded" a déjà été exécuté par le navigateur pour la page index, il ne va pas le réexécuter après ton appel ajax.

Par ailleurs, ça marche peut-être, car les navigateurs ont une grande tolérance dans l'affichage du HTML incorrect, mais si tu injectes le contenu de contact dans un div de ta page principale, tu ne devrais pas injecter les balises <html><head><body> puisqu'elles sont déjà présentes dans ta page principale index.

Ok merci je vais fouiller de ce coter !
ça me semblais logique pour cette partie, mais j'ai pas regardé plus que ça...
Pareil j'ai un bordel au niveau des CSS, je pense qu'il est possible de tout centralisé dans un seul fichier, mais pas regarder ça non plus encore !

Je ne sais pas quel est l'intérêt de charger toutes tes pages en ajax, selon moi ça complexifie le dev surtout si tu es débutant.

Comme je l'ai mis dans le premier post, j'y connais rien en dev web, je bosse sur d'autre langage mais le web m'est complètement inconnu.
Donc j'ai fonctionné de manière empirique, avec une IA pour faire ça

En gros, j'ai commencé par généré les différentes pages qui m'intéressais, j'ai fait en sorte qu'elles marchent et j'ai fait le menu après (que j'ai mis en index, ce que je n'aurais pas du faire visiblement). De mon point de vue, c'est ce qui me semblais logique

Pour la partie en Ajax, c'est peut être lié à ma demande de masqué certaines pages tant qu'on est pas logué, mais encore une fois, c'est peut être pas la bonne approche !

Le plus simple à mon sens c'est que tu crées une page menu_inc.php dans lequel tu met juste le code de ton menu.
Et sur chacune de tes pages (en leur donnant une extension .php au lieu de .html), à l'endroit où tu veux afficher le menu tu fasses un include()
<?php
include("menu_inc.php");
?>
Et ensuite les liens de ton menu ce sont juste des liens normaux sans avoir besoin de JS <a href="contact.php">Contact</a>, etc...

En gros la solution, serais dans tout les cas de modifier mon menu, et de fonctionner autrement... Je vais essayer d'avancer dans se sens alors !

Merci beaucoup pour tes réponses

je vais essayer de m'en sortir !

Bonjour, juste pour dire merci pour le conseil

J'ai réussi à m'en sortir ! j'ai refait mon menu et l'est intégrés au pages nécessaire !
(pour l'instant

)

Top, merci pour le retour

Forum d'entraide PHPFrance

[RESOLU] Le script ne s'exécute pas, si lancé via menu

Le script ne s'exécute pas, si lancé via menu

Re: Le script ne s'exécute pas, si lancé via menu

Re: Le script ne s'exécute pas, si lancé via menu

Re: Le script ne s'exécute pas, si lancé via menu

Re: Le script ne s'exécute pas, si lancé via menu

Re: Le script ne s'exécute pas, si lancé via menu

Re: [RESOLU] Le script ne s'exécute pas, si lancé via menu