Sujet Précédent Sujet Suivant

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 38138 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 17 avril 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 !!! )

1 réponse

Réponse 1 / 1
jordane45 Messages postés 38138 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 17 avril 2024 4 649
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.....




0

Discussions similaires

programme qui n'affiche pas le mot secret
EMy.chev -
yg_be -

3 réponses
liste de noms par ordre alphabétique
alma -
alma13 -

23 réponses
ou sont les bananes ?
Liline -
Le Pro -

2 réponses
problème avec graphQL
dancris11 -
hachel58 -

50 réponses
exo pix
Xtyller -
Raymond PENTIER -

2 réponses