Rafraichissement asynchrone d'un champ

Eléphant du PHP | 57 Messages

15 janv. 2008, 11:35

Bonjour à tous !

Je souhaiterais savoir comment remplir automatiquement un champ text de mon site suivant une valeur qui vient d'être entrée dans ma base de données.

Je m'explique : j'utilise sur mon site à la fois un agenda et une fenetre pour des envoi de sms.

La fenetre d'envoi sms à besoin de savoir la date du rdv qui vient d'être pris dans l'agenda.
Cette date je sais où la récupérer dans ma base. Maintenant il faudrait de manière asynchrone récupérer la valeur de cette date et remplir le champ de ma fenetre envoi sms avec...

Si quelqu'un voit comment s'y prendre merci d'avance !!
Joss91

ViPHP
ViPHP | 4039 Messages

15 janv. 2008, 12:47

tu as regardé du côté des tutoriels ?
Mais qu'importe. (je suis ici - dernier petit projet)
Berze going social.

Eléphant du PHP | 57 Messages

15 janv. 2008, 15:32

je viens de regardé et pas de tutos dessus. je pense que c'est de l'ajax à utiliser avec du XMLHTTPRequest et autre...
Joss91

ViPHP
AB
ViPHP | 5818 Messages

15 janv. 2008, 15:44

Si la date figure déjà sur ton agenda pourquoi aller la rechercher dans la bdd ?
En cliquant dessus tu peux la transférer directement dans un champs choisi avec une petite fonction javascript.

ViPHP
ViPHP | 4039 Messages

15 janv. 2008, 15:47

Je pense que c'est de l'ajax à utiliser avec du XMLHTTPRequest et autre...
Gagné !
C'est effectivement Ajax qu'il faut employer (tuto)
(si c'est bien ce que tu veux faire, comme le souligne AB)

Pour ce qui est de l'application, ce tuto-ci est un exemple, (la fonction JS charge_page illustre ce que tu voudrais faire. On dirait pas tellement ça va vite, mais c'est asynchrone).
Mais qu'importe. (je suis ici - dernier petit projet)
Berze going social.

Eléphant du PHP | 57 Messages

15 janv. 2008, 17:00

oui je pense que ce tuto convient...mais il va falloir que je sache l'implémenter sur mon site car des questions se posent à moi !

il faut écrire ces lignes de code à l'endroit où je recupere ma date ou bien à l'endroit ou je veux l'injecter...?
Et les exemples via YUI sont indispensables ou pas besoin...?

sinon :
xhr.open('GET', 'http://www.phpfrance.com/script.php?param=valeur', true);
Je remplace quoi ?
document.getElementById('monDiv').innerHTML = xhr.responseText;
A la place de 'monDiv' je met le nom de ma balise input...?
Joss91

Avatar du membre
Modérateur PHPfrance
Modérateur PHPfrance | 10684 Messages

15 janv. 2008, 17:12

Les exemples de YUI ne sont pas indispensable, c'est juste l'illustration de l'utilisation d'une bonne librairie ajax :)

Dans l'exemple on fait référence à :

Code : Tout sélectionner

document : la page en cours document.getElementById('monDiv') : l'élément de la page en cours dont l'id est monDiv document.getElementById('monDiv').innerHTML : le contenu de l'élément de la page dont l'id est monDiv
On met donc à jour le contenu de l'élément de la page dont l'id est "monDiv" avec la valeur retournée par le script appelé via javascript.

Dans ton cas, ce n'est pas le contenu d'un div que tu veux changer mais l'attribut value d'un input. Tu peux soit lui donner un id et procéder de même pour aller modifier l'attribut value, soit passer par le formulaire :

Code : Tout sélectionner

document : la page en cours document.nom_formulaire : le formulaire ayant pour nom "nom_formulaire" document.nom_formulaire.nom_champ : le champ "nom_champ" du formulaire "nom_formulaire" document.nom_formulaire.nom_champ.value : la valeur de ce champ
Il te suffit donc de spécifier la valeur que tu veux assigner à ce champ pour qu'il soit mis à jour :)


Mais comme le fais remarquer AB, puisque tu disposes déjà de ta date dans ta page, il est sans doute inutile de t'embêter à mettre en place de l'ajax alors que tu peux simplement prérenseigner l'attribut value, voire le mettre à jour en javascript sans avoir à interroger le serveur...
Ce n'est pas en améliorant la bougie que l'on a inventé l'ampoule...

Eléphant du PHP | 57 Messages

15 janv. 2008, 17:27

mon agenda est multi utilisateur. ce que je voudrais c'est lorsqu'un utilisateur appui sur le bouton submit pour valider un rdv, que la date soit récupérer et injecter dans mon input situé dans un autre fenetre... ajax n'est pas obligatoire alors ?

voici ou je recupere ma date :

<TD class="tabIntitule">Date</TD>
<TD class="tabInput" nowrap>
<TABLE cellspacing="0" cellpadding="0" width="100%" border="0">
<TR>
<TD><INPUT type="text" class="Texte" name="ztDateNote" id="ztDateNote" size=12 maxlength=10 value="<?php echo $enr['ageDate'];$_SESSION['date_note']=$enr['ageDate']; ?>" title="Format jj/mm/aaaa" onKeyPress="return onlyChar(event);">&nbsp;<INPUT type="button" id="btCalNote" value="..." class="Picklist" style="height:16px" title="Afficher le calendrier">&nbsp;&nbsp;<I>(Format jj/mm/aaaa)</I>
</TD>

J'ai pu lire autre part qu'on pouvait aussi faire un input en hidden sur la date comme ceci :
<input id="un_id" type="hidden" name="new_tab_js" />
puis récupéré la date dans mon submit en faisant un javascript :
<input type="button" value="valider" onclick="document.getElementById('un_id').value=new_tab_js; form.submit();" />
est ce faisable comme ça...?
Joss91

Avatar du membre
Modérateur PHPfrance
Modérateur PHPfrance | 10684 Messages

15 janv. 2008, 18:02

Non, effectivement, ajax n'est pas obligatoire. Ajax te permet d'interroger le serveur sans avoir à recharger la page. Dans ton cas, tes données sont déjà disponibles dans ta page (puisque saisie par l'utilisateur) donc inutile d'interroger le serveur :)

Et effectivement, tu peux très bien mettre à jour un champ de ta page (ou même d'une autre fenêtre) à l'aide de javascript. Tu peux ainsi comme tu l'as fait (à quelques soucis de syntaxe près) avant de soumettre le formulaire, récupérer la date saisie par l'utilisateur et t'en servir pour renseigner un autre champ par ailleurs
<input type="button" value="valider" onclick="document.getElementById('idDuChampOuTuVeuxCopierLaDate').value=document.form.nomDuChampContenantLaDateSaisie.value; form.submit();" />
Ceci copie la valeur du champ dont le nom est 'nomDuChampContenantLaDateSaisie' du formulaire 'form' dans un champ dont l'id est 'idDuChampOuTuVeuxCopierLaDate' et soumet ensuite le formulaire :)

Et tu peux passer par du window.opener ou parent pour accéder à une fenêtre parente, ou bien avec des noms de fenêtre pour accéder à des popup et ainsi faire transiter des données d'une fenêtre à une autre si nécessaire :)
Ce n'est pas en améliorant la bougie que l'on a inventé l'ampoule...

Eléphant du PHP | 57 Messages

15 janv. 2008, 19:21

je n'arrive pas, comment utilise ton window.opener et parent ?

peut être est ce du au fait que ma date est dans ../xxx/xxx/date.php alors que ma fenetre a renseignée se trouve à ../xxx/champ.php .... ?

voici mon input ou j'aimerais recupéré la date :
Date du rendez-vous :</td><td>
		<input onclick="ds_sh(this);" name="date" id="date" readonly="readonly" size="30" />
		<input type="hidden" name="date_week_day" id="date_week_day" />
		<input type="hidden" name="date_day" id="date_day" />
		<input type="hidden" name="date_month" id="date_month" />
		<input type="hidden" name="date_year" id="date_year" />
Le ds_sh(this) fait appel a un calendrier pour info.

Ou dois je implementer mon window.opener ? et comment l'utiliser ? :(
Joss91

Avatar du membre
Modérateur PHPfrance
Modérateur PHPfrance | 10684 Messages

15 janv. 2008, 19:47

Le javascript ne s'exécute que côté client et donc uniquement au niveau du navigateur. PHP n'entre donc pas en jeu là dedans :) Donc à priori pas besoin des chemins des scripts, tout ce qui nous interesse ce sont les fenêtres qui sont ouvertes pour l'utilisateur.

En fait, on manque un peu d'info sur ton contexte... que se passe-t-il lorsque l'on clique dans ton champ date ? En gros que fait ta fonction ds_sh() ? J'imagine qu'elle ouvre une popup dans laquelle se trouve le calendrier qui permet à l'utilisateur de sélectionner une date ?

Si c'est bien ça, alors il faut dans cette popup ajouter un peu de code lorsque l'utilisateur valide sa date de manière à mettre à jour la fenêtre parente. Quelque chose du genre :

Code : Tout sélectionner

window.opener.getElementById('date').value = "récup de la valeur saisie par l'utilisateur"; // vu plus haut :)
window.opener : correspond à la fenêtre qui a ouvert la popup
window.opener.getElementById('date').value : fait donc référence a la valeur du champ dont l'id est "date" de la page parente :)
Ce n'est pas en améliorant la bougie que l'on a inventé l'ampoule...

ViPHP
AB
ViPHP | 5818 Messages

15 janv. 2008, 20:00

En fait, on manque un peu d'info sur ton contexte...
Oui il faudrait que nous nous dise plus précisément le contexte, ce que fais le visiteur, l'ordre d'ouverture de tes fenêtres etc.

Pour toi c'est évident mais pour ceux qui lisent ton post c'est assez flou. D'où le fait que l'on ne peux te donner que des conseils d'ordre général :wink:

Eléphant du PHP | 57 Messages

16 janv. 2008, 00:39

Chronologiquement nous avons : ma premiere fenetre ouvrantevqui est celle d'envoi sms (là ou se trouve mon champ date à remplir). dans le body de cette fenetre se trouve un onload qui contient un window.open(agenda). Ce window.open genere mon agenda (ou je vais effectué des saisies de rdv par des submit, voir les bouts de codes plus haut).

Concernant le ds_sh oui en cliquant sur le champ (celui qu'il faut remplir) on genere un calendrier petit format pour une saisie de date. Or désormais j'aimerais que ce champ se remplisse automatiquement a chaque submit de la date du rdv enregistré dans l'agenda... (si on prend un rdv dans l'agenda le lundi 8 mars 2008 et bien cela renseigne automatiquement ma fenetre d'envoi sms !)

Je pense que j'ai tout dit...? :)

Pour window.opener je pense que la fenetre parente n'est pas l'agenda mais pluto ma fenetre d'envoi de sms ! donc cela ne va pas aller...?

[Note : ce message a été posté de manière anonyme avant d'être réattribué à son auteur]

Avatar du membre
Modérateur PHPfrance
Modérateur PHPfrance | 10684 Messages

16 janv. 2008, 01:15

Pour window.opener je pense que la fenetre parente n'est pas l'agenda mais pluto ma fenetre d'envoi de sms !
Effectivement d'après tes explications ça devrait être ça :)
donc cela ne va pas aller...?
Et pourquoi ça n'irait pas je vous prie môssieur ? :)

Il te faut modifier dans ton agenda la sélection d'un jour pour lui dire qu'en plus du truc qu'il fait habituellement, il doit également aller voir dans la fenêtre parente le champ spécifié et le mettre à jour par la même occasion avec la date sélectionée. Y a pas de raison pour que ça n'aille pas ;)
Ce n'est pas en améliorant la bougie que l'on a inventé l'ampoule...

Eléphant du PHP | 57 Messages

16 janv. 2008, 10:54

Je ne sais pas pourquoi cela ne marche pas... :( j'ai essayé ça :
<INPUT type="button" name="btEnregistre" value="Enregistrer" onClick="javascript: return saisieOK(document.Form1);javascript: window.opener.getElementById('date').value=document.form.ztDateNote.value; form.submit();" class="Bouton">
Pour rappel ma fenetre agenda se trouve dans ../autorecall/agenda/enregistrer_note.php
alors que ma fenetre parente d'envoi sms se trouve ici : ../autorecall/popup.php

voici ce qui se trouve après mon submit, peut etre cela aidera :
</FORM>
  <SCRIPT type="text/javascript">
  <!--   
    Calendar.setup( {
      inputField : "ztDateNote",    // ID of the input field
      ifFormat   : "%d/%m/%Y",  // the date format
      button     : "btCalNote"      // ID of the button
    } );
<?php
    if ($edit!="occ") {
?>

    Calendar.setup( {
      inputField : "ztDateFin",    // ID of the input field
      ifFormat   : "%d/%m/%Y",  // the date format
      button     : "btCalFin"      // ID of the button
    } );
<?php 
    }
?>
    document.Form1.ztLibelle.focus();
  //-->
  </SCRIPT>
Le mieux pour eclaircir le prob serait peut être de telecharger l'agenda phenix (c'est celui que j'utilise) ... ? ca mange pas de pain on va dire : http://www.phenix.gapi.fr/
Merci d'avance pour ton investissement Ryle !
Joss91