Forum |  HardWare.fr | News | Articles | PC | S'identifier | S'inscrire | Shop Recherche
823 connectés 

  FORUM HardWare.fr
  Programmation
  PHP

  actualiser donnée database via liste deroulante ajax

 


 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

actualiser donnée database via liste deroulante ajax

n°2331629
clank
Posté le 09-04-2019 à 15:41:09  profilanswer
 

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
mood
Publicité
Posté le 09-04-2019 à 15:41:09  profilanswer
 

n°2331648
MaybeEijOr​Not
but someone at least
Posté le 09-04-2019 à 17:19:33  profilanswer
 

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.
n°2331658
David Bori​ng
Posté le 09-04-2019 à 19:33:09  profilanswer
 

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.
 

n°2331761
clank
Posté le 11-04-2019 à 12:20:55  profilanswer
 

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
n°2331763
David Bori​ng
Posté le 11-04-2019 à 12:37:59  profilanswer
 

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

n°2331767
clank
Posté le 11-04-2019 à 14:07:13  profilanswer
 

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 ?

n°2331770
David Bori​ng
Posté le 11-04-2019 à 14:47:52  profilanswer
 

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

n°2331771
MaybeEijOr​Not
but someone at least
Posté le 11-04-2019 à 15:00:59  profilanswer
 

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.

Aller à :
Ajouter une réponse
  FORUM HardWare.fr
  Programmation
  PHP

  actualiser donnée database via liste deroulante ajax

 

Sujets relatifs
[résolu] liste A dans B, modifier A modifie B ?Aide vba word choix dans une liste
[PYTHON] Récupérer les donnée d'un programmeEncodage d'un fichier jpeg via Ajax
Supprimer un doublon dans une liste pythonFichier XML / Base de donnée
liste des feuilles d'un fichier excelPerl - Tableau associatif et liste
Extraction donnée TXTConception de base de donnée
Plus de sujets relatifs à : actualiser donnée database via liste deroulante ajax


Copyright © 1997-2022 Hardware.fr SARL (Signaler un contenu illicite / Données personnelles) / Groupe LDLC / Shop HFR