Cliquer sur un menu déroulant + affichage instantané

Marsh Posté le 15-04-2015 à 14:52:21

Bonjour tout le monde,
Je me permets de venir demander votre aide car je bloque sur mon code depuis 2 jours et j'espère que quelqu'un, ici, pourra m'éclairer.
Je réalise actuellement un code PHP dans lequel se trouve un menu déroulant récupérant des données de ma base Mysql.
J'aimerais pouvoir sélectionner les champs que je souhaite de mon menu déroulant, et , lors de la sélection d'un ou plusieurs champs, récupérer de manière instantanée mes choix dans un tableau sur la même page.
En regardant différents forums, j'ai pu constater que cela nécessitait l'utilisation de javascript et j'avoue que je ne vois pas du tout comment m'y prendre.

Je vous remercie d'avance de bien vouloir m'éclairer

Voici mon code pour le moment:

<label for="CodeConducteur">Code conducteur : </label>

<?php

$db = mysqli_connect("localhost", "root", "" ) or die("Impossible de se connecter : " . mysqli_error());
mysqli_select_db($db,'drupal') or die("Impossible de se connecter à la base de données : " . mysqli_error());
$req = "SELECT CodeConducteur FROM dbo_conducteurs WHERE (((dbo_Conducteurs.IdGroupe)=5) AND ((dbo_Conducteurs.DateFinActif) = '')) ORDER BY dbo_Conducteurs.CodeConducteur";
$res = mysqli_query($db, $req);

echo "<SELECT NAME='CodeConducteur' onChange='FocusObjet()'>";
while ($result = mysqli_fetch_array($res)) {
echo "<OPTION VALUE='$result[0]'>$result[0]</OPTION>\n";
}
echo "</SELECT>";

mysqli_close($db);

?>

Reply

Marsh Posté le 15-04-2015 à 14:52:21

Reply

Marsh Posté le 15-04-2015 à 23:35:00

Bonjour Cédric,

En fait ce que tu veux faire c'est typiquement de l'Ajax.
Cette page te donnera un bon exemple : http://www.w3schools.com/php/php_ajax_database.asp

et la manière de faire

Reply

Marsh Posté le 16-04-2015 à 10:01:22

Merci beaucoup! C'était vraiment ça que je voulais, ça marche niquel.

Par contre, par rapport au code présenté sur le lien que tu m'as fourni, est-il possible d'ajouter plusieurs entrées dans le tableau en gardant en mémoire la sélection précédente ?
Je m'explique.

Dans ce code, à chaque nouveau choix dans le menu déroulant, la sélection précédente disparait et est remplacée par le nouveau choix.

Maintenant, admettons que je choisisse dans mon menu déroulant: Dupont Pierre
-> Dupont Pierre s'inscrit dans le tableau automatiquement.
Si je veux maintenant sélectionner Durand Jean dans mon menu déroulant, comment faut-il modifier le code pour obtenir dans le tableau:

-Dupont Pierre
-Durant Jean

Merci d'avance

Reply

Marsh Posté le 16-04-2015 à 10:45:48

Voici mon code:

fichier HTML

<html>
<head>
<script>
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;
}
}
xmlhttp.open("GET","getuser.php?q="+str,true);
xmlhttp.send();
}
}
</script>
</head>
<body>

<form>
<select name="NomConducteur" onchange="showUser(this.value)">
<option value="">Choisir un VP:</option>
<option value="328">Ballesteros Carmen</option>
<option value="516">Benoiton Julio</option>
<option value="517">Bonaccio Herve</option>
<option value="137">Chami Mustapha</option>
<option value="274">Chamot Daniel</option>
<option value="444">Poplimont Jean-Pierre</option>
<option value="475">Paubert Laurence</option>
<option value="497">Truffet Alain</option>
</select>
</form>
<br>
<div id="txtHint"><b></b></div>

</body>
</html>

Fichier PHP

<!DOCTYPE html>
<html>
<head>
<style>
table {
width: 50%;
border-collapse: collapse;
}

table, td, th {
border: 1px solid black;
padding: 5px;
}

th {text-align: left;}
</style>
</head>
<body>

<?php
$q = intval($_GET['q']);

$con = mysqli_connect('localhost','root','','drupal');
if (!$con) {
die('Could not connect: ' . mysqli_error($con));
}

mysqli_select_db($con,"ajax_demo" );
$sql="SELECT CodeConducteur, NomConducteur, PrenomConducteur FROM dbo_conducteurs WHERE (((dbo_Conducteurs.IdConducteur)= '".$q."') AND ((dbo_Conducteurs.DateFinActif) = '') ) ORDER BY dbo_Conducteurs.CodeConducteur";
$result = mysqli_query($con,$sql);

echo "<table>
<tr>
<th>Code Conducteur</th>
<th>Nom Conducteur</th>
<th>Prenom Conducteur</th>
</tr>";
while($row = mysqli_fetch_array($result)) {
echo "<tr>";
echo "<td>" . $row['CodeConducteur'] . "</td>";
echo "<td>" . $row['NomConducteur'] . "</td>";
echo "<td>" . $row['PrenomConducteur'] . "</td>";
echo "</tr>";
}
echo "</table>";
mysqli_close($con);
?>
</body>
</html>

Reply

Marsh Posté le 16-04-2015 à 11:42:58

Dans ce cas le mieux c'est d'enregistrer dans un tableau (array) javascript les choix qui ont été fait en les cumulants.

Pour ça :
Déclare un tableau au début de ta page du genre : var MonTableau = new Array();
Dans la fonction showUser(id), tu fais MonTableau.push(id) pour ajouter l'id sélectionner au tableau.

Une fois ceci fait, tu constitues une chaîne d'ids séparée par des virgules : var strLstId=MonTableau.join(',');
Et tu passes cette variable (strLstId) en paramètre (D'ailleurs je te conseille d'utiliser du POST au lieu du GET).

(Je te conseille de prévoir aussi un bouton de reset pour réinitialiser ton tableau)

Côté PHP et SQL au lieu d'utiliser (dbo_Conducteurs.IdConducteur)= '".$q."' tu utiliseras (dbo_Conducteurs.IdConducteur) IN ( '".$q."')

Message édité par antac le 16-04-2015 à 11:46:07

Reply

Marsh Posté le 16-04-2015 à 11:48:11

Merci je vais essayer de faire ça, si j'y arrive. Je ne suis pas une flèche en php.
Merci de m'aider en tous cas.

Reply

Marsh Posté le 16-04-2015 à 14:26:38

Je n'y arrive pas ...

Reply

Marsh Posté le 16-04-2015 à 15:00:51

Qu'est ce qui te bloque ?

Reply

Marsh Posté le 16-04-2015 à 15:02:38

Je ne vois pas où placer les différentes lignes de code que tu m'as écrit. J'ai essayé mais mon tableau ne s'affiche même plus lorsque j'actualise ma page.
( J'avais prévenu, je suis mauvais ahaha)

Reply

Marsh Posté le 16-04-2015 à 21:27:47

Poste ton code modifié

Message édité par antac le 16-04-2015 à 21:28:38

Reply

Marsh Posté le 16-04-2015 à 21:27:47

Reply

Marsh Posté le 17-04-2015 à 08:37:15

<html>
<head>
<script>

var Tableau = new Array();
var strLstId = Tableau.join(',');

function showUser(str, strLstId) {
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;

}
}
xmlhttp.open("POST","getuser2.php?q="+str,true,);
Tableau.push(str);
xmlhttp.send();

}

}

</script>
</head>
<body>

<form>
<select name="NomConducteur" onchange="showUser(this.value)">
<option value="">Choisir un VP:</option>
<option value="328">Personne1</option>
<option value="516">Personne2</option>
<option value="517">Personne3</option>
<option value="137">Personne4</option>
<option value="274">Personne5</option>
<option value="444">Personne6</option>
<option value="475">Personne7</option>
<option value="497">Personne8</option>
</select>
</form>
<br>
<div id="txtHint"><b></b></div>

</body>
</html>

Reply

Marsh Posté le 17-04-2015 à 09:30:41

var Tableau = new Array();
var strLstId = "";

Puis dans showUser(), avant xmlhttp.open, tu fais :
Tableau.push(str);
strLstId = Tableau.join(',');
xmlhttp.open("POST","getuser2.php?q="+strLstId,true,);

---------------
Astres, outil de help-desk GPL : http://sourceforge.net/projects/astres, ICARE, gestion de conf : http://sourceforge.net/projects/icare, Outil Planeta Calandreta : https://framalibre.org/content/planeta-calandreta

Reply

Marsh Posté le 17-04-2015 à 10:00:35

Merci de m'aider
ça ne marche toujours pas mais il y a du progrès. Maintenant lorsque je clique sur un choix de mon menu déroulant, celui s'affiche et lorsque je clique sur un autre choix, le premier choix reste affiché mais n'affiche pas le second à la suite.

<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","getuser2.php?q="+strLstId,true);
xmlhttp.send();

}

}

</script>
</head>
<body>

<form>
<select name="NomConducteur" onchange="showUser(this.value)">
<option value="">Choisir un VP:</option>
<option value="328">Personne1</option>
<option value="516">Personne2</option>
<option value="517">Personne3</option>
<option value="137">Personne4</option>
<option value="274">Personne5</option>
<option value="444">Personne6</option>
<option value="475">Personne7</option>
<option value="497">Personne8</option>
</select>
</form>
<br>
<div id="txtHint"><b></b></div>

</body>
</html>

Reply

Marsh Posté le 17-04-2015 à 10:25:02

Ah oui et autre petit problème, que je fasse mon premier choix sur personne 1, personne 2 ou 3 4 5 6 7 8, il n'y a que le nom,prenom,code de la personne 1 qui apparait.

Reply

Marsh Posté le 17-04-2015 à 10:32:33

Ca vient de ça, je pense : document.getElementById("txtHint" ).innerHTML = xmlhttp.responseText;

Ton script php, il revoie quoi comme réponse : ce qui est attendu ou un truc moisi ? En gros, faut déterminer si c'est la source de données qui est fausse mais affichée correctement ou si la source de données et bonne mais mal affichée.

---------------
Astres, outil de help-desk GPL : http://sourceforge.net/projects/astres, ICARE, gestion de conf : http://sourceforge.net/projects/icare, Outil Planeta Calandreta : https://framalibre.org/content/planeta-calandreta

Reply

Marsh Posté le 17-04-2015 à 10:45:13

ça me renvoie bien les informations que je souhaite, donc je pense pas que la requete sql ait un problème.
C'est juste que maintenant, lorsque je clique sur mon menu déroulant, quelle que soit la personne que je sélectionne, ça me renvoie les informations concernant "personne1" qui restent affichées même si je clique sur un autre choix par la suite.

Je t'envoie mon document php pour que tu puisses voir.

<!DOCTYPE html>
<html>
<head>
<style>
table {
width: 50%;
border-collapse: collapse;
}

table, td, th {
border: 1px solid black;
padding: 5px;
}

th {text-align: left;}
</style>
</head>
<body>

<?php
$q = intval($_GET['q']);

$con = mysqli_connect('localhost','root','','drupal');
if (!$con) {
die('Could not connect: ' . mysqli_error($con));
}

mysqli_select_db($con,"ajax_demo" );
$sql="SELECT CodeConducteur, NomConducteur, PrenomConducteur FROM dbo_conducteurs WHERE (((dbo_Conducteurs.IdConducteur)= '".$q."') AND ((dbo_Conducteurs.DateFinActif) = '') ) ORDER BY dbo_Conducteurs.CodeConducteur";
$result = mysqli_query($con,$sql);

echo "<table>
<tr>
<th>Code Conducteur</th>
<th>Nom Conducteur</th>
<th>Prenom Conducteur</th>
</tr>";
while($row = mysqli_fetch_array($result)) {
echo "<tr>";
echo "<td>" . $row['CodeConducteur'] . "</td>";
echo "<td>" . $row['NomConducteur'] . "</td>";
echo "<td>" . $row['PrenomConducteur'] . "</td>";
echo "</tr>";
}
echo "</table>";
mysqli_close($con);
?>
</body>
</html>

Reply

Marsh Posté le 17-04-2015 à 11:36:07

To PHP est pas bon.

Une foisla requête SQL faite, tu doit envoyer la portion de HTML à afficher à ton navigateur dans la <div> prévue et non une page HTML entière.

Tu doit donc mettre :

Code :

// Ta requête SQL ici puis :
header("Content-type: text/html; charset=UTF-8" );
echo "<table>
<tr>
<th>Code Conducteur</th>
<th>Nom Conducteur</th>
<th>Prenom Conducteur</th>
</tr>";
while($row = mysqli_fetch_array($result)) {
    echo "<tr>";
    echo "<td>" . $row['CodeConducteur'] . "</td>";
    echo "<td>" . $row['NomConducteur'] . "</td>";
    echo "<td>" . $row['PrenomConducteur'] . "</td>";
    echo "</tr>";
}
echo "</table>";
mysqli_close($con);

---------------
Astres, outil de help-desk GPL : http://sourceforge.net/projects/astres, ICARE, gestion de conf : http://sourceforge.net/projects/icare, Outil Planeta Calandreta : https://framalibre.org/content/planeta-calandreta

Reply

Marsh Posté le 17-04-2015 à 12:33:05

C'est ta requête SQL qui est mauvaise. Comme je t'ai dit (dbo_Conducteurs.IdConducteur)= '".$q."') doit être modifié par

(dbo_Conducteurs.IdConducteur) IN (".$q." ))
Afin de gérer la conditions sur toutes les valeurs passées.

Par contre, on voit clairement que tu ne comprends pas ce que tu écris... Faut y aller progressivement avant de taper dans l'ajax, faut déjà comprendre un poil le fonctionnement du javascript et des divs

Message édité par antac le 17-04-2015 à 21:47:27

Reply

Marsh Posté le 17-04-2015 à 14:13:59

Je sais que je ne comprends pas grand chose au code que je fais, mais c'est dans le cadre d'un projet de stage, du coup je n'ai pas le temps d'apprendre tous les langages... Je suis un peu pressé par mon tuteur...

J'ai suivi tes conseils pour la requête sql mais ça ne change rien au problème pour le moment.

Reply

Marsh Posté le 17-04-2015 à 15:42:38

Un petit tour sur OpenClassRoom te serait fort utile concernant Ajax
Et la période de stage est justement le bon moment pour apprendre de nouveaux langages ou se perfectionner. Un projet de stage n'a pas l'obligation d'aboutir (du reste, un nb important de stages n'aboutissent pas à un résultat directement exploitable par l'entreprise). Par contre, le stage doit avoir permis à l'étudiant d'avoir appris des choses en plus par rapport à ce qu'il connaissait en sortant de son école et pour l'entreprise, d'avoir au moins déblayé le terrain et voir les pistes à laisser de côté et celles à explorer ou retenir et mettre en oeuvre dans un autre stage ou une vrai mission

Message cité 1 fois

---------------
Astres, outil de help-desk GPL : http://sourceforge.net/projects/astres, ICARE, gestion de conf : http://sourceforge.net/projects/icare, Outil Planeta Calandreta : https://framalibre.org/content/planeta-calandreta

Reply

Marsh Posté le 17-04-2015 à 16:04:56

Merci du conseil rufo, j'essaye mais j'ai vraiment envie de réaliser ce projet, j'ai horreur des choses non terminées.
Pour moi, les balises <div> servent uniquement pour les id afin de les gérer avec le css. Dans mon cas, je vais par la suite incorporer les codes dans un site sous Drupal.

Est-ce-cela que tu voulais que je fasse ?

<div id="txtHint">
<?php
header("Content-type: text/html; charset=UTF-8" );
echo "<table>
<tr>
<th>Code Conducteur</th>
<th>Nom Conducteur</th>
<th>Prenom Conducteur</th>
</tr>";
while($row = mysqli_fetch_array($result)) {
echo "<tr>";
echo "<td>" . $row['CodeConducteur'] . "</td>";
echo "<td>" . $row['NomConducteur'] . "</td>";
echo "<td>" . $row['PrenomConducteur'] . "</td>";
echo "</tr>";
}
echo "</table>";
?>
</div>

<?php
mysqli_close($con);
?>

Reply

Marsh Posté le 17-04-2015 à 16:20:27

Tu ne comprends vraiment pas ce que tu fais, le code que tu postes le démontre clairement. Manifestement, tu ne capte pas l'enchaînement des portions de codes exécutées côté client et serveur. :pfff:

<div id="txtHint">
<?php
header("Content-type: text/html; charset=UTF-8" );

--> ça n'a aucun sens. <div id="txtHint"> est côté client et déjà dans la page affichée alors que le script php qui doit générer le contenu à la volée de la div via ajax se fait côté serveur et ne vas envoyer qu'une portion de html à ta page déjà affichée.

Franchement, si tu veux gagner du temps et finir ton projet, vas sur OpenClassRoom et passe une journée ou 2 à lire leurs tutos sur Ajax (et éventuellement javascript si tu connais pas trop). Tu verras qu'ensuite, tu perdras beaucoup moins de temps à développer et à pas comprendre pourquoi ce que tu fais ne fonctionne pas

Edit : ah oui, et lire la doc de php, ça peut te servir aussi. Si t'avais lu à quoi sert header(), t'aurais vite vu que le mettre là après avoir mis <div id="txtHint"> avant allait générer un msg d'erreur de php

Message édité par rufo le 17-04-2015 à 16:21:59

---------------
Astres, outil de help-desk GPL : http://sourceforge.net/projects/astres, ICARE, gestion de conf : http://sourceforge.net/projects/icare, Outil Planeta Calandreta : https://framalibre.org/content/planeta-calandreta

Reply

Marsh Posté le 19-04-2015 à 06:33:03

rufo a écrit :

Et la période de stage est justement le bon moment pour apprendre de nouveaux langages ou se perfectionner. Un projet de stage n'a pas l'obligation d'aboutir (du reste, un nb important de stages n'aboutissent pas à un résultat directement exploitable par l'entreprise). Par contre, le stage doit avoir permis à l'étudiant d'avoir appris des choses en plus par rapport à ce qu'il connaissait en sortant de son école et pour l'entreprise, d'avoir au moins déblayé le terrain et voir les pistes à laisser de côté et celles à explorer ou retenir et mettre en oeuvre dans un autre stage ou une vrai mission

Exactement, donc si ton tuteur n'a pas conscience de cela, il faudra le lui indiquer qu'il ne s'agit qu'une "base", pas de quelque chose d'opérationnel à la suite.
Beaucoup d'entreprises prennent des stagiaires pour faire du remplacement ou pour les mettre sur un projet de manière à ne pas embaucher quelqu'un temporairement, ça leur coûte beaucoup moins cher de faire ainsi... à voir aussi quels sont tes objectifs par rapport à ta formation, si tu as pris un stage de développement PHP/SQL/Ajax mais que tu vas bosser par la suite dans un tout autre sujet (Admin AD par exemple), t'as raté ton objectif de formation [:spamatounet]

Je conseillerais aussi de regarder les log de PHP sur ton serveur, et d'utiliser error_log (voir le manuel PHP dessus) pour te faire des traces pour savoir si ton script PHP se déroule bien.
Si tu faisais vraiment un développement de "manière pro", il faudrait aussi regarder les logs du serveur SQL pour optimiser les demandes et la base SQL.

---------------
Grippe ? Coronavirus ? Portez votre masque correctement ! :D

Reply

Marsh Posté le 19-04-2015 à 22:30:01

Regarde aussi du côté de firebug pour analyser les paramètres et les retours de ton appel ajax

Reply

Marsh Posté le 20-04-2015 à 10:11:31

Je me demande si Firebug est toujours nécessaire vu les outils de dév inclus dans les dernières versions de Firefox...

---------------
Astres, outil de help-desk GPL : http://sourceforge.net/projects/astres, ICARE, gestion de conf : http://sourceforge.net/projects/icare, Outil Planeta Calandreta : https://framalibre.org/content/planeta-calandreta

Reply

Marsh Posté le 20-04-2015 à 12:31:40

Ah quand même, je trouve Firebug mieux personnellement.... Mais c'est peut être aussi une question d'habitude.

Message édité par antac le 20-04-2015 à 12:31:56

Reply

Marsh Posté le

Reply

Cliquer sur un menu déroulant + affichage instantané

Sujets relatifs:

Leave a Replay