Forum : Requête AJAX - affichage variable impossible

Bonsoir à tous,

Je me permets de venir vers vous car je sèche un peu sur du code qui mélange de l'AJAX et du PHP, je suis preneur de la moindre modification ou amélioration.

Voila j'utilise la librairie leaflet pour afficher des marqueurs via des coordonnées que j'ai dans une base de données distante. Tout est bon j'arrive à afficher mes marqueurs en l'occurence des pharmacies au travers de la requête présente sur mon index.

<?php
session_start();
ob_start();
ini_set('display_errors','on');
error_reporting(E_ALL);

include_once("./assets/database/connect_db_users.php");
include_once("./assets/database/cookie_lang.php");
include_once("./assets/database/cookieconnect.php");
?>
<?php
// Requête pour récupérer les pharm_geolocalisation avec leurs coordonnées, adresses et villes
$query = $db->query("SELECT pharm_id_code, pharm_state, pharm_latitude, pharm_longitude FROM pharm_geolocalisation WHERE pharm_state = 1");

// Tableau pour stocker les données des pharm_geolocalisation
$pharm_geolocalisation = array();

// Parcours des résultats de la requête
while ($row = $query->fetch(PDO::FETCH_ASSOC)) {
// Création d'un tableau associatif pour chaque pharmacie
$pharmacie = array(
"id_code" => $row["pharm_id_code"],
"state" => $row["pharm_state"],
"latlng" => array($row["pharm_latitude"], $row["pharm_longitude"])
);

// Ajout du tableau associatif au tableau $pharmacies
array_push($pharm_geolocalisation, $pharmacie);
}
?>
<!DOCTYPE html>
<html>
<head>
<?php include('./includes/users_header_metahead.php');?>

mapid {

  top: 77px;
  width: 100%;
  height: calc(100vh - 85px);
  margin-left: 0px;
  padding-left: 0px;
}

/*  CSS cluster */
.cluster {
background: #5e50ff;
border-radius: 50%;
text-align: center;
color: white;
font-weight: 700;
border: 2px solid white;
font-family: monospace;
}
.cluster:before {
    content: ' ';
    position: absolute;
    border-radius: 50%;
    z-index: -1;
    top: 1px;
    left: 1px;
    right: 1px;
    bottom: 1px;
    border: 0px solid white;
}
.digits-1 {
    font-size: 14px;
    height: 28px;
    width: 28px;
    line-height: 24px;
    margin-top: -14px;
    margin-left: -14px;
}
.digits-2 {
    font-size: 16px;
    height: 34px;
    width: 34px;
    line-height: 31px;
    margin-top: -17px;
    margin-left: -17px;
}
.digits-2:before {
    border-width: 0px;
}
.digits-3 {
    font-size: 18px;
    height: 48px;
    width: 48px;
    line-height: 42px;
    border-width: 3px;
    margin-top: -24px;
    margin-left: -24px;
}
.digits-3:before {
    border-width: 0px;
}
.digits-4 {
    font-size: 18px;
    height: 58px;
    width: 58px;
    line-height: 52px;
    border-width: 4px;
    margin-top: -29px;
    margin-left: -29px;
}
.digits-4:before {
    border-width: 0px;
}
.leaflet-popup-content {
margin: 0;
}
.heart-icon.liked {
color: red !important;

}
</style>
</head>
<body>
<?php include('./includes/users_navigation_header_responsive.php'); ?>

<div class="main-content">

<nav class="navbar navbar-top navbar-expand navbar-dark bg-white border-bottom" id="navbar-main" style="border-bottom: 1px solid #e6ecf1;">
<div class="container-fluid">
<?php include('./includes/users_navigation_header.php');?>
</div>
</nav>
<div id="mapid"></div>
<div id="pharmacies"></div>
</div>

var pharm_geolocalisation = <?php echo json_encode($pharm_geolocalisation); ?>;

// Création d'un groupe de marqueurs clusterisés CSS spécifique
var markers = new L.MarkerClusterGroup({
iconCreateFunction: function(cluster) {
    var digits = (cluster.getChildCount()+'').length;
    return L.divIcon({ 
        html: cluster.getChildCount(), 
        className: 'cluster digits-'+digits,
        iconSize: null 
    });
    }
});

pharm_geolocalisation.forEach(function(pharmacie) {
  var id_code = pharmacie.id_code;
  var latlng = pharmacie.latlng;
  var state = pharmacie.state;
  var specialMarker = pharmacie.specialMarker; // Suppose que vous avez une propriété "specialMarker" dans votre base de données

  let form = new FormData();
  form.append("id_code", id_code); // Remplacez id_code par la valeur souhaitée

  const options = {
    body: form,
    method: "POST"
  };

  fetch('./req_index.php', options)
    .then(response => response.json())
    .then(data => {
    })
    .catch(error => {

    });

  // Création d'un marqueur pour chaque pharmacie
  // Ajoutez ici les autres informations de la base de données dans la chaîne de caractères popupContent
  var popupContent = '<div style="width: 18rem;"><div class="card card-stats"><!-- Card body --><div class="card-body"><div class="row"><div class="col"><h5 class="card-title text-uppercase text-muted mb-0"></h5><span class="h2 font-weight-bold mb-0">2,356</span></div><div class="col-auto"><div class="icon icon-shape bg-orange text-white rounded-circle shadow"><i class="ni ni-chart-pie-35"></i></div></div></div><p class="mt-3 mb-0 text-sm"><span class="text-success mr-2"><i class="fa fa-arrow-up"></i> 3.48%</span><span class="text-nowrap">Since last month</span></p></div></div></div>';

  // Utilisez un marqueur spécial pour les éléments qui vérifient votre condition
  var marker = L.marker(latlng, { icon: L.icon({ iconUrl: './assets/img/icons/maps/hapotec_marker_1.png', iconSize: [35, 40] }) })
    .bindPopup(popupContent, { offset: L.point(0, -20), autoPan: false });

  markers.addLayer(marker); // Ajout du marqueur au groupe de marqueurs en cluster

  // Création d'une div avec les elements du marqueur
  var div = document.createElement("div");
  div.innerHTML = name;
  div.addEventListener('click', function() {
    mymap.setView(latlng, 18);
  });
  pharmacies.appendChild(div);
});

mymap.addLayer(markers);

L.control.locate().addTo(mymap);

</script>
</body>
</html>

Le truc c'est que cette première requête qui interroge une première table ne se compose que des coordonnées et des IDs des pharmacies, j'ai donc stocké les autres informations relativement aux pharmacies (adresse, nom, téléphone) dans une seconde table que j'essaye d'interroger après avec récupérer l'ID en question et afficher les différentes informations dans le popupContent.

Cette seconde requête est réalisée via une page dans le répertoire "req_index.php" :

<?php
var_dump($_POST);
// Vérifier si la requête est de type POST
if ($_SERVER["REQUEST_METHOD"] === "POST") {
// Vérifier si le paramètre "id_code" est présent
if (isset($_POST["id_code"])) {
// Récupérer la valeur de "id_code"
$id_code = $_POST["id_code"];

// Effectuer d'autres vérifications et validations si nécessaire

// Exécuter la requête SQL pour récupérer les informations de la pharmacie correspondante
$req_pharm_informations = $db->prepare('SELECT * FROM '.$db_hapotec.'.pharm_informations WHERE pharm_id_code = :pharm_id_code');
$req_pharm_informations->execute(array(
  'pharm_id_code' => $id_code
));

// Récupérer les données de la requête dans un tableau associatif
$pharm_informations = $req_pharm_informations->fetchAll(PDO::FETCH_ASSOC);

// Renvoyer les données au format JSON
header('Content-Type: application/json');
echo json_encode($pharm_informations);
exit;

}
else
{
echo "NO NO";
}
}
else
{
echo "1";
}
exit;
?>

Sauf que le souci c'est que je n'arrive pas à intégrer les informations récupérer dans le popupContent, cela bloque l'affichage des marqueurs. Exemple avec dans le code avec " ' + adresse_pharmacie + '/

Je suis preneur de toutes vos lumières.

Merci beaucoup,

AlexCode

Requête AJAX - affichage variable impossible

1 réponse