actualiser donnée database via liste deroulante ajax - PHP - Programmation
Marsh Posté le 09-04-2019 à 17:19:33
clank a écrit : index.php liste.php |
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.
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.
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
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
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 ?
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
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 :
|
et la deuxième avec :
Code :
|
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.
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 édité par clank le 09-04-2019 à 15:44:53