Afficher le resultat de requete Ajax dans une colonne de tableau

Fermé

abirgl Messages postés 127 Date d'inscription lundi 31 octobre 2016 Statut Membre Dernière intervention 20 juin 2017 - Modifié par jordane45 le 27/02/2017 à 15:20
jordane45 Messages postés 38263 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 28 octobre 2024 - 27 févr. 2017 à 15:27

Bonjour,
Je souhaite afficher un tableau , qui contient 6 colonnes, 4 colonnes seront extraites à partir de la base et 2 colonnes seront calculées dans une fonction javascript et qui dépendent des valeurs de la base, donc j'ai réussi à afficher les valeurs de la base mais pas les valeurs calculées dans le javascript, j'ai utilisé ajax pour communiquer entre le javascript et le php , je vous poste mon code en souhaitant que vous pourrez m'aider :
Code de la page Accueil.php

<?php
include("connect.php");
$Code_Equipe=$_GET['id'];
$current_date=date('Y-m-j');
?>
<!DOCTYPE html>
<html>
<head>   
<script src=""quot;"quot;"quot;"quot;"quot;https://maps.googleapis.com/maps/api/js?key=My_Key_Value&language=fr" type="text/javascript"></script> 
<script type="text/javascript">
function Test11()
{
  var Code_Equipe=<?php echo $Code_Equipe; ?>;
  var xhr = new XMLHttpRequest();
  xhr.open("GET", "ListeOTJournaliere.php?Code_Equipe="+Code_Equipe+"&latOrigin="+latOrigin+"&lngOrigin="+lngOrigin,true);
  xhr.send(null);
  xhr.onreadystatechange = result;
  function result()
    {
      if((xhr.status == 200)&&(xhr.readyState==4))      
      document.getElementById("tabtj").innerHTML=xhr.responseText;
    }
}


</script>
</head>
<body onload="Test11()">
<input type="hidden" name="MaLatitude" id="MaLatitude">
<input type="hidden" name="MaLongitude" id="MaLongitude">
<script type="text/javascript">
 if(navigator.geolocation)
  {
     navigator.geolocation.getCurrentPosition(maPosition);       
  }
 function maPosition(position) 
 {
   var MyLatitude = position.coords.latitude ;           
   var MyLongitude=position.coords.longitude;                                                        
   document.getElementById("MaLatitude").value=MyLatitude;                                    document.getElementById("MaLongitude").value=MyLongitude;                                                                   
 }                              
 var latOrigin=document.getElementById("MaLatitude").value;
 var lngOrigin=document.getElementById("MaLongitude").value;
 </script>      
 <div class="table-responsive" id="tabtj">  </div>

Code de la page ListeOTJournaliere.php

<?php
include("connect.php");
$Code_Equipe=$_GET['Code_Equipe'];
$current_date=date('Y-m-j');
$latOrigin=$_GET['latOrigin'];
$lngOrigin=$_GET['lngOrigin'];
?>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">    
    <title>LTH</title>    
    <script src=""quot;"quot;"quot;"quot;"quot;https://maps.googleapis.com/maps/api/js?key=My_Key_Value=fr" type="text/javascript"></script>
</head>
<body onload="CalculDistance()">
<table class="table table-bordered table-hover table-striped">
                                            <thead>
                                                <tr>
                                                   <th>N° OT</th>
                                                   <th>Client</th> 
                                                   <th>Distance (KM)</th> 
                                                   <th>Durée (MN)</th>  
                                                   <th> Etat </th>
                                                   <th> Itinéraire</th>                                                
                                                </tr>
                                            </thead>
 <?php
$sql = "select NOrdredeTravail,DatePlanification,RaisonSociale,CClient,Longitude,Latitude from GP_OrdredeTravail 
 where CSousTraitant='$Code_Equipe' and DatePlanification='$current_date'";
 $stmt = sqlsrv_query( $conn, $sql );
 $nl=0;                             
 while( $row = sqlsrv_fetch_array( $stmt, SQLSRV_FETCH_NUMERIC) ) 
{ 
 $num_ordre_de_travail=$row[0];  
 $code_client=$row[3];                                                                                       
  ?>
<tbody> 
 <tr>
 <td id="identifiant"><?php echo $num_ordre_de_travail ?></td>                                                
  <td> <?php echo $row[2]; ?> </td> 
<td id="DistanceTrj"> </td>
<td id="DureeTrj"> </td> </tr>
<?php
 }
sqlsrv_free_stmt($stmt); 
 ?>                                                 
 </tbody>
 </table>
 <input type="hidden" id="Distance">
 <input type="hidden" id="Duree">

code de la fonction qui calcule la distance et la durée :

 <script type="text/javascript">
  var latOrigin=<?php echo $latOrigin ?>;
  var lngOrigin=<?php echo $lngOrigin ?>;
  var source=latOrigin+","+lngOrigin;
  var latDest=<?php echo $latDest ?>;
  var lngDest=<?php echo $lngDest ?>;  
  var destination=latDest+","+lngDest;

function CalculDistance()
    {       
            var service = new google.maps.DistanceMatrixService();                   
            service.getDistanceMatrix(
            {
                origins: [source],
                destinations: [destination],
                travelMode: google.maps.TravelMode.DRIVING,
                unitSystem: google.maps.UnitSystem.METRIC,
                avoidHighways: false,
                avoidTolls: false
            },
             function (response, status)
             {
                if (status == google.maps.DistanceMatrixStatus.OK && response.rows[0].elements[0].status != "ZERO_RESULTS")
                {
                    var dst = response.rows[0].elements[0].distance.text;  
                    document.getElementById("Distance").value=dst;                                   
                    var duration = response.rows[0].elements[0].duration.text;  
                    document.getElementById("Duree").value=duration;
                }
                else 
                {
                    alert("Unable to find the distance via road.");
                }
            }
            );
            var xhr = new XMLHttpRequest();
            var DistanceTrajet = document.getElementById("Distance").value;
            var DureeTrajet=document.getElementById("Duree").value;
            xhr.open("GET", "DistanceDureeTab.php?DistanceTrajet="+DistanceTrajet+"&DureeTrajet="+DureeTrajet,true);
            xhr.send(null);
            xhr.onreadystatechange = result;
            function result()
            {
             if((xhr.status == 200)&&(xhr.readyState==4))      
             document.getElementById("DistanceTrj").innerHTML=xhr.responseText;
            }
    }
    </script>

EDIT : Ajout du LANGAGE dans les balises de code (pour avoir la coloration syntaxique !!! )

A voir également:

Afficher le resultat de requete Ajax dans une colonne de tableau
Tableau croisé dynamique - Guide
Déplacer une colonne excel - Guide
Code ascii tableau - Guide
Les données fournies dans le fichier à télécharger peuvent être synthétisées par le tableau récapitulatif suivant. dans le fichier, générez ce tableau automatiquement (tableau croisé dynamique ou table de pilote) à partir des 4 premières colonnes. cinq valeurs manquent dans le tableau suivant. retrouvez-les dans votre tableau puis reportez-les, arrondies à l’entier le plus proche, dans la zone de réponse. - Forum Excel

1 réponse

Réponse 1 / 1

jordane45 Messages postés 38263 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 28 octobre 2024 4 693
27 févr. 2017 à 15:27

Bonjour,

Il y a plusieurs choses qui ne vont pas dans tes codes ...
Déjà .. tu ne récupères toujours pas PROPREMENT les variables AVANT de les utiliser (ce n'est pas faute de te l'avoir déjà dit une bonne cinquantaine de fois ...)
Comme ceci :

// ceci :
$lngOrigin=$_GET['lngOrigin'];
// est à remplacer par :
$lngOrigin = !empty($_GET['lngOrigin']) ? $_GET['lngOrigin'] : NULL ;

Ensuite, tu fais appel au fichier : ListeOTJournaliere.php
Il est préférable de ne pas y générer du code html dedans mais de retourner simplement un array contenant les valeurs à exploiter ensuite dans ton code JS. (en gros... QUE le résultat de ta requête).

Et ça sera DANS ton code JS que tu crééras le tableau et fera appel à tes fonctions de "calcul".

Reviens nous voir lorsque tu auras apporté ces corrections.....

Discussions similaires

liste de noms par ordre alphabétique

Impossible d'afficher le rapport de tableau croisé dynamique sur un rapport

ou sont les bananes ?

problème avec graphQL

Tableau croisé dynamique - absence de certaines données