actualiser donnée database via liste deroulante ajax

actualiser donnée database via liste deroulante ajax - PHP - Programmation

Marsh Posté le 09-04-2019 à 15:41:09    

Bonjour, Je cherche depuis quelques jours un moyens de faire un formulaire afin de modifier des tables dans ma base de donnée.
 
Je m'explique. J'ai un menu déroulant qui affiche la liste de tous les membres de mon site (a partir de la BDD).
Sous ce menu, un champs inputs. J'aimerais que lorsque l'on sélectionne Clank dans la liste déroulante, l'id de Clank se trouvant dans la BDD s'inscrivent automatiquement dans les "value" des inputs.
Tout ça, sans rechargement de la page.
 
je sais que cela est possible avec AJAX mais je n'arrive pas a retourner les valeur de ma base dans l'inputs.
 
J'espère que quelqu'un pourra m'éclairer un peu sur la démarche..
 
voici mon  
 
index.php
 
<html>  
<head>  
<script>  
 
var Tableau = new Array();  
var strLstId = "";  
 
function showUser(str) {  
    if (str == "" ) {  
        document.getElementById("txtHint" ).innerHTML = "";  
        return;  
    }  
 else {  
        if (window.XMLHttpRequest) {  
            // code for IE7+, Firefox, Chrome, Opera, Safari  
            xmlhttp = new XMLHttpRequest();  
        } else {  
            // code for IE6, IE5  
            xmlhttp = new ActiveXObject("Microsoft.XMLHTTP" );  
        }  
        xmlhttp.onreadystatechange = function() {  
            if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {  
                document.getElementById("txtHint" ).innerHTML = xmlhttp.responseText;  
     
            }  
        }  
  Tableau.push(str);  
  strLstId = Tableau.join(',');  
        xmlhttp.open("POST","liste.php?q="+strLstId,true);  
  xmlhttp.send();  
   
   
    }  
     
}  
 
</script>  
</head>  
<body>  
 
<form>  
<select name="NomConducteur" onchange="showUser(this.value)">  
  <option value="">Choisir un Technicien:</option>  
  <option value="328">Personne1</option>  
 
  </select>  
</form>  
<br>  
<div id="txtHint"><b></b></div>  
 
</body>  
</html>  
 
 
 
et mon  
liste.php
 
 
<!DOCTYPE html>
<html>
<head>
</head>
<body>
 
<?php
$q = intval($_GET['q']);
 
$con = mysqli_connect('localhost', 'root', '','projet');
if (!$con) {
    die('Could not connect: ' . mysqli_error($con));
}
 
 
$sql="SELECT idTechnicien, Nom FROM technicien WHERE id = '".$q."'";
$result = mysqli_query($con,$sql);
 
header("Content-type: text/html; charset=UTF-8" );
 
echo "<table>
<tr>
<th>idTechnicien</th>
</tr>";
 
$row = mysqli_fetch_array($result);
 
while($row) {
    echo "<tr>";
    echo "<td>" . $row['idTechnicien'] . "</td>";
 echo "<td>" . $row['Nom'] . "</td>";
    echo "</tr>";
}
echo "</table>";
mysqli_close($con);
?>
</body>
</html>

Message cité 1 fois
Message édité par clank le 09-04-2019 à 15:44:53
Reply

Marsh Posté le 09-04-2019 à 15:41:09   

Reply

Marsh Posté le 09-04-2019 à 17:19:33    

clank a écrit :

index.php
[...]
        xmlhttp.open("POST","liste.php?q="+strLstId,true);
  xmlhttp.send();
[...]

 

liste.php
[...]
$q = intval($_GET['q']);
[...]

 

Bonjour,

 

Sans regarder dans le détail, il y a déjà un truc qui me choque... D'autres choses me semblent fumeuses, dont ta façon de push dans un tableau JS, de le concaténer puis de l'envoyer. Cela veut dire qu'à chaque requête tu rajoutes la précédente ?
Je me suis arrêté là pour l'instant, ce n'est probablement pas la peine d'aller plus loin sans éclaircir ces points.


Message édité par MaybeEijOrNot le 09-04-2019 à 17:21:07

---------------
C'est en écrivant n'importe quoi qu'on devient n'importe qui.
Reply

Marsh Posté le 09-04-2019 à 19:33:09    

En fait, le result de ton appel Ajax devrait te retourner un resultat sous forme de json.
Ainsi, si tu ne veux plus faire une table, mais par exemple un autre design pour afficher les infos, tu ne dois pas changer ton php.  
En outre, c'est plus léger.
 
Ensuite, tu fait ta table en javascript avec la réponse.
 

Reply

Marsh Posté le 11-04-2019 à 12:20:55    

suite a mon premier message j'ai changer  de code  
voici mon  
 
index.php
 
<html>  
<head>  
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
   
   
<!-- jQuery (Media Temple) : -->
<script charset="utf-8" src="http://code.jquery.com/jquery-1.6.1.min.js"></script>
 
<!-- Google : -->
<script charset="utf-8" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
 
<!-- Microsoft : -->
<script charset="utf-8" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.6.1.min.js"></script>
<script>  
 
var url="liste.php"+$(this).val();
 
        $.ajax({
            url:url
        }).done(function(data) {
            if(data!=null)
            {
 
  var xmlhttp = new XMLHttpRequest();
  xmlhttp.onreadystatechange = function() {
   if (this.readyState == 4 && this.status == 200) {
    var myObj = JSON.parse(this.responseText);
    var choice = document.getElementById("choice" );
                while (choice.firstChild) {
                    choice.removeChild(choice.firstChild);
                }
    $("#id" ).val(myObj[0].id);
    for (var i = 0; i < myObj.length; i++) {
                    var option = document.createElement('option');
                    option.text = myObj[i].Nom;
                    option.value = myObj[i].idTechnicien;
                    choice.add(option);
                }
     $('#choice').change(function () {
                    $('#id').val($(this).find(':selected').data('id'));
                    document.getElementById("id" ).value = this.value;
                });
     
   }
   };
   }
  });
 
  xmlhttp.open("GET", "liste.php", true);
  xmlhttp.send();
 
</script>  
</head>  
<body>  
 
<form>  
<select  id="choice" name="choice">  
<option></option>
  </select>  
</form>  
<br>  
<div id="container"><b></b></div>  
 
<input type ="tel" id="id" name="id" type="text"  class="ajax" >
 
</body>  
</html>  
 
et mon  
 
liste.php
 
 
<!DOCTYPE html>
<html>
<head>
 
 
</head>
<body>
 
<?php  
function console_log( $data ){
  echo '<script>';
  echo 'console.log('. json_encode( $data ) .')';
  echo '</script>';
}
 
  $connect=mysql_connect('localhost','root','');
  mysql_select_db('projet');
 
  $result = mysql_query("SELECT idTechnicien, Nom FROM technicien  " );
   
  if (!$result) {
   die('Requête invalide : ' . mysql_error());
  }
 
        $info = array();
  while ($row = mysql_fetch_array($result, MYSQL_ASSOC)) {
            $table = array(); // création d'un tableau
            $table['Nom'] = $row['Nom'];
            $table['idTechnicien'] = $row['idTechnicien'];
   $info[] = $table;
        }
  console_log( $info );
   
  $myJSON = json_encode($info);
  echo $myJSON;
   
  mysql_free_result($result);
 
?>
 
 
</body>
</html>
 
 
mais je ne recois toujours rien dans mon select :/


Message édité par clank le 11-04-2019 à 12:23:42
Reply

Marsh Posté le 11-04-2019 à 12:37:59    

Tu dois faire ton select en php, pour avoir comme value l'ID à rechercher dans ta base.
Ensuite, avec la réponse, tu fais une table en js
 
https://codepen.io/anon/pen/wZdPzP
 
Pour info, un seul script vers jQuery est suffisant

Reply

Marsh Posté le 11-04-2019 à 14:07:13    

d'accord pour le script jQuerry mais les information du select doit venir de ma base de donnée et apres avoir afficher cela dans mon select je doit afficher dans mon input ces information donc une table javascript n'est pas bon pour moi si ?

Reply

Marsh Posté le 11-04-2019 à 14:47:52    

Donc c'est encore plus simple, tu récupère la valeur de l'option  et tu l'affiche dans un input.
Mais pourquoi tu veux mettre l'ID dans un input?
 
Je ne vois pas le rapport avec Ajax

Reply

Marsh Posté le 11-04-2019 à 15:00:59    

Je pense qu'il faut revoir ton problème, il faut faire plus simple, surtout vu que tu n'as pas l'air très au point dans le code.
Tu peux tout faire en une fois sur une seule page.

 

Si tu proposes un select avec le nom de chaque utilisateur c'est que tu les charges déjà une fois depuis la bdd. Du coup autant tout faire lors de cette étape.

 

Tu crées un fichier php qui dedans se connecte à ta bdd. Tu effectues une requête qui récupère le nom de tous les techniciens et leur id associée dans un tableau (php).

 

Tu crées ensuite deux variables PHP, une première de type string et une seconde de type array.

 

Tu parcoures ton tableau de résultats de la requête, pour chaque ligne tu alimentes tes deux variables PHP, la première avec :

Code :
  1. maString .= '<option>' . nom . '</option>';


et la deuxième avec :

Code :
  1. array_push(monArray, nom . ': ' . id);
 

Ensuite tu crées ton HTML dans lequel tu places dans l'en-tête le JS avec un objet qui reprendra les valeurs de ton tableau créé en PHP (monArray).
Au niveau du select tu mettras le contenu de ta variable string (maString).

 

Dans l'en-tête tu crées une fonction JS qui à chaque fois que la valeur du select change va changer le contenu de ton input. Pour cela, la fonction doit récupérer la valeur du select et modifier le contenu de l'input avec la valeur de la propriété de ton objet JS qui a le nom de la valeur du select.


Message édité par MaybeEijOrNot le 11-04-2019 à 15:01:52

---------------
C'est en écrivant n'importe quoi qu'on devient n'importe qui.
Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed