[résolu] Exécuter une requête à partir d'un champ

Exécuter une requête à partir d'un champ [résolu] - HTML/CSS - Programmation

Marsh Posté le 24-07-2007 à 11:55:54    

Bonjour,
 
J'aurais besoin de vos lumières pour le problème suivant.
 
J'ai un formulaire avec un champ date. Ce formulaire permet de gérer un planning.
Lors de la saisie, j'aimerais afficher le planning du jour sélectionné dans le champ date.
 
Exemple : je rentre une date 24/07/2007 dans le champ date du formulaire. Lorsque  je sors du champ, j'aimerais exécuter une requête mysql et afficher le résultat dans un tableau.
 
Merci de votre aide.


Message édité par cakay le 25-07-2007 à 16:12:39
Reply

Marsh Posté le 24-07-2007 à 11:55:54   

Reply

Marsh Posté le 24-07-2007 à 12:03:14    

C'est simple, il te suffit de faire une requete ajax.

 

1- sur l'vénement que tu désires (perte de focus, appui d'un bouton), appelle une fonction javascript

 

2- dans cette fontion fais un appel vers une page php/asp/cquetuveux en passant en paramètre la date, grâce à un objet httprequest javascript(cherche sur google). C'est aussi appellé ajax. Cette page fait la requete mysql et renvoie le résultat de la requete.

 

3- l'objet httprequest te renvoie le resultat renvoyé par la page appéllée (donc le résultat de la requete) , que t'as plus qu'a afficher sous forme de tableau, toujours en javascript.


Message édité par durkheim le 24-07-2007 à 12:04:10
Reply

Marsh Posté le 24-07-2007 à 12:42:39    

oui, j'avais cru comprendre que la solution viendrait d'AJAX
 
je vais essayer de matérialiser tout ça
 
merci durkheim pour tes conseils avisés

Reply

Marsh Posté le 24-07-2007 à 13:43:10    

Hésite pas à demander de l'aide, si tu veux débugger ton code ajax notamment, je reste dans les parages.

Reply

Marsh Posté le 24-07-2007 à 22:28:41    

j'ai réussi en faisant ça :
 
dans une balise script dans ma page html

Code :
  1. function afficher (url)
  2. {
  3. if(window.XMLHttpRequest) // navigateur firefox
  4. objet0= new XMLHttpRequest();
  5. else if(window.ActiveXObject) // navigateur internet explorer
  6. objet0 = new ActiveXObject("Microsoft.XMLHTTP" );
  7. else return(false);
  8. objet0.open ('GET', url, true);
  9. objet0.onreadystatechange = function()
  10. {
  11. if (objet0.readyState==1)
  12. {
  13. document.getElementById('resultat').innerHTML="Chargement en cours.";
  14. }
  15. else if (objet0.readyState==4)
  16. {
  17. if(objet0.status==200)
  18. {
  19. document.getElementById('resultat').innerHTML=objet0.responseText;
  20. }
  21. else if(objet0.status==404)
  22. {
  23. document.getElementById('resultat').innerHTML = "Erreur d'adresse";
  24. }
  25. else
  26. {
  27. document.getElementById('resultat').innerHTML = "Erreur : ".objet0.status;
  28. }
  29. }
  30. }
  31. objet0.send(null);
  32. return;
  33. }


 
ensuite dans un form, j'ai mon input

Code :
  1. <input id="date" name="date" type="text" size="16" maxlength="12" value=""
  2. onMOUSEOVER="javascript:afficher('mapage.php?date='+document.getElementById('date').value);
  3. return false;" >


 
et pour finir, la zone d'affichage

Code :
  1. <div id="resultat"></div>


 
dans mapage.php, je récupère avec $date=$_GET['date'] et je termine le tout avec ma requête et la mise en forme.
 
mon problème est le suivant,  je n'arrive pas à trouver le bon événement (onMOUSEOVER ici) qui me permettrait d'afficher le résultat dès que le champ est renseigné.
 
auriez-vous une idée ?

Reply

Marsh Posté le 25-07-2007 à 11:10:01    

Alors, pour un input, le w3c nous donne la liste possible des événements suivants:
 
onfocus, onblur, onselect, onchange, onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup  
 
Mon avis perso: sur le onchange, vérifier que le champ comporte une date valide. Si c'est le cas, appeller ta fonction.
 
Beau boulot en tout cas, ça fait plaisir de voir quelqu'un se bouger.

Reply

Marsh Posté le 25-07-2007 à 13:19:33    

merci durkheim pour l'intérêt que tu portes à mes recherches ;-)
 
j'ai donc essayé avec le onchange, mais ce n'est pas suffisant.
 
lors de la première saisie du formulaire, cela fonctionne. je sélectionne une date, j'ai l'affichage du planning pour cette date sélectionnée, puis je continue la saisie du formulaire et j'enregistre.
 
après ce premier enregistrement, je reste sur le formulaire et je conserve la date précédente afin de faciliter la saisie.
 
mais voilà, le tableau que je souhaite afficher est de nouveau vide.
 
j'ai dû me tromper de direction. il ne faut peut-être pas passer par un évènement de la souris ou du clavier ? à moins d'en simuler un, style utiliser onfocus et donc dans ce cas, mettre le focus dans le champ date systématiquement...
 
j'avoue être un peu dans le flou là

Reply

Marsh Posté le 25-07-2007 à 13:38:58    

Je ne comprends pas...
Tu saisis ton formulaire, puis tu le valides, ce qui recharge la page en conservant la date, mais par contre le tableau a afficher est vide.
C'est sur la recharge de la page que tu perds ton tableau?
 
Si c'est le cas c'est très simple: lors du chargement de la page, vérifie en javascript que le champ n'est pas vide et si il n'est pas vide appelle ta fonction ajax.
 

Reply

Marsh Posté le 25-07-2007 à 14:54:07    

oui, après validation du formulaire, le traitement s'effectue dans la même page. j'enregistre mes infos dans la BD et je reste sur la page du formulaire avec la date précédente afin de poursuivre mes autres enregistrements.

 

le problème que je rencontre est le suivant. étant donné que je ne change pas la date, puisqu'elle me convient, le XMLHttpRequest ne fonctionne plus puisque qu'il n'est actif que si l'action onchange est effectuée sur le input date

 

ta remarque me pârait être judicieuse, mais là je bug. je me dis, à faire le contrôle du champ date non vide, pourquoi pas le faire dès le début ? mais je ne vois vraiment pas comment

 

j'ai l'impression d'être près du but, mais si loin aussi


Message édité par cakay le 25-07-2007 à 14:54:37
Reply

Marsh Posté le 25-07-2007 à 15:30:58    

Je ne comprends pas tes interrogations ("à faire le contrôle du champ date non vide, pourquoi pas le faire dès le début ?" ).

 

Mettre le script suivant vers la fin de ta page ne résoud pas le problème?

 
Code :
  1. <script ...attributs...>
  2. if (document.getElementById('date').value != "" )
  3. {
  4.   afficher('mapage.php?date='+document.getElementById('date').value);
  5. }
  6. </script>



Message édité par durkheim le 25-07-2007 à 15:31:41
Reply

Marsh Posté le 25-07-2007 à 15:30:58   

Reply

Marsh Posté le 25-07-2007 à 15:45:35    

oui bien sûr que ça marche ;-)
 
j'allais chercher midi à 14h et toi en deux coups de cuillère à pot tu as trouvé la solution. il faut dire que c'est mon premier script AJAX.
 
cela fait un moment que je voulais m'y mettre, et là l'occasion à fait que...
 
en tout cas, je te remercie énormément pour ton aide qui m'a été plus que précieuse.
 
on peut donc dire que c'est réglé.
 
Merci encore à toi durkheim

Reply

Marsh Posté le 25-07-2007 à 15:57:26    

Mais de rien ce fut un plaisir.
pense à l'occase à mettre un "résolu" dans le titre du topic pour montrer que ton problème n'est plus.

Reply

Marsh Posté le 19-10-2007 à 19:04:14    

Bonjour.
 
Etant debutant en ajax et avec toutes les jouyeustées comme httprequest et autre, je cherchais depuis un certain temps un p'tit truc qui marche pour démarrer.
 
Et j'ai trouver mon bonheur avec votre discussion.
 
Donc, même si je ne suis pas (encore) à même de contribuer, je tenais à vous dire merci d'avoir partagé votre savoir faire et votre travail...
 
Voila, voila...
 
A bientôt

Reply

Marsh Posté le 23-10-2007 à 06:35:27    

Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed