[Java/PHP/AJAX] création de listes déroulantes dynamiques

Fermé
PL29 - 17 juin 2014 à 11:01
yamdjio Messages postés 90 Date d'inscription lundi 18 août 2014 Statut Membre Dernière intervention 21 mai 2015 - 18 août 2014 à 18:55
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>



A voir également:

1 réponse

yamdjio Messages postés 90 Date d'inscription lundi 18 août 2014 Statut Membre Dernière intervention 21 mai 2015 5
18 août 2014 à 18:55
mets ton code dans un serveur gratuit pour qu'on puisse voir l'aspect de la page web. et voir ta liste déroulante
0