[RESOLU] PHP qui se lance avant JavaScript

18 janv. 2023, 14:00

Bonjour, j'ai un problème, c'est que dans un js j'ai du geocode pour rechercher des adresses, dans un php où le plan se trouve ainsi qu'un pop up quand on clique sur le marqueur, sauf que quand je clique sur le submit qui m'emmène vers un autre fichier php qui affiche mes valeurs, l'adresse ainsi que les coordonnées affichent bel et bien une adresse et une coordonnée, mais celle tapée avant, cela veut donc dire que pour voir mon adresse je suis obligé de soumettre deux fois mon formulaire car ma page de résultat en php s'execute avant que mon javascript ne s'execute. J'espère avoir une solution pour ce problème, merci d'avance de vos réponses !

18 janv. 2023, 14:19

Salut, le php est un langage de script côté serveur qui est exécuté par le serveur afin de générer une réponse qui est envoyer au client.
Le javascript est à la base un langage de script côté client qui est exécuté par le navigateur.

Dans un scénario classique client/serveur le php exécuté par le serveur sert généralement à générer une page html qui est retournée au client (le navigateur). La page html générée peut éventuellement contenir du javascript qui est alors exécuté par le navigateur une fois la page reçue où lorsqu'un événement particulier est déclenché (clique sur un bouton, etc).

C'est déjà la base à bien comprendre pour solutionner ton problème.

18 janv. 2023, 14:25

Salut, le php est un langage de script côté serveur qui est exécuté par le serveur afin de générer une réponse qui est envoyer au client.
Le javascript est à la base un langage de script côté client qui est exécuté par le navigateur.

Dans un scénario classique client/serveur le php exécuté par le serveur sert généralement à générer une page html qui est retournée au client (le navigateur). La page html générée peut éventuellement contenir du javascript qui est alors exécuté par le navigateur une fois la page reçue où lorsqu'un événement particulier est déclenché (clique sur un bouton, etc).

C'est déjà la base à bien comprendre pour solutionner ton problème.

Donc je me disais par rapport à ça, y aurait-il une solution pour faire executer le php après le javascript ou meme peut-être actualiser le php ou se trouve les résultats ? Merci de ta réponse !

18 janv. 2023, 14:33

c'est le principe de l'ajax.
après, sans code ou sans voir ce qui existe, on ne peut pas en dire plus.

18 janv. 2023, 14:38

c'est le principe de l'ajax.
après, sans code ou sans voir ce qui existe, on ne peut pas en dire plus.

Voici mes deux codes sachant que je n'ai pris que le formulaire du plan.php sinon c'était trop long:

plan.php :

Code : Tout sélectionner

<?php
    $location = $_COOKIE["loc"];
    $lat = $_COOKIE["lat"];
    $lng = $_COOKIE["lng"];
    echo "<form class='form-container' method='post' id='form' action='save-meets.php?location=".$location."&lat=".$lat."&lng=".$lng."'>";?>
    <script>

      function closeForm() {
        document.getElementById("popupForm").style.display = "none";
      }
    </script>
    <div class="open-btn">
    </div>
    <div class="login-popup">
      <div class="form-popup" id="popupForm">
            <h2>Créer un rassemblement</h2>
            <strong>Titre</strong>
            <input type="text" id="rasso-title" placeholder="Nom de votre rassemblement" name="rasso-title" class="rasso-title"/>
            <br><strong>Description</strong>
            <input type="text" id="rasso-desc" placeholder="Légal ou illégal, type de voiture, activité prévue, etc." name="rasso-desc" class="rasso-desc"/>
            <br><strong>Date de début</strong>
            <input type="date" id="rasso-dd" name="rasso-dd"  class="rasso-dd"/>
            <strong>Date de fin</strong>
            <input type="date" id="rasso-df" name="rasso-df"  class="rasso-df"/><br>
            <strong>Heure de début</strong>
            <input type="time" id="rasso-hd" name="rasso-hd"  class="rasso-hd" id="myTime"/>
            <strong>Heure de fin</strong>
            <input type="time" id="rasso-hf" name="rasso-hf"  class="rasso-hf" id="myTime"/>
          <button type="submit" class="btn">Lancer un rassemblement</button>
          <button type="button" class="btn2" onclick="closeForm()">Fermer</button>
        </form>
      </div>
    </div>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Geocoding control</title>
    <meta
      name="viewport"
      content="initial-scale=1,maximum-scale=1,user-scalable=no"
    />

plan.js :

Code : Tout sélectionner


      const coordsParis = { lat: 48.866667, lng: 2.333333 };
      let coordsFromBrowser = { lat: coordsParis.lat, lng: coordsParis.lng };

      navigator.geolocation.getCurrentPosition(function (position) {
        console.log(
          "position",
          position.coords.latitude,
          position.coords.longitude
        );

        coordsFromBrowser.lat = position.coords.latitude;
        coordsFromBrowser.lng = position.coords.longitude;

        map.setView([coordsFromBrowser.lat, coordsFromBrowser.lng], 6);
      });

      const map = L.map("map").setView(
        [coordsFromBrowser.lat, coordsFromBrowser.lng],
        7
      );

      L.tileLayer("https://{s}.tile.openstreetmap.(je-ne-peux-pas-mettre-de-lien)/{z}/{x}/{y}.png", {
        attribution:
          '&copy; <a href="https://osm.(je-ne-peux-pas-mettre-de-lien)/copyright">OpenStreetMap</a> contributors',
      }).addTo(map);
      const searchControl = L.esri.Geocoding.geosearch().addTo(map);
      const results = L.layerGroup().addTo(map);
      let markers = [];
      searchControl.on("results", function (data) {
        let address = data.results[0].text;
        let lat = data.results[0].latlng.lat;
        let lng = data.results[0].latlng.lng;
        document.cookie = "loc=" + address;
        document.cookie = "lat=" + lat;
        document.cookie = "lng=" + lng;
        markers = [];
        results.clearLayers();
        
        // several results as several towns with same name (like)
        for (var i = data.results.length - 1; i >= 0; i--) {
          const result = data.results[i];
          const marker = L.marker(result.latlng);
          markers = [...markers, L.marker(marker)];
          results.addLayer(marker);
          marker.on("click", openForm);
        }
      });

      function openForm() {
        document.getElementById("popupForm").style.display = "block";
        document.cookie = "loc ="+ marker.latlng.lat +", " + marker.latlng.lng + ";"
      }

resultats.php :

Code : Tout sélectionner

<?php
session_start();

$title = $_POST["rasso-title"];
$desc = $_POST["rasso-desc"];
$rasso_dd = $_POST["rasso-dd"];
$rasso_df = $_POST["rasso-df"];
$rasso_hd = $_POST["rasso-hd"];
$rasso_hf = $_POST["rasso-hf"];
$username = $_SESSION["username"];
$loc=$_GET['location'];
$lat=$_GET['lat'];
$lng=$_GET['lng'];


echo "Titre : ".$title.".<br>";
echo "Description : ".$desc.".<br>";
echo "Date de début : ".$rasso_dd.".<br>";
echo "Heure de début : ".$rasso_hd.".<br>";
echo "Date de fin : ".$rasso_df.".<br>";
echo "Heure de fin : ".$rasso_hf.".<br>";
echo "Organisateur : ".$username.".<br>";
echo "Adresse : ".$loc.".<br>";
echo "Lattitude : ".$lat.".<br>";
echo "Longitude : ".$lng.".<br>";

?>

18 janv. 2023, 14:56

echo "<form class='form-container' method='post' id='form' action='save-meets.php?location=".$location."&lat=".$lat."&lng=".$lng."'>";?>

$loc=$_GET['location'];
$lat=$_GET['lat'];
$lng=$_GET['lng'];

sauf erreur de ma part, rien n'est fait en javascript pour modifier le champ action du formulaire, donc les valeurs sont celles générées par le php, avant toute action sur la page de l'utilisateur.
une solution est de mettre des champs hidden dans le formulaire et, en javascript, à cet endroit du code :
document.getElementById("popupForm").style.display = "block";
document.cookie = "loc ="+ marker.latlng.lat +", " + marker.latlng.lng + ";"
de changer la valeur de ces champs hidden.

18 janv. 2023, 15:42

echo "<form class='form-container' method='post' id='form' action='save-meets.php?location=".$location."&lat=".$lat."&lng=".$lng."'>";?>

$loc=$_GET['location'];
$lat=$_GET['lat'];
$lng=$_GET['lng'];

sauf erreur de ma part, rien n'est fait en javascript pour modifier le champ action du formulaire, donc les valeurs sont celles générées par le php, avant toute action sur la page de l'utilisateur.
une solution est de mettre des champs hidden dans le formulaire et, en javascript, à cet endroit du code :
document.getElementById("popupForm").style.display = "block";
document.cookie = "loc ="+ marker.latlng.lat +", " + marker.latlng.lng + ";"
de changer la valeur de ces champs hidden.

Comment ça ? Je dois mettre quelle ligne dans chacun des fichiers ?

18 janv. 2023, 16:16

Tu ne peux pas te baser sur les cookies pour modifier les valeurs de location lat et lng qui sont déjà en dur dans la page dans l'attribut action de la balise form.

Quand tu appelles plan.php les valeurs dans $_COOKIE sont celles résultantes de la précédente exécution du script plan.js, la nouvelle exécution n'ayant pas encore eu lieu.

Le

echo "<form class='form-container' method='post' id='form' action='save-meets.php?location=".$location."&lat=".$lat."&lng=".$lng."'>";?>

est transmis au navigateur sous cette forme (en admettant que les cookies soient vides au départ)

<form class='form-container' method='post' id='form' action='save-meets.php?location=&lat=&lng='>

Lorsque tu soumets le formulaire ce sont donc ces valeurs qui sont transmises.

Au lieu de mettre ces paramètres en get dans l'action du formulaire, fait des input hidden dans ton form et mets à jour les valeurs de ces inputs avec javascript quand tu obtiens le résultat d'OpenStreetMap.

Un truc du genre

document.getElementById('lat').value = marker.latlng.lat;

avec un input

<input type="hidden" id="lat" name="lat" value=""/>

Ainsi dans $_POST['lat'] tu devrais obtenir la latitude du dernier appel OpenStreeMap.

18 janv. 2023, 16:28

Tu ne peux pas te baser sur les cookies pour modifier les valeurs de location lat et lng qui sont déjà en dur dans la page dans l'attribut action de la balise form.

Quand tu appelles plan.php les valeurs dans $_COOKIE sont celles résultantes de la précédente exécution du script plan.js, la nouvelle exécution n'ayant pas encore eu lieu.

Le
echo "<form class='form-container' method='post' id='form' action='save-meets.php?location=".$location."&lat=".$lat."&lng=".$lng."'>";?> 
est transmis au navigateur sous cette forme (en admettant que les cookies soient vides au départ)
<form class='form-container' method='post' id='form' action='save-meets.php?location=&lat=&lng='>
Lorsque tu soumets le formulaire ce sont donc ces valeurs qui sont transmises.

Au lieu de mettre ces paramètres en get dans l'action du formulaire, fait des input hidden dans ton form et mets à jour les valeurs de ces inputs avec javascript quand tu obtiens le résultat d'OpenStreetMap.

Un truc du genre
document.getElementById('lat').value = marker.latlng.lat;
avec un input
<input type="hidden" id="lat" name="lat" value=""/>
Ainsi dans $_POST['lat'] tu devrais obtenir la latitude du dernier appel OpenStreeMap.

C'est fait mais ça ne marche pas, il n'arrive pas a transferer les variables dans le plan.php

18 janv. 2023, 16:56

Peut être le script plan.js n'est pas inclut dans la page plan.php ? On ne voit pas son inclusion...

18 janv. 2023, 17:00

Peut être le script plan.js n'est pas inclut dans la page plan.php ? On ne voit pas son inclusion...

Oui c'était ça ! Merci beaucoup !!

[RESOLU] PHP qui se lance avant JavaScript

Qui est en ligne