11540 sujets

JavaScript, DOM et API Web HTML5

[Résolu] JQuery SQL - champ de formulaire dynamique

Bonjour,

Avant de commencer à exposer la difficulté à laquelle je suis confronté, je précise que la dernière fois que j'ai du faire du dev web c'était au siècle dernier... vous avez le contexte Smiley cligne

Donc voilà, j'ai un formulaire php de prise de rdv qui fonctionne pas mal, mais auquel il manque une fonctionnalité souhaitée : je souhaite peupler le contenu d'un select en fonction de ce qui est renseigné dans un champ input, de façon transparente pour l'utilisateur.


Pour simplifier, disons qu'on a les champs suivants dans le formulaire :
<id de l'enregistrement>
<un nom distinctif> (input)
<date du rdv> (input avec jquery datepicker)
<heure du rdv> (select)

J'ai besoin que lorsque le champ <date du rdv> est renseigné il y ait une requete en arrière plan pour mettre à jour le champ <heure du rdv> en fonction des disponibilités (un truc du genre 'SELECT heurerdv FROM agenda WHERE date=$daterdv AND verrou=0')
Le but c'est que ne soient affichés dans le select que les créneaux horaires libres.

Il faut je pense isoler la requete en question dans un fichier php séparé et l'appeler avec javascript, mais malgré mes recherches je n'ai aucune idée sur comment l'appeler depuis le formulaire ni récupérer les données (jquery et json? Smiley confused )
Pourriez-vous m'indiquer un bon tuto ou m'expliquer par l'exemple comment mettre ce type de fonctionnalité en place?

Merci de l'aide que vous pourrez m'apporter. Smiley smile
Modifié par lateonet (15 Oct 2012 - 14:09)
Tu peux faire ça de 3 façon différentes avec Jquery.

Soit tu utilises .ajax(); avec une méthode POST ou GET ou alors .get(); ou encore .post(); .

Peu importe la méthode employée du moment qu'elle appelle ton fichier php qui lui va te renvoyer un retour json avec json_encode contenant tes données que tu pourras ensuite traiter via JQuery avec l'élément success: .

Exemple avec .ajax(); :

$.ajax({
	url: "url de ton fichier php",
	type: "POST",
	data: { 'MonCul': 'C\'est du poulet' }, /* peu importe le emssage envoyé a ton fichier php */
	dataType: 'json',
	success: function(json){
		if (json.reponse == 'reponse json 1') { /* json.X == X  dépend de ce que renvoi ton fichier php */
			$actionAssociee
		} else if (json.reponse == 'reponse json 2'){
			$actionAssociee
		} else {
			$actionAssociee
		}
	}
});
En bidouillant la page php appelée pour visualiser le machin, je lui ai fait créer le select entier plutot que les seules options dudit select.
Et là, « eureka, pourquoi m'embeter à récupérer des valeurs qu'il faudra travailler quand je peux récupérer du html tout fait à insérer dans le dom de la page principale? »

après quelques modifs mineures dans le html (event onchange + identifiant sur le champ input fournissant la date...) et l'ajout à la page principale php d'un simple :
<script>
function affiche_creneaux(date) {
                var date = document.getElementById('test').value;
                $("#heure").load("http://www.toto.org/demo/inc/monboutdepage.php?date="+date);
}
</script>


j'ai bien le select qui change en fonction de la date.
C'est peut-etre sale au niveau code (?) mais j'ai le comportement attendu.

Merci pour la piste, si ça m'a bien cassé le crane, ça m'aidera surement ultérieurement ^^
Sujet clos
Aller à