[Java/PHP/AJAX] création de listes déroulantes dynamiques
PL29
-
yamdjio Messages postés 90 Date d'inscription Statut Membre Dernière intervention -
yamdjio Messages postés 90 Date d'inscription Statut Membre Dernière intervention -
Bonjour,
Je vous explique la situation :
Je travaille sur du php, de l'html, du java et de l'ajax.
Pour le moment j'ai un petit bloc d'informations :
-Liste déroulante contenant des utilisateurs
-zone de texte qui affiche l'adresse mail de l'utilisateur sélectionné dans la liste (instantanément d'où l'utilisation de l'AJAX).
J'aimerai que quand je clique sur un bouton 'Ajouter' ce même bloc se crée, que la liste déroulante soit remplie par les mêmes utilisateurs qu'au-dessus, et que la zone de texte créée se remplisse toujours dynamiquement comme elle fait déjà.
Je sais que je dois faire une fonction en Java mais je n'y suis pas arrivé alors si vous avez une solution je suis preneur.
Merci d'avance !
Voici mon code :
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Techniques AJAX - XMLHttpRequest</title>
<script type="text/javascript" src="oXHR.js"></script>
<script type="text/javascript">
//Partie Ajax permettant la communication de données entre le client et le serveur
function request(oSelect) {
value = oSelect.options[oSelect.selectedIndex].value;
var xhr = getXMLHttpRequest();
xhr.onreadystatechange = function() {
if (xhr.readyState == 4 && (xhr.status == 200 || xhr.status == 0)) {
readData(xhr.responseXML);
document.getElementById("loader").style.display = "none";
} else if (xhr.readyState < 4) {
document.getElementById("loader").style.display = "inline";
}
};
//Utilisation de la méthode POST pour transmettre les infos
xhr.open("POST", "Traitement.php", true);
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
//Transmis à la page de Traitement (Traitement.php) pour une utilisation immédiate.
xhr.send("idUser=" +value);
}
function readData(oData) {
var nodes = oData.getElementsByTagName("item");
var oSelect = document.getElementById("stock");
var oOption, oInner;
oSelect.innerHTML = "";
for (var i=0, c=nodes.length; i<c; i++) {
oOption = document.createElement("input");
oInner = document.createTextNode(nodes[i].getAttribute("name"));
oOption.value = nodes[i].getAttribute("name");
oOption.style="width:350px; border:0px; background-color:#f2f2f2";
oOption.appendChild(oInner);
oSelect.appendChild(oOption);
}
}
</script>
</head>
<body>
<div style="background-color:#8ed4d8;width:425px">
<strong>
<center>Attribué à :</center>
</strong>
</div>
<div id="base" style="background:#f2f2f2;border-bottom:0px;width:425px;display: inline-block;">
<div id="Box">
<p id="users">
<img src="/glpi/pics/users.png" height="20px" width="20px"/>
<select id="usersSelect" onchange="request(this);">
<option value="none" selected>Selection</option>
<?php
try
{
// On se connecte a MySQL
$bdd = new PDO('mysql:host=localhost;dbname=glpibd', 'root', '');
}
catch(Exception $e)
{
die('Erreur : ' . $e->getMessage());
}
$reponse = $bdd->query("SELECT id,name FROM glpi_users ORDER BY name");
while ($donnees = $reponse->fetch())
{
echo "\t\t\t\t<option value=\"" . $donnees["id"] . "\">" . $donnees["name"] . "</option>\n";
}
?>
</select>
<!--<img src="/glpi/pics/aide.png" height="15px" width="15px">-->
<img src="/glpi/pics/add_dropdown.png" name="Ajouter" height="15px" width="15px" onclick="">
<!--<img src="/glpi/pics/croixRouge.gif" height="15px" width="15px" onclick="Suppression()">-->
<span id="loader" style="display: none;"><img src="/glpi/pics/loader.gif" alt="loading" /></span>
</p>
</div>
<div>
Suivi par courriel :
<select id="Suivi">
<option>Oui</option>
<option>Non</option>
</select>
</div>
<br/>
<div style="display: inline-block; "><input type="text" style="width:60px; border : 0px; background-color:#f2f2f2" value="Courriel : "></input></div>
<div id="stock" style="display: inline-block"></div>
<br/>
<div id="cadre"></div>
<div id="nbclics"></div>
</div>
</body>
</html>
Je vous explique la situation :
Je travaille sur du php, de l'html, du java et de l'ajax.
Pour le moment j'ai un petit bloc d'informations :
-Liste déroulante contenant des utilisateurs
-zone de texte qui affiche l'adresse mail de l'utilisateur sélectionné dans la liste (instantanément d'où l'utilisation de l'AJAX).
J'aimerai que quand je clique sur un bouton 'Ajouter' ce même bloc se crée, que la liste déroulante soit remplie par les mêmes utilisateurs qu'au-dessus, et que la zone de texte créée se remplisse toujours dynamiquement comme elle fait déjà.
Je sais que je dois faire une fonction en Java mais je n'y suis pas arrivé alors si vous avez une solution je suis preneur.
Merci d'avance !
Voici mon code :
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Techniques AJAX - XMLHttpRequest</title>
<script type="text/javascript" src="oXHR.js"></script>
<script type="text/javascript">
//Partie Ajax permettant la communication de données entre le client et le serveur
function request(oSelect) {
value = oSelect.options[oSelect.selectedIndex].value;
var xhr = getXMLHttpRequest();
xhr.onreadystatechange = function() {
if (xhr.readyState == 4 && (xhr.status == 200 || xhr.status == 0)) {
readData(xhr.responseXML);
document.getElementById("loader").style.display = "none";
} else if (xhr.readyState < 4) {
document.getElementById("loader").style.display = "inline";
}
};
//Utilisation de la méthode POST pour transmettre les infos
xhr.open("POST", "Traitement.php", true);
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
//Transmis à la page de Traitement (Traitement.php) pour une utilisation immédiate.
xhr.send("idUser=" +value);
}
function readData(oData) {
var nodes = oData.getElementsByTagName("item");
var oSelect = document.getElementById("stock");
var oOption, oInner;
oSelect.innerHTML = "";
for (var i=0, c=nodes.length; i<c; i++) {
oOption = document.createElement("input");
oInner = document.createTextNode(nodes[i].getAttribute("name"));
oOption.value = nodes[i].getAttribute("name");
oOption.style="width:350px; border:0px; background-color:#f2f2f2";
oOption.appendChild(oInner);
oSelect.appendChild(oOption);
}
}
</script>
</head>
<body>
<div style="background-color:#8ed4d8;width:425px">
<strong>
<center>Attribué à :</center>
</strong>
</div>
<div id="base" style="background:#f2f2f2;border-bottom:0px;width:425px;display: inline-block;">
<div id="Box">
<p id="users">
<img src="/glpi/pics/users.png" height="20px" width="20px"/>
<select id="usersSelect" onchange="request(this);">
<option value="none" selected>Selection</option>
<?php
try
{
// On se connecte a MySQL
$bdd = new PDO('mysql:host=localhost;dbname=glpibd', 'root', '');
}
catch(Exception $e)
{
die('Erreur : ' . $e->getMessage());
}
$reponse = $bdd->query("SELECT id,name FROM glpi_users ORDER BY name");
while ($donnees = $reponse->fetch())
{
echo "\t\t\t\t<option value=\"" . $donnees["id"] . "\">" . $donnees["name"] . "</option>\n";
}
?>
</select>
<!--<img src="/glpi/pics/aide.png" height="15px" width="15px">-->
<img src="/glpi/pics/add_dropdown.png" name="Ajouter" height="15px" width="15px" onclick="">
<!--<img src="/glpi/pics/croixRouge.gif" height="15px" width="15px" onclick="Suppression()">-->
<span id="loader" style="display: none;"><img src="/glpi/pics/loader.gif" alt="loading" /></span>
</p>
</div>
<div>
Suivi par courriel :
<select id="Suivi">
<option>Oui</option>
<option>Non</option>
</select>
</div>
<br/>
<div style="display: inline-block; "><input type="text" style="width:60px; border : 0px; background-color:#f2f2f2" value="Courriel : "></input></div>
<div id="stock" style="display: inline-block"></div>
<br/>
<div id="cadre"></div>
<div id="nbclics"></div>
</div>
</body>
</html>
A voir également:
- [Java/PHP/AJAX] création de listes déroulantes dynamiques
- Waptrick java football - Télécharger - Jeux vidéo
- Jeux java itel - Télécharger - Jeux vidéo
- Création liste déroulante excel - Guide
- Creation de compte google - Guide
- Creation de site web - Guide
