Passage de variable javascript / php dans la même page

Fermé

abirgl Messages postés 127 Date d'inscription lundi 31 octobre 2016 Statut Membre Dernière intervention 20 juin 2017 - 27 févr. 2017 à 10:34
Reivax962 Messages postés 3672 Date d'inscription jeudi 16 juin 2005 Statut Membre Dernière intervention 11 février 2021 - 27 févr. 2017 à 14:34

Bonjour,

J'ai besoin de transformer une variable javascript en php dans la même page. Par exemple :


<script type="text/javascript">
var ma_variable="Bonjour";
</script>

J'ai besoin de la récupérer en php, donc j'obtiens :
$ma_variable="Bonjour";
J'ai utilisé ajax mais ça n'a pas donné ce que j'ai besoin (comme j'ai mentionné, j'ai besoin d'obtenir la variable php dans la même page que se trouve la variable javascript)
Quelqu'un peut m'aider SVP ?

A voir également:

Variable js to php
Qwerty to azerty - Guide
Js round ✓ - Forum Javascript
Alert php ✓ - Forum PHP
Mb to mo ✓ - Forum Matériel & Système
Copiez l'image dans un logiciel d'édition d'images ou un outil en ligne comme js paint ou pixlr e. remplissez les cases en suivant le code couleur. des cases supplémentaires vont se remplir automatiquement. que représente le dessin ? ✓ - Forum Windows

1 réponse

Réponse 1 / 1

Reivax962 Messages postés 3672 Date d'inscription jeudi 16 juin 2005 Statut Membre Dernière intervention 11 février 2021 1 011
27 févr. 2017 à 10:53

Bonjour,

Il faudrait déjà comprendre comment fonctionnent PHP, javascript, un serveur et un client.
En gros, PHP génère une page sur le serveur. Il écrit donc du html, css, javacsript ou autre.
Puis il envoie ça au navigateur client. Ce navigateur va lire la page, afficher le HTML en fonction du CSS, et interpréter le javascript contenu dans la page.

Partant de là, tu voudrais donc qu'une variable Javascript, donc créée par le navigateur, ait un effet sur un script PHP, tournant sur le serveur, et... déjà finit. Tu dois bien sentir le soucis de conception.

Il existe néanmoins des contournements. Ajax en est un : le javascript peut appeler une nouvelle page php avec certains paramètres issus du client, puis traiter la réponse de cette page PHP pour modifier l'affichage en cours.
Une autre solution serait de réaliser une redirection : quand on ouvre ta page, le javascript récupère les valeurs que tu souhaites, puis il redirige la page vers une nouvelle page (document.location.href), avec en paramètres GET toutes les valeurs récupérées.

Xavier

abirgl Messages postés 127 Date d'inscription lundi 31 octobre 2016 Statut Membre Dernière intervention 20 juin 2017
27 févr. 2017 à 14:02

Bonjour Xavier,
merci pour tes clarifications,je sais que le php s'exécute coté serveur et le javascript s'exécuté coté client mais j'ai pas trouvé comment s'en sortir de mon blocage, je t'explique ce que je veux faire, peut être tu pourras m'aider :
en fait j'ai un tableau qui contient 6 colonnes, 3 colonnes sont affichés à partir de la base , deux colonnes seront calculées dans des fonctions javascript (en fonction des variables récupérées de la base ) et la dernière colonne contient un lien qui affiche l'itinéraire gps (dépend de la latitude et la longitude de chaque client dans la base et de ma latitude et longitude que j'ai récupérée en javascript) , ce que j'ai fait donc c'est d'envoyer ma latitude et ma longitude en ajax à une autre page que j'ai nommé ListeOTJournaliere.php et puis j'ai renvoyé tout le tableau à la page initiale (Accueil.php)
tout est bien sauf que les deux colonnes calculés en Javascript ne s'affichent pas,
Je vous montre mon code :
page Accueil.php


<?php
include("connect.php");
$Code_Equipe=$_GET['id'];
$current_date=date('Y-m-j');
?>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>LTH</title>
<script type="text/javascript">
function TabOTJournaliere()
{
  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="TabOTJournaliere()">
 <div class="row">
 <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>
<div class="table-responsive" id="tabtj"> </div>
</body>
</html>

Voici le 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;https://maps.googleapis.com/maps/api/js?key=AIzaSyDm85_icmgwRYEITWUiNSghvz30CZnB6NQ&language=fr" type="text/javascript"></script>

</head>
<body>
<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>
 $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) ) 
  {    $code_client=$row[3];                                                                                       
   ?>
 <tbody>
 <tr>
 <td id="identifiant"><?php echo $num_ordre_de_travail ?></td>                                                
  <td> <?php echo $row[2]; ?> </td> 
  <td class="distance" > </td>
 <td class="duree"> </td>
  <td onmouseover="this.style.cursor='pointer'" onclick="<?php echo $onclick; ?>"> <?php echo $etat;?> </td>                                                    
  <td>
<?php
  $tab_coordonnees_client=array();
  $sql_coordonnees_client="select Longitude , Latitude From Client where CClient='$code_client' ";
$stmt_coordonnees_client=sqlsrv_query($conn, $sql_coordonnees_client);$rslt_coordonnees_client=sqlsrv_fetch_array($stmt_coordonnees_client, SQLSRV_FETCH_NUMERIC);                                                    
 $lngDest=$rslt_coordonnees_client[0];
 $latDest=$rslt_coordonnees_client[1];
 $lngLatDest=$lngDest.",".$latDest;
 array_push($tab_coordonnees_client, $lngLatDest);
 echo "<a href='https://www.google.com/maps/dir/$latOrigin,$lngOrigin/$latDest,$lngDest' rel="nofollow noopener noreferrer" target="_blank">
 <img src="">
 </a>";
?>                                                                                               
 </td>                                                                                                  
 </tr>
 <?php
 }
  sqlsrv_free_stmt($stmt); 
 ?>                                                 
 </tbody>
 </table>
<script>
var TabDist = ['distance1', 'distance2', 'distance3'];
var distanceCells = document.querySelectorAll('td.distance');
for (var i = 0; i < distanceCells.length; i++) {
 distanceCells[i].innerHTML = TabDist[i];
}
var TabDuree = ['duree1', 'duree2', 'duree3'];
var distanceCells = document.querySelectorAll('td.duree');
for (var i = 0; i < distanceCells.length; i++) {
 distanceCells[i].innerHTML = TabDuree[i];
}
</script>
</body>
</html>

PS: J'ai défini deux tableau statiques TabDist et TabDuree pour ne pas compliquer le code, ce que je souhaite faire c'est afficher le contenu de ces deux tableau dans mes colonnes que j'ai donné comme classes distance et duree
J'espère que mon besoin est clair et que vous pourrez m'apporter de l'aide et merci d'avance

Reivax962 Messages postés 3672 Date d'inscription jeudi 16 juin 2005 Statut Membre Dernière intervention 11 février 2021 1 011
27 févr. 2017 à 14:34

Alors, si je lis bien ton code, le javascript qui n'est pas appelé, c'est celui-là :

<script>
var TabDist = ['distance1', 'distance2', 'distance3'];
var distanceCells = document.querySelectorAll('td.distance');
for (var i = 0; i < distanceCells.length; i++) {
 distanceCells[i].innerHTML = TabDist[i];
}
var TabDuree = ['duree1', 'duree2', 'duree3'];
var distanceCells = document.querySelectorAll('td.duree');
for (var i = 0; i < distanceCells.length; i++) {
 distanceCells[i].innerHTML = TabDuree[i];
}
</script>

Du coup, ce que tu peux faire, c'est le mettre dans le code d'origine de ta page, dans une autre fonction à côté de "function TabOTJournaliere()", par exemple "function CalculeColonnes()".
Et ensuite, à la fin du chargement de TabOTJournaliere(), dans le

      if((xhr.status == 200)&&(xhr.readyState==4))      
      document.getElementById("tabtj").innerHTML=xhr.responseText;

tu rajoutes un appel à cette nouvelle fonction :

      if((xhr.status == 200)&&(xhr.readyState==4)) {
            document.getElementById("tabtj").innerHTML=xhr.responseText;
            CalculeColonnes();
      }

Xavier

Discussions similaires

utiliser une variable JS dans du code php

Passage de variable JS vers PHP

Passer une variable JAVASCRIPT en une variable PHP avec AJAX

passez var javascript vers var php

Mettre variable javaScript dans variable PHP?

formulaire : possible sans php ni mysql ?